CSP et CORS

C'est l'avantage développeur qui a motivé la conception d'Agreely : vous pouvez utiliser une politique CSP stricte sans ajouter unsafe-inline.

#Ajouts CSP minimaux

Ajoutez ces trois directives à votre politique existante :

script-src  https://cdn.agreely.ca ;
connect-src https://cdn.agreely.ca ;
img-src     https://cdn.agreely.ca ;

C'est tout. Aucune autre origine. Aucun joker. Aucun unsafe-inline, ni pour les scripts ni pour les styles.

Directive	Pourquoi
script-src https://cdn.agreely.ca	Le chargeur et le module de la bannière proviennent de cette origine.
connect-src https://cdn.agreely.ca	La bannière récupère la configuration (fetch) et soumet le consentement (sendBeacon, ou fetch à défaut) : ces requêtes relèvent de connect-src. Le module lui-même, chargé avec SRI en mode CORS (crossorigin), relève de script-src.
img-src https://cdn.agreely.ca	Le logo de votre entreprise (optionnel) est servi par le même domaine.

#Pourquoi aucun unsafe-inline n'est nécessaire

Les styles de la bannière sont appliqués à la racine fantôme (Shadow DOM) via une CSSStyleSheet constructible (replaceSync + adoptedStyleSheets). Il n'y a aucun élément <style> inline, aucun attribut style inline et aucun eval. Un navigateur conforme qui prend en charge le Shadow DOM v1 et les feuilles de style constructibles n'a pas besoin que vous assoupliez votre style-src.

#Nonce

Si votre script-src est à base de nonce plutôt qu'à base d'hôte, passez votre nonce via data-nonce sur le tag du chargeur (voir Installation). Le chargeur le transmet au script du module injecté automatiquement.

#SRI sur les versions épinglées

Pour les déploiements à sécurité renforcée qui épinglent une version exacte, utilisez l'URL versionnée (une version épinglée ne reçoit aucune correction ultérieure) :

<script
  src="https://cdn.agreely.ca/e/v1.5.3/loader.js"
  data-agreely="agr_pub_VOTRE_CLE"></script>

Les URL versionnées sont immuables (Cache-Control: immutable, max-age=31536000) et le chargeur inscrit en dur le SRI sha384 exact du module correspondant à la compilation, de sorte que l'intégrité est épinglée sans attribut supplémentaire sur votre tag.

#Pas de configuration CORS nécessaire

Le point de terminaison public /e/v1/config/{clé} répond avec Access-Control-Allow-Origin: * (configuration publique, aucun renseignement personnel). Le point de terminaison de soumission du consentement (POST /e/v1/consent) utilise un corps text/plain sans en-tête personnalisé, ce qui en fait une requête CORS simple : aucun preflight OPTIONS n'est émis et aucune configuration CORS côté serveur n'est nécessaire de votre côté.

En résumé : vous ajoutez trois lignes à votre CSP, vous ne configurez rien côté serveur.

#Exemple de politique complète

Content-Security-Policy:
  default-src 'self';
  script-src  'self' 'nonce-abc123' https://cdn.agreely.ca https://www.googletagmanager.com;
  connect-src 'self' https://cdn.agreely.ca https://www.google-analytics.com;
  img-src     'self' data: https://cdn.agreely.ca;
  style-src   'self' 'nonce-abc123';
  frame-src   https://www.youtube.com;

Conseil : si vous intégrez aussi Google Tag Manager, ajoutez https://www.googletagmanager.com à script-src et placez le tag Agreely avant le tag GTM (voir Consent Mode v2).