ConsentLab + CSP

1. Pourquoi une CSP stricte

Une Content-Security-Policy(CSP) stricte est l'une des meilleures protections contre les attaques XSS : le navigateur n'exécute que les scripts et styles explicitement autorisés par votre politique, via un nonce généré par votre serveur à chaque requête.

Beaucoup d'outils tiers demandent d'ajouter 'unsafe-inline' à votre politique pour fonctionner. Ne le faites jamais: cela annule l'essentiel de la protection apportée par la CSP, pour tout votre site.

ConsentLab n'en a pas besoin : le widget récupère le nonce de votre page au chargement et l'applique automatiquement à tout ce qu'il injecte — ses styles etles scripts qu'il débloque après consentement.

2. Intégration

Recommandé : l'attribut nonce natif

Posez l'attribut noncestandard sur la balise du loader, comme pour n'importe quel script de votre page. Remplacez {NONCE} par la valeur générée par votre serveur à chaque requête :

<script
  src="https://cdn.consentlab.eu/widget/v1/consentlab.min.js"
  data-cc-key="VOTRE_CLE_API"
  nonce="{NONCE}"
  defer
></script>

Alternative : data-cc-nonce (loader injecté dynamiquement)

Les navigateurs vident l'attribut nonce des éléments insérés dans le DOM (protection contre l'exfiltration). Si votre loader est injecté dynamiquement(tag manager, script d'init…), le widget ne peut donc pas relire le nonce natif : passez-le aussi via data-cc-nonce :

// Uniquement si le loader est injecté dynamiquement.
const s = document.createElement('script');
s.src = 'https://cdn.consentlab.eu/widget/v1/consentlab.min.js';
s.defer = true;
s.dataset.ccKey = 'VOTRE_CLE_API';
s.dataset.ccNonce = nonce; // le nonce CSP de la page courante
s.nonce = nonce;           // requis pour exécuter le loader lui-même
document.head.appendChild(s);

3. Politique recommandée

Exemple de politique stricte compatible avec ConsentLab (et vos autres scripts) :

Content-Security-Policy:
  script-src 'nonce-{NONCE}' 'strict-dynamic' https:;
  style-src 'nonce-{NONCE}';
  connect-src 'self' https://api.consentlab.eu;

• Avec 'strict-dynamic', les scripts créés par notre loader nonced héritent de sa confiance (navigateurs modernes) — les scripts débloqués au consentement s'exécutent donc sans allowlister chaque domaine tiers.
• Les styles injectés, eux, ont toujours besoin du nonce — 'strict-dynamic'ne s'applique qu'aux scripts. C'est pour cela que le widget propage nativement le nonce.
• Sans 'strict-dynamic', ça fonctionne aussi : le widget pose le nonce partout où c'est nécessaire (styles et clones de scripts). Ajoutez alors les origines des scripts externes à script-src (voir section suivante).
• Le https: en fin de script-src est un repli pour les navigateurs qui ne connaissent pas 'strict-dynamic'(il est ignoré par ceux qui le connaissent).

4. Origines à autoriser

• connect-src https://api.consentlab.eu — le widget y charge sa configuration et enregistre les preuves de consentement. Si vous utilisez data-cc-api pour pointer vers une autre instance, autorisez cette origine-là.
• script-src https://cdn.consentlab.eu — uniquement si le loader vient du CDN et que votre politique n'utilise pas 'strict-dynamic' (le nonce sur la balise suffit sinon).
• Les domaines des outils que vous débloquez au consentement (par exemple www.googletagmanager.com, *.google-analytics.com) dans script-src / connect-src, selon leur documentation — sauf si 'strict-dynamic' couvre déjà leurs scripts.

5. Diagnostic

Deux symptômes typiques quand le nonce n'atteint pas le widget — dans les deux cas, la console développeur (F12) affiche des violations CSP explicites.

Le bandeau apparaît « nu », sans aucun style

Votre directive style-src bloque les styles injectés par le widget. En console :

Refused to apply inline style because it violates the following
Content Security Policy directive: "style-src 'nonce-…'".

Cause habituelle : la balise du loader n'a pas d'attribut nonce (ou le nonce ne correspond pas à celui du header). Vérifiez que le nonce est bien généré à chaque requête et posé sur la balise.

Le consentement est accepté mais reste sans effet

Le bandeau fonctionne, le choix est enregistré, mais les scripts bloqués (type="text/plain" + data-cc) ne se lancent jamais : votre script-src bloque les copies exécutables que le widget crée au déblocage. En console :

Refused to execute inline script because it violates the following
Content Security Policy directive: "script-src 'nonce-…'".

Même cause, même remède : le widget ne peut propager que le nonce qu'il a reçu via sa balise (attribut nonce ou data-cc-nonce).

6. FAQ