consentement cookies pour SvelteKit

Le consentement cookies pour SvelteKit,
un hook serveur

cookiecrumbsHandle insère la balise comme premier élément du head de chaque réponse HTML et renseigne event.locals.consent pour vos fonctions load.

Ce qui change dans le head d’une page SvelteKit 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 SvelteKit

Une app SvelteKit charge ses traceurs depuis +layout.svelte côté client. Pas d’étape de consentement, pas d’enregistrement.

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 SvelteKit

SvelteKit rend le HTML via hooks.server.ts, et c’est l’endroit le plus propre pour un runtime de consentement : un handle qui transforme chaque réponse HTML et écrit la balise en premier dans le head, quoi que fassent la page ou le layout. Composez-le avec vos autres hooks via sequence() ; placez %cookiecrumbs.head% dans app.html si vous voulez choisir la position exacte vous-même.

Le même hook renseigne event.locals.consent, si bien qu’une fonction load de +page.server.ts peut décider côté serveur d’inclure un embed ou son placeholder. Côté client, des stores de consentement gardent chaque composant synchronisé : $consent pour les catégories, $regime pour la règle applicable, et des actions pour ouvrir, accepter, refuser ou retirer.

Le onMount de SvelteKit est là où les traceurs ont tendance à démarrer. Enveloppez le sous-arbre dans ConsentGate, ou vérifiez le store avant d’initialiser. Tout ce que le scan trouve sur le domaine déployé sans balise est pris en charge par la carte de blocage, si bien qu’un script oublié dans un vieux layout attend quand même.

mise en place

Mise en place dans SvelteKit

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 SvelteKit, relie le site, écrit la config.

    npx cookiecrumbs login
    npx cookiecrumbs init
  2. Ajoutez le hook

    Composez-le avec vos autres hooks via sequence(). Placez %cookiecrumbs.head% dans src/app.html pour choisir la position exacte vous-même.

    npm i @cookiecrumbs/sveltekit
    
    // src/hooks.server.ts
    import { cookiecrumbsHandle } from '@cookiecrumbs/sveltekit/server';
    
    export const handle = cookiecrumbsHandle({ site: 'pk_live_…', env: 'production' });
  3. Verrouillez dans l’arbre

    Les composants Svelte ConsentGate, CookieDeclaration et ManageCookiesLink et les stores de consentement sont fournis avec le paquet.

    <script>
      import { ConsentGate } from '@cookiecrumbs/sveltekit';
    </script>
    
    <ConsentGate category="marketing">
      <MetaPixel />
    </ConsentGate>
  4. Décidez côté serveur quand vous pouvez

    Une fonction load peut lire le consentement et sauter un embed pour les visiteurs qui ont dit non, avant que tout code client ne s’exécute.

    // +page.server.ts
    export const load = ({ locals }) => ({
      showMap: locals.consent?.isGranted('marketing') ?? false,
    });
  5. Scanner, classer, publier

    Scannez, classez une fois par fournisseur, publiez.

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

attention

Les erreurs que nous voyons dans les apps SvelteKit

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

  • Ajouter la balise dans +layout.svelteC’est côté client et après l’hydratation. Le hook l’écrit dans la réponse HTML, en premier.
  • Des pages prérendues sans le hookLe prérendu passe par le même handle, la balise est donc aussi dans le HTML statique. Si vous contournez le hook avec un app.html personnalisé, utilisez le placeholder.
  • Des form actions qui posent des cookies d’analyseLes cookies posés côté serveur sont des cookies. Gardez-les nécessaires ou verrouillez-les.
  • Plusieurs adaptateurs, une seule cléProduction et preview ont des clés différentes. Utilisez la clé preview sur le staging.
  • Pas de voie de retraitManageCookiesLink dans le pied de page tient en deux lignes.

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

Puis-je lire le consentement côté serveur ?
Oui. Le hook renseigne event.locals.consent à partir du cookie de consentement, si bien qu’une fonction load peut décider quoi rendre avant que le client ne s’exécute.
Fonctionne-t-il avec les adaptateurs Vercel, Netlify et Node ?
Le hook tourne dans le traitement des requêtes de SvelteKit, il fonctionne donc avec tout adaptateur qui sert des réponses HTML, et avec le prérendu.
Quels composants et stores sont inclus ?
ConsentGate, CookieDeclaration et ManageCookiesLink, plus des stores pour l’état du consentement, le régime et les actions.
Et Google Tag Manager ?
Gardez-le. Le runtime fixe d’abord les valeurs par défaut de Consent Mode v2 et le modèle GTM ajoute les déclencheurs ; ou donnez une catégorie à la balise GTM.
Cela affecte-t-il les performances ?
Le runtime pèse 21 ko gzippé, asynchrone, sans requête tierce de son propre chef, et les mises en page barre et ruban réservent l’espace avant le rendu.
Puis-je positionner la balise moi-même ?
Oui. Placez %cookiecrumbs.head% dans src/app.html et le hook le remplit là plutôt qu’en haut du head.

étape suivante

Livrer la bannière au prochain déploiement

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