consentement cookies pour Astro

Le consentement cookies pour Astro,
une intégration

@cookiecrumbs/astro insère la balise comme premier élément du head de chaque page, au build pour les pages prérendues et à chaque requête en SSR. Un middleware alimente le lecteur de cookie côté serveur.

Ce qui change dans le head d’une page Astro une fois le runtime en premier : rien de non essentiel ne s’exécute tant que sa catégorie n’est pas accordée.

la règle

Ce que la loi demande à un site Astro

Les îlots Astro hydratent les statistiques dès leur montage. Sans couche de consentement, le premier rendu d’un site de contenu embarque déjà un traceur.

La règle est la même partout dans l’UE et au Royaume-Uni : rien au-delà du strictement nécessaire ne peut être stocké sur l’appareil d’un visiteur ni lu depuis celui-ci avant son accord. C’est l’article 5(3) de la directive ePrivacy, et cet accord doit répondre à la définition du consentement du RGPD : libre, spécifique, éclairé et univoque, avec un refus aussi simple que l’acceptation. Le Royaume-Uni conserve la même règle dans PECR, avec d’étroites exemptions pour les statistiques à faible risque depuis le 5 février 2026. La Californie et les autres lois des États américains fonctionnent à l’inverse : pas d’opt-in, mais un lien d’opt-out et la prise en charge du signal Global Privacy Control.

Trois choses en découlent pour un site. Les scripts d’analyse, de publicité et de réseaux sociaux doivent attendre un choix. Ce choix doit être enregistré de façon à pouvoir être montré plus tard, car l’article 7(1) met la charge de la preuve sur vous. Et retirer son consentement doit être aussi simple que le donner, ce qui suppose un contrôle qui rouvre la bannière sur chaque page. Une bannière qui affiche deux boutons et charge quand même Google Analytics échoue au premier test, et c’est précisément ce manquement que les autorités sanctionnent, des décisions de la CNIL contre Google et SHEIN aux contrôles des autorités néerlandaise et belge.

comment ça marche

Comment fonctionne le consentement dans une app Astro

Les sites Astro sont surtout du HTML statique avec des îlots d’interactivité, et c’est une bonne nouvelle pour le consentement : le runtime peut être écrit dans le HTML au build, en premier dans le head de chaque page, sans rien pour lui faire concurrence. L’intégration fait exactement cela pour les pages prérendues et le répète à chaque requête pour celles rendues côté serveur, si bien qu’un site hybride se comporte partout de la même façon.

Les îlots sont là où se cachent les traceurs. Un GTM chargé par Partytown, un îlot d’analytics côté client, une vidéo YouTube dans un composant client:visible : chacun reçoit une catégorie sur sa balise script ou vérifie l’état du consentement avant de se monter. L’intégration fournit les composants partagés, et le middleware expose le consentement sur Astro.locals pour qu’une page décide côté serveur de rendre un embed ou son placeholder.

Les sites de contenu ont souvent des centaines de pages, et le scan les parcourt dans chaque état de consentement jusqu’au budget de votre offre. Le résultat alimente la déclaration cookies, que vous pouvez monter sur votre page de confidentialité avec CookieDeclaration et qui se met à jour quand le scan suivant trouve du nouveau.

mise en place

Mise en place dans Astro

Cinq étapes. La CLI en fait l’essentiel, et chacune est aussi un clic dans le tableau de bord.

  1. Init depuis le dépôt

    Détecte Astro, relie le site, écrit la config.

    npx cookiecrumbs login
    npx cookiecrumbs init
  2. Ajoutez l’intégration

    Une ligne dans astro.config.mjs. Avec auto: false, vous placez <CookieCrumbs /> vous-même dans votre layout.

    npm i @cookiecrumbs/astro
    
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import cookiecrumbs from '@cookiecrumbs/astro';
    
    export default defineConfig({
      integrations: [cookiecrumbs({ site: 'pk_live_…', env: 'production' })],
    });
  3. Verrouillez ce qui exige le consentement

    Les balises soumises au consentement reçoivent type="text/plain" et une catégorie. Les îlots qui chargent des traceurs peuvent vérifier l’état du consentement avant de se monter.

    <script type="text/plain" data-cc-category="analytics"
            src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>
  4. Lisez-le côté serveur si vous le souhaitez

    Le middleware place le consentement sur locals, si bien qu’une page peut sauter entièrement un embed pour les visiteurs qui ont dit non.

    // src/pages/index.astro
    const { consent } = Astro.locals;
    const showVideo = consent?.isGranted('marketing');
  5. Scanner, classer, publier

    Le scan parcourt le site construit dans chaque état de consentement. Classez une fois, publiez.

    npx cookiecrumbs scan --wait
    npx cookiecrumbs push --env production

attention

Les erreurs que nous voyons dans les apps Astro

Chacune apparaît dans le premier scan comme un traceur déclenché avant le consentement.

  • Charger le runtime via PartytownLe runtime a besoin du thread principal et doit tourner en premier. Partytown est pour les traceurs, pas pour ce qui les verrouille.
  • Un îlot YouTube ou Maps sans placeholderUne iframe pose des cookies au chargement. Retenez-la avec une catégorie et affichez un placeholder jusqu’à l’accord marketing.
  • Des transitions de vue qui relancent les statistiquesUne page vue à chaque transition exige toujours le consentement. Vérifiez isGranted avant d’envoyer.
  • Ne baliser que le layoutLes pages avec leurs propres slots de head contournent le layout. L’intégration couvre chaque page ; les balises placées à la main non.
  • Pas de lien de retraitLes sites statiques l’oublient le plus souvent. Un ManageCookiesLink dans le pied de page suffit.

avant de publier

La checklist de conformité

Huit lignes. Le tableau de bord coche les deux dernières à partir de données réelles.

  • La balise est le premier script du headTout ce qui se trouve au-dessus peut déposer un cookie que le runtime ne peut pas reprendre.
  • Chaque script d’analyse, de publicité ou social attend sa catégorieSoit type="text/plain" avec une catégorie, soit l’hôte figure dans la carte de blocage issue du scan.
  • « Tout refuser » est sur le premier niveauMême taille, même poids que « Tout accepter ». Pas de « X » qui vaut consentement, pas de cases pré-cochées.
  • Les valeurs par défaut de Consent Mode sont sur « denied » avant le chargement de GoogleVérifiez les sept signaux dans Tag Assistant, consentement refusé.
  • Les liens vers les mentions légales et la politique de confidentialité sont renseignésLa publication est refusée tant qu’ils manquent ; le pied de la bannière y renvoie.
  • Un contrôle de retrait est accessible sur chaque pageLe contrôle permanent ou un lien « Gérer les cookies » dans votre pied de page.
  • Le premier scan complet a tourné et chaque fournisseur est classéLe verdict sur l’accueil indique, daté, ce qui s’est déclenché avant le consentement.
  • La vérification d’installation est passéeElle charge votre page comme un visiteur et confirme que la bannière s’est exécutée avant tout traceur.

ce que vous obtenez

Ce que comprend l’offre gratuite

Deux domaines, 100 sous-pages scannées par mois et par domaine, toutes les réglementations, la CLI, les SDK et le serveur MCP.

Un scanner qui lit la page rendue

Chaque page, dans chaque état de consentement, dans un vrai navigateur. Cookies, pixels, iframes et clés de stockage, avec la page et le script qui les ont posés. Rescanné selon un planning.

La déclaration cookies s’écrit d’elle-même à partir du résultat.

Une bannière qui bloque d’abord

Les balises restent inertes tant que leur catégorie n’est pas accordée. « Tout refuser » est aussi visible que « Tout accepter ». Sept mises en page, 25 langues, Consent Mode v2 et la bonne règle par région.

21 ko, un seul fichier, aucune requête tierce de son propre chef.

Une preuve que vous pouvez remettre

Chaque choix est stocké avec un horodatage, la version de la bannière et un hachage des textes affichés, chaîné à l’enregistrement précédent. Les exports sont signés. Hébergé à Francfort.

Article 7(1), dans l’offre gratuite.

vérification gratuite

Vérifiez ce que votre site charge en ce moment

Le HTML de la page d’accueil, confronté à la base de traceurs. Pas de compte, rien n’est stocké. Le scan complet du tableau de bord fait de même pour chaque page, dans un vrai navigateur.

questions

Des réponses claires

Fonctionne-t-il avec les pages prérendues et rendues côté serveur ?
Les deux. L’intégration écrit la balise au build pour les pages statiques et à chaque requête pour le SSR, toujours comme premier élément du head.
Puis-je positionner la balise moi-même ?
Oui. Mettez auto: false et placez le composant CookieCrumbs de @cookiecrumbs/astro/CookieCrumbs.astro dans votre layout.
Fonctionne-t-il avec Partytown ?
Oui, pour les traceurs. Le runtime de consentement lui-même tourne sur le thread principal, en premier, et les valeurs par défaut de Consent Mode existent avant que le worker ne charge GTM.
Comment le scan gère-t-il un gros site de contenu ?
Il parcourt jusqu’au budget mensuel de votre offre, 100 sous-pages par mois et par domaine en Free et 10 000 en Pro, dans chaque état de consentement, et rescanne selon un planning.
Puis-je afficher la liste des cookies sur une page ?
Montez CookieDeclaration sur votre page de confidentialité. Il affiche la liste publique du dernier scan dans la langue du visiteur.
Quels adaptateurs sont pris en charge ?
Tout adaptateur qui produit du HTML : Node, Vercel, Netlify, Cloudflare. L’intégration se greffe sur l’injection de head d’Astro, pas sur l’adaptateur.

étape suivante

Livrer la bannière au prochain déploiement

Ajoutez le site, lancez npx cookiecrumbs init dans votre dépôt Astro, et le journal de consentement commence à enregistrer dans l’UE.