Failles de sécurité web

// DANGER : injection XSS via dangerouslySetInnerHTML
const userComment = '<script>document.cookie</script>'

// Mal : le script s'exécute
<div dangerouslySetInnerHTML={{ __html: userComment }} />

// Bien : React échappe automatiquement le contenu
<div>{userComment}</div>
// Affiche le texte brut, pas de script exécuté

// Si tu DOIS utiliser du HTML brut, sanitize d'abord :
import DOMPurify from 'dompurify'
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userComment) }} />

// Protection CSRF côté API Route (Next.js)
export async function POST(request: Request) {
  // Vérifier l'origine de la requête
  const origin = request.headers.get('origin')
  const allowedOrigins = ['https://tonsite.com']

  if (!origin || !allowedOrigins.includes(origin)) {
    return new Response('Forbidden', { status: 403 })
  }

  // Vérifier le header personnalisé (les formulaires cross-origin ne peuvent pas l'envoyer)
  const csrfHeader = request.headers.get('x-requested-with')
  if (csrfHeader !== 'XMLHttpRequest') {
    return new Response('Forbidden', { status: 403 })
  }

  // Traiter la requête légitime...
}

// DANGER : paramètre URL utilisé directement
const searchParams = new URLSearchParams(window.location.search)
const redirect = searchParams.get('redirect')

// Mal : redirection ouverte (open redirect)
window.location.href = redirect  // l'attaquant peut rediriger vers un site de phishing

// Bien : valider le domaine avant de rediriger
function safeRedirect(url: string): string {
  try {
    const parsed = new URL(url, window.location.origin)
    // N'autoriser que les redirections internes
    if (parsed.origin === window.location.origin) {
      return parsed.pathname
    }
  } catch {
    // URL invalide
  }
  return '/'  // fallback sûr
}

// next.config.ts : headers de sécurité
const nextConfig = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          // Empêcher le clickjacking (iframe malveillant)
          { key: 'X-Frame-Options', value: 'DENY' },

          // Empêcher le sniffing de type MIME
          { key: 'X-Content-Type-Options', value: 'nosniff' },

          // Politique de referrer
          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },

          // Permissions Policy (désactiver caméra, micro, etc.)
          { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
        ],
      },
    ]
  },
}

# Scanner tes dépendances
npm audit

# Résultat : liste des vulnérabilités trouvées
# - Critical : à corriger immédiatement
# - High : à corriger rapidement
# - Moderate : à planifier
# - Low : à surveiller

# Corriger automatiquement les failles mineures
npm audit fix

# Pour les failles majeures (breaking changes possibles)
npm audit fix --force  # attention : peut casser des choses

# Alternative : Snyk (plus détaillé)
npx snyk test

# Vérifications HTTPS :
# [ ] Ton site charge en HTTPS (pas HTTP)
# [ ] Redirection HTTP -> HTTPS automatique
# [ ] Pas de "mixed content" (ressources HTTP sur une page HTTPS)
# [ ] Certificat SSL valide et non expiré

# Cloudflare Pages : HTTPS automatique (rien à configurer)
# Vercel : HTTPS automatique
# Serveur custom : Let's Encrypt (gratuit)

# Ta checklist sécurité :
# [ ] Pas de dangerouslySetInnerHTML sans sanitization
# [ ] Validation de l'origine des requêtes API
# [ ] Pas de redirection ouverte (open redirect)
# [ ] Headers de sécurité dans next.config.ts
# [ ] npm audit régulier (0 vulnérabilités critiques)
# [ ] HTTPS partout
# [ ] Pas de secrets dans le code client (NEXT_PUBLIC_* = public)