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 et soumet le consentement. L'origine du module doit figurer dans connect-src car le SRI implique une récupération CORS (crossorigin).
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. La conception répond directement au problème signalé par le fondateur sur la solution concurrente Byscuit.

#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éployements à sécurité renforcée qui épinglent une version exacte, utilisez l'URL versionnée et vérifiez le hachage publié dans notre manifeste de versions :

<script async
  src="https://cdn.agreely.ca/e/v1.2.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 épingle le SRI sha384 exact du module correspondant à la compilation. Le manifeste de chaque version est publié sur https://cdn.agreely.ca/e/v1.2.3/manifest.json.

#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).