Klaro: Tuto Complet pour une Conformité RGPD à 100%

Audit & Conformité

Pourquoi choisir Klaro, le CMP open source, face aux géants du marché ?

Le choix d'une plateforme de gestion du consentement (CMP) est une décision stratégique, au carrefour de la confiance utilisateur et de la conformité légale. Si les solutions propriétaires dominent le marché, une analyse technique révèle les avantages décisifs d'une alternative open source comme Klaro. Il ne s'agit pas seulement d'une question de coût, mais de contrôle, de sécurité et de souveraineté sur vos données.

Transparence vs. Boîte Noire : Reprenez le contrôle de vos données

Les CMP propriétaires fonctionnent souvent comme des boîtes noires. Leurs mécanismes de collecte et de traitement du consentement sont opaques, protégés par le secret commercial. En leur déléguant votre conformité, vous perdez la capacité de vérifier leurs opérations. Klaro, par sa nature open source, brise ce modèle d'opacité. Chaque ligne de code est publiquement accessible, vous offrant une visibilité totale sur le flux des données de consentement. Vous savez précisément quelles informations sont collectées, comment elles sont stockées et comment les scripts tiers sont conditionnés. Ce niveau de transparence est une condition essentielle pour reprendre le contrôle de votre conformité.

Auditabilité du code : La garantie ultime de conformité

La conformité au RGPD et à la directive ePrivacy exige des preuves, pas seulement des promesses marketing. Avec une solution propriétaire, vous devez faire confiance à l'éditeur et à ses audits, dont le périmètre peut être limité. Avec Klaro, vous pouvez vérifier par vous-même. Le code source disponible permet à vos équipes techniques, à votre Délégué à la Protection des Données (DPO) ou à des experts externes d'auditer en profondeur le fonctionnement de la plateforme. Cette auditabilité est la garantie ultime que la CMP respecte scrupuleusement les régulations : stockage sécurisé des preuves de consentement, gestion correcte du refus et blocage effectif des traceurs avant l'obtention d'un consentement explicite.

Un modèle économique sain : Échappez au "vendor lock-in"

Le modèle de nombreux acteurs du marché repose sur la création d'une dépendance technique et contractuelle, un phénomène connu sous le nom de "vendor lock-in" (enfermement propriétaire). Une fois leur solution intégrée, migrer devient complexe et coûteux. Klaro, en tant que projet open source, vous affranchit de cette contrainte. Vous êtes libre de l'héberger sur votre infrastructure, de le modifier pour vos besoins spécifiques et de décider de votre stratégie de maintenance sans être lié à un fournisseur unique. Cette liberté garantit que votre infrastructure de conformité évolue avec vos besoins, et non au gré des stratégies commerciales d'un tiers.

Convaincu par les avantages de l'open source ? Passons à la pratique avec un guide d'installation complet pour maîtriser l'outil de A à Z.

Tutoriel : Installation de A à Z de Klaro sur un serveur web

L'intégration d'une CMP comme Klaro est une étape technique fondamentale pour la conformité RGPD. Ce tutoriel vous guide pas à pas pour une installation propre et fonctionnelle, quelle que soit votre infrastructure. Nous allons décortiquer le processus pour une maîtrise totale de l'outil.

Prérequis techniques (serveur Apache/Nginx)

Klaro est une bibliothèque JavaScript qui s'exécute exclusivement côté client (client-side), dans le navigateur de l'utilisateur. Il n'impose donc aucune contrainte sur votre technologie serveur. Que vous utilisiez Apache, Nginx, ou un service d'hébergement statique (Netlify, Vercel), tant que votre serveur peut distribuer des fichiers HTML, CSS et JavaScript, il est compatible. Aucune configuration serveur avancée n'est requise pour le fonctionnement de base.

Étape 1 : Récupérer les fichiers Klaro (CDN ou auto-hébergement)

Deux approches s'offrent à vous pour obtenir les fichiers de Klaro :

• Via un CDN (Content Delivery Network) : La méthode la plus simple et la plus performante. Elle consiste à lier le script hébergé sur un réseau de serveurs optimisés, garantissant des temps de chargement rapides.
• Auto-hébergement (Self-hosting) : Pour un contrôle total, vous pouvez télécharger les fichiers depuis le dépôt GitHub de Klaro et les héberger sur votre propre serveur. Cette option est recommandée pour personnaliser le code ou si votre politique de sécurité restreint l'usage de ressources externes.

Pour ce tutoriel, nous utiliserons la méthode CDN pour sa simplicité.

Étape 2 : Intégrer le script Klaro dans votre code HTML

Il est impératif de placer la balise <script> de Klaro dans l'en-tête <head> de votre document HTML, avant tout autre script susceptible de déposer des cookies. Cela permet à Klaro de bloquer les scripts non autorisés avant leur exécution.

<!-- À placer dans la section <head> -->
<script
  defer
  type="text/javascript"
  src="https://cdn.kiprotect.com/klaro/v0.7/klaro.js"
></script>

L'attribut defer assure que le script s'exécute après l'analyse du HTML, sans bloquer le rendu de la page.

Étape 3 : Créer et lier votre fichier de configuration `config.js`

Klaro a besoin d'instructions fournies via un objet de configuration JavaScript. La meilleure pratique est de définir cette configuration dans un fichier séparé, par exemple config.js. Créez ce fichier et liez-le dans votre HTML, impérativement après le script principal de Klaro.

<!-- À placer dans <head>, APRÈS le script principal de Klaro -->
<script
  defer
  type="text/javascript"
  src="/config.js"
></script>

Ce fichier config.js contiendra la variable globale klaroConfig qui définit les services, les textes et le comportement de votre bannière. La section suivante détaille sa structure.

Le `config.js` ultime : Notre modèle commenté pour une conformité parfaite

Le fichier de configuration de Klaro est l'arbitre technique de votre conformité RGPD. Il dicte quels services peuvent s'exécuter et à quel moment. Une configuration maîtrisée est la clé. Voici une architecture de référence pour ce fichier, avec des exemples concrets.

Structure d'un fichier `klaroConfig` complet et commenté

L'objectif est de centraliser la déclaration de tous les services tiers via la variable globale klaroConfig. Chaque service est un objet dans le tableau apps qui contient son nom, sa finalité (purpose), les cookies qu'il dépose, et une fonction callback qui gère son initialisation. Cette dernière ne se déclenche qu'après l'obtention du consentement de l'utilisateur. Le modèle ci-dessous est une base à adapter à votre écosystème de services.

Cas d'usage 1 : Google Analytics (GA4)

Pour Google Analytics 4 (GA4), il est crucial de déclarer l'identifiant de mesure et de conditionner son initialisation au consentement via la fonction callback.

// Dans votre fichier config.js
var klaroConfig = {
    // ... autres paramètres de configuration (elementID, storageMethod, etc.)
    apps: [
        {
            name: 'googleAnalytics',
            title: 'Google Analytics (GA4)',
            purposes: ['analytics'], // Doit correspondre à une finalité définie
            cookies: [/_ga.*/, /_gid/, /_gat/],
            required: false,
            optOut: false,
            onlyOnce: true,
            callback: function(consent, app) {
                // Ce code ne s'exécute qu'après le consentement
                if (consent) {
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    // Remplacez 'G-XXXXXXXXXX' par votre ID de mesure GA4
                    gtag('config', 'G-XXXXXXXXXX');
                }
            },
        },
        // ... autres applications
    ],
};

Cas d'usage 2 : Matomo (Cloud & On-premise)

Pour Matomo, la configuration du consentement est similaire, que vous utilisiez la version Cloud ou auto-hébergée. Le callback charge le script et initialise le suivi uniquement après l'accord de l'utilisateur.

// Dans le tableau 'apps' de votre klaroConfig
{
    name: 'matomo',
    title: 'Matomo',
    purposes: ['analytics'],
    cookies: [/_pk_ref/, /_pk_cvar/, /_pk_id/, /_pk_ses/],
    required: false,
    callback: function(consent, app) {
        if (consent) {
            var _paq = window._paq = window._paq || [];
            // Remplacez par vos informations Matomo
            _paq.push(['setTrackerUrl', 'https://VOTRE_URL_MATOMO/matomo.php']);
            _paq.push(['setSiteId', 'VOTRE_ID_SITE']);
            _paq.push(['trackPageView']);
            _paq.push(['enableLinkTracking']);
            var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
            g.async=true; g.src='https://VOTRE_URL_MATOMO/matomo.js'; s.parentNode.insertBefore(g,s);
        }
    },
}

Cas d'usage 3 : Pixel Facebook / Meta

Le Pixel Meta est un outil marketing intrusif dont la configuration exige une rigueur absolue. Le service doit être classé dans la finalité "advertising" (publicité) et son exécution strictement conditionnée au consentement.

// Dans le tableau 'apps' de votre klaroConfig
{
    name: 'facebook',
    title: 'Meta (Facebook) Pixel',
    purposes: ['advertising'],
    cookies: [/fbp/, /fr/],
    required: false,
    callback: function(consent, app) {
        if (consent) {
            var n = window.fbq = function() {
                n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
            };
            if (!window._fbq) window._fbq = n;
            n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = [];
            
            var script = document.createElement('script');
            script.async = true;
            script.src = 'https://connect.facebook.net/en_US/fbevents.js';
            document.head.appendChild(script);

            // Remplacez par votre ID de Pixel
            fbq('init', 'VOTRE_PIXEL_ID');
            fbq('track', 'PageView');
        }
    },
}

Mapper la technique au légal : Comment chaque option de Klaro vous protège

La configuration d'une CMP comme Klaro n'est pas un simple exercice technique. Chaque paramètre est une traduction directe d'une exigence légale. Voyons comment des options spécifiques de Klaro constituent des mécanismes de conformité au RGPD.

storageMethod & storageName: La preuve du consentement (Art. 7 RGPD)

L'Article 7(1) du RGPD stipule que le responsable du traitement doit être "en mesure de démontrer que la personne concernée a donné son consentement". Klaro matérialise cette preuve via les paramètres storageMethod (ex: 'cookie', 'localStorage') et storageName (ex: 'klaro'). Cette configuration crée un enregistrement technique dans le navigateur de l'utilisateur, contenant ses choix et un horodatage. C'est la matérialisation de la charge de la preuve qui vous incombe.

apps & purposes: Granularité et finalité (Art. 5 & 7 RGPD)

Le RGPD impose la limitation des finalités (Art. 5) et le consentement granulaire (Art. 7). La structure de Klaro est calquée sur ces exigences. Le tableau purposes vous oblige à définir chaque finalité (ex: 'analytics', 'advertising'). Ensuite, le tableau apps vous contraint à lier chaque service à une ou plusieurs de ces finalités. Cette architecture empêche le "consentement groupé" et génère une interface où l'utilisateur peut faire des choix granulaires, libres et éclairés.

callback: Le 'consentement préalable' en action

La doctrine du "consentement préalable" (prior consent), exigée par la CNIL, stipule qu'aucun cookie non essentiel ne doit être déposé avant d'obtenir un consentement valide. Le paramètre callback est l'arme technique de Klaro pour appliquer cette règle. Le code JavaScript placé dans cette fonction (ex: l'initialisation d'un tag de suivi) ne sera exécuté qu'après que Klaro ait vérifié le consentement de l'utilisateur. Le callback agit comme un garde-fou programmatique qui transforme une exigence légale en une condition logique dans votre code.

mustConsent & required: Gérer les cookies essentiels vs. optionnels

La distinction entre traceurs strictement nécessaires et les autres est cruciale. Klaro vous force à prendre position via les booléens required et mustConsent. En définissant required: true, vous déclarez une application comme indispensable au fonctionnement du service (ex: cookie de panier d'achat). L'utilisateur est informé mais ne peut la désactiver. À l'inverse, mustConsent: true (par défaut) signifie que le service est optionnel et requiert un opt-in. En vous obligeant à déclarer le statut de chaque service, Klaro crée une piste d'audit claire de vos décisions.

Comment Klaro assure la preuve du recueil de consentement (exigence CNIL)

Le RGPD, interprété par la CNIL, impose de pouvoir prouver qu'un consentement a été obtenu. Une simple case cochée ne suffit pas. Klaro intègre un mécanisme robuste pour constituer cette preuve, essentielle en cas de contrôle.

Anatomie du cookie de consentement Klaro

La preuve réside sur le terminal de l'utilisateur, dans un cookie ou le localStorage (nommé par défaut klaro). Il s'agit d'un objet JSON qui encapsule le contexte du consentement :

• Version de la configuration : Un hash identifiant la version de la notice de consentement présentée à l'utilisateur.
• Choix granulaires : Un objet détaillant le statut (accepté/refusé) pour chaque service (ex: {"googleAnalytics": true, "facebook": false}).
• Horodatage (timestamp) : L'enregistrement du moment où le consentement a été sauvegardé.

Cette structure transforme un simple enregistrement local en une pièce à conviction technique, consultable dans le navigateur.

Comment extraire et interpréter la preuve ?

En cas de contrôle, il suffit de demander à l'utilisateur d'accéder aux outils de développement de son navigateur (F12), d'aller dans l'onglet "Application" (ou "Stockage"), et de localiser l'entrée klaro. La valeur de cette entrée est l'objet JSON en clair, qui constitue la preuve lisible et irréfutable des choix de l'utilisateur.

Automatiser la journalisation des consentements

Pour des exigences de conformité extrêmes, Klaro permet d'implémenter une journalisation côté serveur. Grâce aux événements JavaScript émis par la librairie, il est possible de capturer l'objet de consentement et de le transmettre via une API à un système de logs centralisé ("consent log"). Cela constitue un journal d'audit immuable, indépendant du terminal de l'utilisateur.

Configuration technique pour éviter les sanctions

Une bannière de consentement doit bloquer et débloquer techniquement les traceurs. Une implémentation défaillante, même avec une belle interface, expose à des sanctions. L'audit technique est une nécessité.

Le piège des 'faux positifs' : Assurer un blocage effectif

L'erreur la plus critique est quand la CMP indique un blocage, mais que les scripts de suivi s'exécutent quand même. Il est impératif de vérifier activement que zéro cookie ou appel de tracking non essentiel n'est initié avant l'obtention d'un consentement explicite. Les causes fréquentes sont des scripts intégrés en dur ou une mauvaise configuration de Google Tag Manager (GTM).

Gérer les iframes et contenus embarqués (YouTube, Google Maps)

Les iframes (vidéos YouTube, cartes Google Maps) déposent souvent des cookies sans consentement. Utilisez les modes de confidentialité renforcée (ex: l'URL youtube-nocookie.com) ou implémentez un mécanisme de "double-clic" : la page affiche une image de l'aperçu, et l'iframe n'est chargée qu'après un premier clic de l'utilisateur (et si le consentement a été donné).

Tester sa configuration avec les outils du navigateur

Les outils de développement (F12) sont vos meilleurs alliés pour auditer votre configuration :

1. Ouvrez les outils de développement sur les onglets "Réseau" (Network) et "Application" > "Cookies".
2. Simulez une première visite : Videz le cache et tous les cookies du site.
3. Rechargez la page. Avant toute interaction avec la bannière, analysez les requêtes réseau et les cookies. Aucun script ou cookie de tracking (ex: _ga, _fbp) ne doit apparaître.
4. Cliquez sur "Tout refuser". Vérifiez qu'aucun nouveau script de tracking ne se charge.
5. Répétez le processus, mais cliquez sur "Tout accepter". Vous devez maintenant voir les requêtes vers vos services tiers s'exécuter et les cookies correspondants être créés.

Cette investigation technique est la seule preuve tangible que votre configuration respecte le choix de l'utilisateur.

Foire Aux Questions (FAQ)

Klaro est-il vraiment 100% gratuit et sans limitation ?

Oui, la version open source de Klaro est entièrement gratuite, sans limitation de trafic ou de fonctionnalités. C'est un projet communautaire que vous pouvez utiliser, modifier et héberger vous-même sans frais de licence. Des offres commerciales existent pour des services additionnels comme le support ou l'hébergement.

Comment mettre à jour Klaro sans écraser ma configuration ?

Votre configuration personnalisée se trouve dans votre propre fichier config.js. La mise à jour de Klaro consiste simplement à changer la source du script principal, par exemple en pointant vers une nouvelle version sur le CDN. Votre fichier de configuration reste intact et n'est pas affecté.

Est-ce que Klaro fonctionne avec WordPress ou d'autres CMS ?

Absolument. Klaro est une bibliothèque JavaScript "agnostique". Elle fonctionne avec n'importe quel système capable de générer du HTML (WordPress, Drupal, PrestaShop, etc.). L'intégration se fait en modifiant le thème de votre site pour ajouter les balises <script> dans l'en-tête.

Klaro peut-il bloquer automatiquement tous les cookies sans configuration manuelle ?

Non, et c'est un point crucial. Aucune CMP ne peut bloquer "magiquement" tous les traceurs. Klaro fournit le cadre pour le blocage, mais c'est au développeur de l'implémenter. Vous devez identifier tous les scripts tiers, les retirer de leur chargement direct, et les placer à l'intérieur des fonctions callback dans votre config.js. C'est cette action qui garantit un blocage effectif.

Quelle est la différence entre Klaro et Tarteaucitron ?

Les deux sont d'excellentes solutions open source. Tarteaucitron propose une approche "tout-en-un" avec un grand catalogue de services pré-configurés, très pratique pour une mise en place rapide. Klaro est plus léger et modulaire ; il vous donne les outils pour configurer précisément vos propres services, offrant plus de flexibilité pour des besoins spécifiques. Le choix dépend de votre préférence entre une solution "clés en main" et un framework "à la carte".

Mon site est multilingue, comment gérer les traductions dans Klaro ?

Klaro est conçu pour le multilingue. Dans votre klaroConfig, vous pouvez ajouter une clé translations. À l'intérieur, vous définissez des objets pour chaque code de langue (fr, en, etc.) qui contiennent la traduction de tous les éléments de l'interface. Klaro détectera la langue du navigateur ou de votre balise <html> et affichera la traduction correspondante.

Comment prouver à la CNIL que j'ai bien recueilli le consentement avec Klaro ?

La preuve est stockée sur le terminal de l'utilisateur (cookie ou Local Storage). Cet enregistrement est un objet JSON détaillé incluant les choix granulaires, un hash de la configuration présentée, et un horodatage. En cas de contrôle, cet objet peut être facilement extrait des outils de développement du navigateur et présenté comme une preuve technique, comme détaillé dans cet article.