// ✅ OBLIGATOIRE : Séparation HTML/JS const button = document.getElementById('myButton'); button.addEventListener('click', handleClick, { passive: true }); // ✅ Avec options de performance element.addEventListener('scroll', handleScroll, { passive: true }); element.addEventListener('touchstart', handleTouch, { passive: true }); ``` ### 2.3 Validation des entrées utilisateur ```javascript /** * Valide une entrée utilisateur selon un schéma * @param {*} value - Valeur à valider * @param {Object} schema - Schéma de validation * @returns {Object} Résultat de validation {valid, value, error} */ function validateInput(value, schema) { // 1. Vérification du type if (typeof value !== schema.type) { return { valid: false, error: 'Type invalide' }; } // 2. Longueur maximale (protection DoS) if (schema.maxLength && String(value).length > schema.maxLength) { return { valid: false, error: `Maximum ${schema.maxLength} caractères` }; } // 3. Longueur minimale if (schema.minLength && String(value).length < schema.minLength) { return { valid: false, error: `Minimum ${schema.minLength} caractères` }; } // 4. Format (regex SIMPLES uniquement - éviter ReDoS) if (schema.pattern && !schema.pattern.test(value)) { return { valid: false, error: 'Format invalide' }; } // 5. Valeurs autorisées (whitelist) if (schema.allowedValues && !schema.allowedValues.includes(value)) { return { valid: false, error: 'Valeur non autorisée' }; } return { valid: true, value: String(value).trim() }; } // Exemple d'utilisation const emailSchema = { type: 'string', maxLength: 254, minLength: 5, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ // Regex simple }; const result = validateInput(userEmail, emailSchema); if (!result.valid) { showUserError(result.error); } ``` **Règles de validation :** - Valider côté client ET côté serveur (ne jamais faire confiance à la validation client seule) - Utiliser des listes blanches (whitelist) plutôt que des listes noires (blacklist) - Rejeter les données invalides plutôt que de les corriger silencieusement - Limiter la taille des entrées pour éviter les attaques DoS - Éviter les regex complexes (risque ReDoS) ### 2.4 JSON Parse sécurisé ```javascript /** * Parse JSON de manière sécurisée avec fallback * @param {string} str - Chaîne JSON à parser * @param {*} fallback - Valeur de secours * @returns {*} Objet parsé ou fallback */ function safeJSONParse(str, fallback = null) { if (typeof str !== 'string' || str.trim() === '') { return fallback; } try { return JSON.parse(str); } catch (error) { console.warn('Échec du parsing JSON:', error.message); return fallback; } } ``` ### 2.5 Utilisation de DOMPurify (si innerHTML nécessaire) ```html ``` ```javascript // Utilisation obligatoire si innerHTML requis const cleanHTML = DOMPurify.sanitize(dirtyHTML, { ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p', 'br'], ALLOWED_ATTR: ['href', 'title'], ALLOW_DATA_ATTR: false }); element.innerHTML = cleanHTML; ``` --- ## 3. SÉCURITÉ - PRATIQUES STRICTEMENT INTERDITES | Interdit | Raison | Alternative | |----------|--------|-------------| | `eval()` | Exécution de code arbitraire | Parser JSON, switch/case | | `new Function()` | Équivalent à eval | Fonctions définies | | `document.write()` | Écrase le DOM, bloque le parsing | `createElement`, `textContent` | | `innerHTML` sans DOMPurify | Vecteur XSS | `textContent`, `createElement` | | Concaténation HTML | Vecteur XSS | Template literals + échappement | | `setTimeout(string)` | Équivalent à eval | `setTimeout(function)` | | `setInterval(string)` | Équivalent à eval | `setInterval(function)` | | Événements inline | XSS, mauvaise séparation | `addEventListener` | | `@latest` sur CDN | Ruptures silencieuses | Versions fixées | | URLs/libs inventées | Code non fonctionnel | Vérifier l'existence | | Regex complexes | Risque ReDoS | Regex simples et testées | | Stockage mots de passe localStorage | Vol via XSS | sessionStorage ou cookies HttpOnly | --- ## 4. GESTION DES DONNÉES LOCALES ### 4.1 Storage Wrapper sécurisé ```javascript /** * Wrapper sécurisé pour localStorage/sessionStorage */ const SecureStorage = { /** * Stocke une valeur avec timestamp * @param {string} key - Clé de stockage * @param {*} value - Valeur à stocker * @param {boolean} session - Utiliser sessionStorage * @returns {boolean} Succès de l'opération */ set(key, value, session = false) { const storage = session ? sessionStorage : localStorage; try { const item = { data: value, timestamp: Date.now(), version: '1.0' }; storage.setItem(key, JSON.stringify(item)); return true; } catch (error) { if (error.name === 'QuotaExceededError') { console.error('Quota de stockage dépassé'); } return false; } }, /** * Récupère une valeur avec vérification d'expiration * @param {string} key - Clé de stockage * @param {number|null} maxAge - Âge maximum en ms (null = pas d'expiration) * @param {boolean} session - Utiliser sessionStorage * @returns {*} Valeur stockée ou null */ get(key, maxAge = null, session = false) { const storage = session ? sessionStorage : localStorage; const raw = storage.getItem(key); if (!raw) return null; const item = safeJSONParse(raw); if (!item || !item.data) return null; // Vérification d'expiration if (maxAge !== null && Date.now() - item.timestamp > maxAge) { storage.removeItem(key); return null; } return item.data; }, /** * Supprime une valeur * @param {string} key - Clé à supprimer * @param {boolean} session - Utiliser sessionStorage */ remove(key, session = false) { const storage = session ? sessionStorage : localStorage; storage.removeItem(key); }, /** * Vide le stockage * @param {boolean} session - Utiliser sessionStorage */ clear(session = false) { const storage = session ? sessionStorage : localStorage; storage.clear(); } }; ``` ### 4.2 Règles de stockage des données sensibles | Type de donnée | Stockage autorisé | Stockage interdit | |----------------|-------------------|-------------------| | Préférences utilisateur | localStorage | - | | Thème/langue | localStorage | - | | Données de formulaire temporaires | sessionStorage | localStorage | | Clés API | sessionStorage + input à chaque session | localStorage | | Tokens d'authentification | Cookies HttpOnly/Secure | localStorage | | Mots de passe | JAMAIS côté client | localStorage, sessionStorage | | Données personnelles sensibles | Chiffré si nécessaire | En clair | --- ## 5. RESSOURCES EXTERNES (CDN) ### 5.1 CDN autorisés (ordre de préférence) 1. `cdnjs.cloudflare.com` (préféré) 2. `unpkg.com` 3. `cdn.jsdelivr.net` ### 5.2 Format obligatoire ```html ``` ### 5.3 Règles strictes - ❌ `@latest` INTERDIT - risque de ruptures silencieuses - ❌ URLs inventées INTERDIT - code non fonctionnel - ❌ Bibliothèques obsolètes INTERDIT - ✅ Toujours vérifier l'existence de la ressource - ✅ Documenter toutes les dépendances - ✅ Préférer les versions LTS stables --- ## 6. ACCESSIBILITÉ (WCAG 2.2 Niveau AA) ### 6.1 Principes fondamentaux WCAG - **Perceptible :** L'information doit être perceptible par tous - **Utilisable :** Les composants doivent être utilisables - **Compréhensible :** L'information et l'interface doivent être compréhensibles - **Robuste :** Le contenu doit être compatible avec les technologies d'assistance ### 6.2 Structure sémantique obligatoire ```html

Titre de section

Sous-section

``` **Règles des titres :** - Un seul `

` par page - Hiérarchie stricte : H1 → H2 → H3 (pas de sauts) - Utiliser les titres pour la structure, pas le styling - Majuscule uniquement sur le premier mot ### 6.3 Formulaires accessibles ```html
Informations de contact
Adresse courriel * Format attendu : exemple@domaine.com