Comment développer une fenêtre de cookies respectant le RGPD

Pour le développement de simulateur interactif en ligne d’un client, j’ai du mettre en place une fenêtre de confirmation des cookies (vous savez, ce truc qui vous empêche de lire une page web dès que vous êtes sur mobile, voire sur ordinateur de bureau). Ne voulant pas utiliser des outils existants, je me suis penché sur la problématique pour respecter le RGPD tout en ayant une grande flexibilité dans la personnalisation de celle-ci; si tant est qu’on s’y connaisse un petit en code.

Pour développer sa propre fenêtre de consentement, il faut d’abord s’intéresser aux types de consentements qui seront nécessaires et les règles à respecter. Ensuite, se pose la question de comment récupérer les consentements tout en étant le moins intrusif possible. Enfin, la solution technique qui permettra de récupérer le consentement tout en respectant les règles devra être mise en oeuvre.

La règle en matière de RGPD

Pour respecter le RGPD, votre site ou application web doit être très clair sur la légitimité d’utiliser les données personnelles des visiteurs et/ou utilisateurs. Cette explication doit être donnée avant d’activer et d’utiliser ces outils sur votre plateforme. L’utilisateur doit donner son consentement avant de rendre actif une quelconque fonctionnalité qui ne serait pas purement essentielle au bon fonctionnement de votre site ou application.

Le défi des travailleurs du web face à cette exigence du RGPD relative aux cookies est de savoir quels sont les cookies et traceurs actifs mais aussi pourquoi ils sont présents.

D’où viennent les cookies, quel est le fournisseur ? Quelles sont les données traitées et s’agit-il de données à caractère personnel ?
Dans ce cas, un consentement préalable doit être obtenu avant d’activer ces cookies et de commencer à collecter des données ?

L’objectif, le pourquoi, de la collecte de données par le cookie doit être clairement connu et indiqué. Si il s’agit de données personnelles (la donnée personnelle peut commencer par une information aussi basique que l’adresse IP), la légitimité de cette collecte doit être clairement précisée pour que le consentement soit considéré comme valide.

Par ailleurs, un consentement ne peut pas être obtenu pour une durée de plus de 12 mois au delà desquels la question doit être à nouveau posée à l’utilisateur.

Une interface aussi peu intrusive que possible

Conception de l'interface utilisateur :

La première étape est de concevoir une interface utilisateur claire et informative. L’information doit être bien visible, mais discrète, pour informer les utilisateurs de l'utilisation des cookies et de leurs droits. Dans l’ensemble de mes créations, je privilégie une conception minimaliste.

Ce développement ne dérogera pas à cette habitude !

Dans ce cas, l’information doit être claire et une brève description de chaque cookie utilisé doit également être visible. Cette popup pourra être la porte d’entrée, via un lien, vers une politique de confidentialité plus détaillée.

Options de consentement :

Le respect du RGPD impose d’inclure des options de consentement granulaires. C’est à dire que plutôt que d'opter pour une seule case à cocher « Accepter tous les cookies », des choix plus spécifiques doivent être proposés. Cela permet aux utilisateurs de décider quels types de cookies ils acceptent ou refusent.

Ce choix n’est pas gravé dans le marbre mais je propose de distinguer les cookies des catégories suivantes : essentiels (techniques), analyses, publicitaires et optionnels.

Facilité d'utilisation :

Pour être efficace, la popup doit être facile à utiliser. Beaucoup d’utilisateurs préfèrent souvent ne pas devoir perdre de temps à cocher individuellement toutes les cases.

Même si il ne doit pas être unique, un bouton du type « Accepter tous les cookies » facilitera une expérience sans tracas.

Par ailleurs, les choix pourront être personnalisés après coup, en passant par un bouton permettant d’afficher la popup à tout moment.

Admirez ce délicieux cookie que je vous propose d’utiliser en guise de lien

Techniquement, comment ça fonctionne ?

Il y a de nombreuses façons de mettre en place un tel système. Ma façon de faire convient à tout développeur disposant des bases mais ne sera pas adapté si vous êtes administrateur d’un site Wordpress, par exemple, pour lequel de nombreux plugins existent.

Le défi : un chargement post consentement des modules

L’installation d’un cookie tiers s’accompagne systématiquement d’un script que le prestataire (Google Analytics, Bing Webmaster Tools, etc. ) fournit au Webmaster. Dès que le script - code html - est installé, il est fonctionnel. Ceci signifie que des cookies sont installés sur l’appareil de l’utilisateur.

S’agissant de votre site (ou application), c’est à vous d’obtenir le consentement requis par le RGPD.

Le script de l’outil à installer doit donc être ajouté après le clic confirmant le consentement de la part de l’utilisateur.

Installation programmatique des modules

De manière générale, j’ai identifié deux informations essentielle à l’installation de ces scripts :

• le script en lui-même, généralement entre balises <script>
• la position du script, avant ou après une balise <head>, <body>, </body>, etc.)

Lorsque l’utilisateur validera son choix, et seulement si la fonctionnalité est autorisée, le script sera ajouté au bon endroit, de manière programmatique.

Lorsqu’il n’y a qu’un ou deux scripts, cette action est encore possible sans trop d’encombre. La difficulté repose sur le fait que très rapidement, un site contient une bonne dizaine de ces modules externes.

Recensement des scripts

Pour rendre ce recensement le plus fluide possible, j’ai décidé d’utiliser un fichier JSON (tools.json) qui recense tous les scripts, catégorisés en fonction de leur type, et de leur position dans la page.

{
  "technical" : [{
    "name": "RQ",
    "position": "ht",
    "script": "<script>console.log('required tag')</script>"
  }],
  "third-party": [{
    "name": "TP",
    "position": "ht",
    "script": "<script>console.log('third-party tag')</script>"
  }],
  "ads": [
    {
      "name": "AD1",
      "position": "ht",
      "script": "<script>console.log('ad tag')</script>"
    },
    {
      "name": "AD2",
      "position": "ht",
      "script": "<script>console.log('ad tag')</script>"
    }
  ],
  "optional": [{
    "name": "OPT",
    "position": "ht",
    "script": "<script>console.log('opt tag')</script>"
  }]
}

Cette approche permet aux développeurs d’avoir une parfaite visibilité sur les scripts externes ajoutés.

Et elle permet d’offrir une parfaite cohérence avec l’information partagée aux utilisateurs.

Validation du consentement

Vous l’aurez compris, ce fichier de recensement permet de lister les demandes de consentement à adresser aux internautes mais aussi d’activer les scripts eux-même, après autorisation.

Lorsque la popup s’affiche, un premier cookie (fonctionnel et ne nécessitant donc aucune permission) va lister les type de cookies autorisés. En cochant les cases proposées, ce cookie fonctionnel est mis à jour.

document.cookie = 'consent=' + consent;

Ainsi à chaque visite, la popup pré-remplira avec les mêmes choix.

Pour autant, à cette étape, aucun consentement n’est encore donné concrètement. Ce n’est qu’après avoir cliqué sur le bouton de validation du consentement qu’un autre cookie fonctionnel est installé. C’est celui qui permet de déterminer à quel moment le consentement a été adressé.

document.cookie = 'consentConfirmed=' + Date.now();

Cette ligne de code permet de créer un cookie nommé « consentConfirmed » ayant pour valeur Date.now() . La fonction Date.now() fournit l’instant précis sous forme d’un entier.

Pour être précis, il s’agit du nombre de millisecondes écoulées depuis le 1er Janvier 1970 (UTC).

Ainsi, nous pourrons évaluer à chaque visite quand le consentement a été donné par l’utilisateur. Le RGPD impose d’obtenir à nouveau un consentement obtenu plus de 12 mois plus tôt. Cette information nous sera donc utile.

Pour autant, un cookie peut être associé à une durée de validité. Pour un code plus propre, nous créons une fonction setCookie acceptant comme paramètres un nom de cookie, sa valeur et le nombre de jours avant sa péremption.

function setCookie(cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    let expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

L'appel de la fonction setCookie qui permet de remplacer les lignes évoquées plus haut est aussi simple que, pour le cookie consentConfirmed :

setCookie('consentConfirmed', Date.now(),365);

Une fois ce consentement obtenu, la fenêtre sera masquée et chaque script sera individuellement ajouté, automatiquement, de manière programmatique. Bien sûr la fenêtre pourra être affichée sur demande pour modifier les choix de l’utilisateur.

Nous y sommes ! Nous avons relevé le défi, non négligeable, de proposer une fenêtre RGPD qui ne soit pas trop envahissante, et qui soit facile à maintenir, pour laquelle chacun des aspects juridiques, techniques et ergonomiques est maîtrisé

Le code source de ce projet est accessible via ce dépôt GitHub