7 ASTUCES DE SÉCURITESÉCURITÉ🛡️ JS QUE TOUT DEV WEB DEVRAIT MAÎTRISER!

🛡️ 7 ASTUCES DE SÉCU JS QUE TOUT DEV WEB DEVRAIT MAÎTRISER C O D E Z S A N S B U G S @VotrePseudo votresite.com

Hey, les ninjas du JavaScript ! Prêts à sécuriser vos apps comme jamais ? Voici 7 techniques qui feront de votre code JS une forteresse imprenable. Let's debug ! 🐛

1. PROTÉGEZ VOS TOKENS JWT

🔐 @VotrePseudo votresite.com

Les JWT sont partout en JS, mais attention aux fuites !

// 🚫 Nope, pas comme ça
localStorage.setItem('token', jwt);
 
// ✅ Stockage sécurisé côté serveur
// Utilisez des cookies httpOnly+secure
res.cookie('token', jwt, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict'
});

Pro-tip : Avec Express ? Jetez un œil à cookie-session pour une gestion simplifiée et sécurisée des sessions.

ÉVITEZ LES INJECTIONS NOSQL 📊 @VotrePseudo votresite.com

MongoDB est cool, mais pas sans risques !

// 🚫 Vulnérable aux injections NoSQL
User.findOne({ username: req.body.username });
 
// ✅ Validation des inputs avec Joi
const schema = Joi.object({
  username: Joi.string().alphanum().min(3).max(30).required()
});
const { error, value } = schema.validate(req.body);
if (!error) User.findOne({ username: value.username });

Challenge : Trouvez toutes les requêtes MongoDB dans votre code et sécurisez-les. Première PR = café gratuit ! ☕

XSS : LE STRUGGLE DES DEVS REACT ⚛️ @VotrePseudo votresite.com

React n'est pas une armure anti-XSS magique !

// 🚫 Aïe, ça peut faire mal
const Comment = ({ text }) => <div>{text}</div>;
 
// ✅ Sanitization FTW
import DOMPurify from 'dompurify';
const Comment = ({ text }) => (
  <div dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(text)}} />
);

Astuce : Utilisez eslint-plugin-react-security pour détecter les vulnérabilités XSS potentielles dans votre code React.

SÉCURISEZ VOS API EXPRESS 🚂 @VotrePseudo votresite.com

Express.js, c'est génial, mais pas invincible !

// Helmet : le couteau suisse de la sécurité Express
const helmet = require('helmet');
app.use(helmet());
 
// Rate limiting pour contrer les attaques DDoS
const rateLimit = require("express-rate-limit");
app.use("/api/", rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100 // limite chaque IP à 100 requêtes par fenêtre
}));

Défi : Implémentez une authentification JWT avec refresh tokens dans votre API Express. Bonus : utilisez passport-jwt !

NPM : LE FAR WEST DES DÉPENDANCES 📦 @VotrePseudo votresite.com

npm install vulnérabilité ? Non merci !

# Scannez vos dépendances
npm audit
 
# Verrouillez vos versions
npm ci
 
# Pour les braves : mise à jour auto
npx npm-check-updates -u && npm install

Pro-tip : Utilisez npm-audit-resolver pour gérer les faux positifs et les vulnérabilités non résolues.

TESTEZ VOTRE SÉCU AVEC JEST 🃏 @VotrePseudo votresite.com

Les tests, c'est comme le JavaScript : on n'en a jamais assez !

const request = require('supertest');
const app = require('../app');
 
describe('Security Headers', () => {
  it('should have CSRF protection', async () => {
    const res = await request(app).get('/');
    expect(res.headers['x-xss-protection']).toBe('1; mode=block');
  });
});

Challenge : Écrivez des tests de sécurité pour toutes vos routes API. Objectif : 100% de coverage sur les endpoints sensibles !

LOGGING : DEBUGGEZ COMME UN PRO 🕵️ @VotrePseudo votresite.com

console.log ? C'est tellement 2010 !

const winston = require('winston');
const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.File({ filename: 'error.log', level: 'error' }),
    new winston.transports.Console({ format: winston.format.simple() })
  ]
});
 
// Utilisez-le partout !
logger.info('User action', { userId: user.id, action: 'login' });

Astuce ultime : Intégrez vos logs à Elasticsearch avec le plugin winston-elasticsearch. Kibana vous remerciera !

#1. PROTÉGEZ VOS TOKENS JWT

1. PROTÉGEZ VOS TOKENS JWT