X
#
}
o
>
.
!
]

NOUS LES DEVS

GDPR

La gestion des cookies

Niveau : intermédiaire
</> </> </>

Objectif

Dans cet article je vais t’expliquer comment rendre ton site « compliance » (valide GDPR) au niveau des cookies, il y aura un peu de blabla puis un cas concret.

Quésako

Alors le GDPR c’est quoi ? C’est une nouvelle technologie HTML6 destinée à afficher plein de popup sur ton site pour que l’utilisateur le quitte aussi vite que possible ! C’est une blague bien sûr…

GDPR est un acronyme qui fait référence à un règlement destiné à protéger les données des utilisateurs pour les individus de l’Union européenne.

Cookies et tracking

Bon j’imagine que tu sais très bien ce qu’est un cookie et comment ils sont enregistrés, mais est-ce que tu sais qu’un cookie permet à des services comme Google Analytics de te tracker au fur et à mesure de tes visites sur certains sites ?

Le cas le plus flagrant, c’est les publicités. Tu consultes un ou plusieurs sites internet d’agences de voyage car tu as envie de visiter la Corse par exemple. Plusieurs heures après, tu vas sur un site d’actualité et là je ne sais pas si tu as déjà remarqué, mais bizarrement les bandeaux publicitaires te proposent des offres vers la Corse ou d’autres destinations de voyages. Et bien ça, c’est ce qu’on appelle le tracking…

Comment ça marche ?

Prenons l’écosystème Google comme référence.

Via Google Analytics, certains sites permettent au propriétaire d’obtenir de précieuses données comme le nombre de visiteurs par jour.

En contre partie et involontairement, le visiteur, lui, au travers du script Analytics, va envoyer plein de données à Google et va obtenir un joli cookie qui va permette de l’identifier par rapport à ces données de site en site.

A ce stade, Google ne sait pas vraiment qui vous êtes, mais avec suffisamment de données, il est capable de déterminer votre tranche d’âge et savoir ce que vous aimez dans la vie par exemple.

Ensuite sur un autre site, quelqu’un a placé des annonces publicitaires pour avoir de la rémunération grâce au nombre de visites. Et bien ces bandeaux sont directement liés aux données de GA (Google Analytics) et permettent aux annonceurs de faire de la publicité ciblée en fonction des données de votre profil, comme l’âge, vos recherches précédentes ou n’importe quoi d’autre.

HTML

Entrons dans le vif du sujet. J’ai créé une page HTML d’exemple avec un Google Analytics valide afin de se mettre en condition réelle.

<!doctype html>
<html class="no-js" lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
	<title>Article GDPR</title>
	
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121326158-1"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	
	  gtag('config', 'UA-121326158-1');
	</script>

</head>
<body>
	<h1>GDPR</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis augue, mollis ut vestibulum quis, scelerisque sit amet nunc. Nullam a congue nisi. Proin tellus ipsum, placerat a euismod vel, venenatis eu lorem. Donec tristique, sapien eget dictum accumsan, nibh massa volutpat sem, ut interdum erat purus ac nisi.</p>
	<a href="/gdpr">Lire plus</a>
</body>
</html>

Analyser son site internet

J’affiche le site internet dans mon navigateur (Firefox), je fais un clic droit dans la page et je choisis l’option « Examiner l’élément » pour ouvrir l’inspecteur.

Pour voir les cookies qui ont été posés sur ma machine, je vais dans la section Stockage.

capture_gdpr_cookie_analytics

Dans la section Cookies, je peux voir que plusieurs cookies ont été posés dont deux de Google Analytics, _ga et _gid qu’il va falloir traiter.

Bannière de consentement

Pour accélérer la mise en conformité, on va utiliser un service externe, Cookiebot, qui va nous offrir plusieurs outils. Le premier étant tout le display, c’est-à-dire le système de popup avec les checkbox qui vont permettrent à l’utilisateur soit d’autoriser, soit de refuser l’enregistrement de cookies. Le second est une bibliothèque JavaScript qui va analyser les scripts tiers (ceux qui posent les cookies comme GA) et va appliquer des filtres en fonction des choix de l’utilisateur.

Une fois mon compte créé, j’ajoute simplement dans l’interface l’URL de mon site de test en appuyant sur le petit « + » et j’enregistre.

capture_gdpr_cookiebot

Dans la partie « Vos scripts » je peux récupérer le code de la bannière de consentement et je l’ajoute directement après la balise d’ouverture de mon site.

P.S. Il s’agit également de la bibliothèque qui va permettre de scanner les différents scripts (voir plus bas).

<head>
	<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="903dc989-fb59-4f21-b71e-12ea99d2d3e6" type="text/javascript" async></script>
	
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
	<title>Article GDPR</title>
	
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121326158-1"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	
	  gtag('config', 'UA-121326158-1');
	</script>

</head>

Si je rafraîchis mon site web, voici ce que je peux voir.

capture_gdpr_banniere

Script

Maintenant il va falloir traiter le fameux script de Google Analytics. Pour ce faire, nous allons ajouter le type text/plain (en gros ça va désactiver le JavaScript) ainsi que l’attribut data-cookieconsent à la valeur statistics (il y a principalement trois catégories de classement de cookies).

<!-- Global site tag (gtag.js) - Google Analytics -->
<script type="text/plain" data-cookieconsent="statistics" async src="https://www.googletagmanager.com/gtag/js?id=UA-121326158-1"></script>
<script type="text/plain" data-cookieconsent="statistics">
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());
	
	  gtag('config', 'UA-121326158-1');
</script>

Scan

Via Cookiebot (sur leur page d’accueil), je vais lancer un scan des cookies. Cela va permettre au service de lister les différents cookies qui sont ajoutés par mon site et de modifier la bannière de consentement en conséquence. Je vais aussi obtenir un rapport avec la liste des cookies.

Dans le rapport je peux voir que les deux cookies de tracking sont bien classifiés en tant que statistics.

Mise à jour

Maintenant je vais ajouter un bouton sur ma page qui va me permettre d’afficher la bannière.

<body>
	<a href="javascript: Cookiebot.renew()" class="gdpr_display_ribbon">Renouveler ou modifier votre consentement aux cookies</a>
	
</body>

Si je décoche « Statistiques » et que je clique sur OK, dans la console développeur je peux voir qu’un cookie « CookieConsent » a été créé et que les deux cookies qui posaient problème ont disparus.

A ce stade, pour moi c’est fonctionnel, il n’y a plus aucun cookie de tracking. Je vais lancer un nouveau scan pour m’en assurer.

Exception côté client

Dans de rares cas, il arrive que Cookiebot ne parvienne pas à supprimer des cookies. Il est alors possible en JavaScript de tester la valeur de la variable Cookiebot.consent et de faire le travail à la main.

<script type="text/javascript">

	function getCookieVal (offset) {
		var endstr = document.cookie.indexOf (";", offset);
		if (endstr == -1) { endstr = document.cookie.length; }
		return unescape(document.cookie.substring(offset, endstr));
	}
	
	function GetCookie (name) {
		var arg = name + "=";
		var alen = arg.length;
		var clen = document.cookie.length;
		var i = 0;
		while (i < clen) {
			var j = i + alen;
			if (document.cookie.substring(i, j) == arg) {
				return getCookieVal (j);
			}
			i = document.cookie.indexOf(" ", i) + 1;
			if (i == 0) break; 
		}
		return null;
	}
	
	function DeleteCookie (name,path,domain) {
		if (GetCookie(name)) {
			document.cookie = name + "=" +
			((path) ? "; path=" + path : "") +
			((domain) ? "; domain=" + domain : "") +
			"; expires=Thu, 01-Jan-70 00:00:01 GMT";
		}
	}

	if(Cookiebot.consent.statistics == false){
		DeleteCookie( "_ga", "/", "votre_site.com" );
		DeleteCookie( "_gid", "/", "votre_site.com" );
	}


</script>

Exception côté serveur

Il est aussi possible de gérer cela au niveau du serveur, c’est plus ou moins la même chose sauf qu’on va pouvoir charger certains éléments ou non en fonction du choix de l’utilisateur.

P.S. Dans Youtube lorsque vous partagez une vidéo, vous avez la possibilité de le faire via le domaine youtube-nocookie.com qui, lui, ne pose pas de cookie.

<?php
	global $CookieConsent;
	$CookieConsent = null;
	
	if (isset($_COOKIE["CookieConsent"])){
	    $valid_php_json = preg_replace('/\s*:\s*([a-zA-Z0-9_]+?)([}\[,])/', ':"$1"$2', preg_replace('/([{\[,])\s*([a-zA-Z0-9_]+?):/', '$1"$2":', str_replace("'", '"',stripslashes($_COOKIE["CookieConsent"]))));
	    $CookieConsent = json_decode($valid_php_json);    
	    
	    if($CookieConsent->statistics){
		    ?><iframe width="560" height="315" src="https://www.youtube.com/embed/CgZWpT43vaE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><?php
	    }else{
		    ?><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/CgZWpT43vaE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><?php
	    }
	}
?>

Valide GDPR

Si la désactivation des Cookies peut être simple et rendre ton site valide GDPR, n’oublie pas que GDPR ce n’est pas seulement ça ! Il y a plein d’articles sur internet et notamment ceux de Google pour améliorer les remontées Analytics lorsque le consentement est réactivé.

Si ton site stocke des données utilisateurs, tu vas devoir mettre en place un système qui gère le GDPR par rapport à ça, et c’est beaucoup de travail !

Quoiqu’il en soit j’espère t’avoir aidé dans la compréhension du GDPR et la gestion des cookies !

24/06/2018

Yann Vangampelaere - nouslesdevs -

Catégories

NOUS LES DEVS

Vous aimez ce que je fais ? Vous voulez que j'en fasse plus ? dans le développement du blog.