Respecter la loi européenne sur les cookies

Les Pages Perso Chez Free

Par Al, le , dans Créer ses pages perso. / Dernière modification : le par Al (merci à JC_Et).
Tags : Tutoriaux

Depuis quelques temps, on voit fleurir sur les sites Web une petite bannière informant les utilisateurs des cookies utilisés sur le site en question. Il s'agit d'une obligation légale pour tous les sites hébergés sur des serveurs implantés dans l'espace européen. Les sites hébergés sur les pages perso de Free ou de Chez.com sont donc soumis a cette obligation. Voici quelques pistes pour vous conformer à cette directive.

La directive européenne et le texte de loi français

Le cadre juridique

La directive 2009/136/CE (et maintenant l'article 32-II de la loi du 6 janvier 1978, modifié par l'ordonnance no2011-1012 du 24 août 2011) implique que l'éditeur d'un site Web demande un consentement préalable de l'utilisateur avant le stockage d'informations sur l'ordinateur ou le smartphone d'un visiteur ou l'accès à des informations déjà stockées sauf, si ces actions sont strictement nécessaires pour la délivrance d'un service de la société de l'information expressément demandé par l'abonné ou l'utilisateur.

En application de la loi informatique et libertés, les traceurs (cookies ou autres) nécessitant un recueil du consentement de l'utilisateur ne peuvent donc être déposés ou lus sur son terminal, tant qu'il n’a pas donné son consentement. Si vous ne savez pas ce qu'est un cookie, je vous invite à faire un tour sur Wikipedia.

Les obligations faîtes aux éditeurs de sites Web

D'après le texte de loi, l'obligation de consentement s'applique à tous les intervenants susceptibles de déposer un cookie sur le terminal du visiteur (authentification, régies publicitaires, outils de statistiques, widget de réseaux sociaux, etc.). Ce consentement n'est valable que pour une durée limitée dans le temps : 13 mois maximum. Après ce lapse de temps, le visiteur doit de nouveau donner son consentement.

L'obligation de recueil du consentement s'impose :

  • aux éditeurs de sites, de système d'exploitation, et d'applications qui utilisent des cookies et des traqueurs ;
  • aux régies publicitaires ;
  • aux réseaux sociaux ;
  • aux éditeurs de solutions de mesure d'audience.

L'éditeur du site doit demander le consentement de l'utilisateur avant la dépose des cookies sur le site, et il doit faire la liste exhaustive des cookies propres au site et des cookies tiers (déposés par les régies publicitaires, les outils de mesure d'audience) associé à leur description et à l'utilisation qui en est faite.

Liens utiles

Mise en place sur un site Web

Si votre site web est purement statique (fichier HTML) et ne fait pas appel à d'outils de mesure d'audience (Xiti, Google Analytics, etc.) ou à des régies publicitaires, vous n'avez pas besoin de vous pré-occuper de la mise en place de cette directive, votre site étant conforme. De même, si votre site utilise un CMS ou des fichiers PHP pour générer des pages mais que vous n'utilisez pas de cookies sur la section publique de votre site, vous n'avez pas besoin de vous pré-occuper de la mise en place de cette directive, votre site étant conforme. Vous pouvez simplement mentionner en bas de vos pages ou sur la page de vos mentions légales que votre site n'utilise pas de cookies sur la partie publique de votre site.

Si votre site nécessite l'utilisation de cookies ou que vous utiliser des services annexes qui impliquent l'utilisation de cookies, vous êtes tenu de le préciser à l'utilisateur et de ne pas écrire de cookies sur le terminal (ordinateur, smartphone, tablette, etc.) de l'utilisateur avant qu'il n'ait donné son consentement.

Comment faire ? Il existe de nombreux procédés mais les implémentations les plus simples reposent sur des scripts javascript. Ces scripts sont souvent disponibles gratuitement sur le Web. Ils peuvent être très avancés (à l'image du gestionnaire de cookies de BT, disponible sur GitHub et dont vous pouvez voir le fonctionnement en bas des pages du site de BT — Ce site propose également une très bonne application du listing des cookies utilisés sur leur site) ou très simple et informatif à l'image de Cookie Banner. Nous allons vous présenter l'implémentation de Cookie Banner et d'un second script très simple lui aussi, et ne réalisant pas d'appel à un fichier javascript externe (il ne pénalise donc pas le chargement des pages de votre site).

Deux pages d'exemples sont ⬇ disponibles au téléchargement depuis notre site, afin de vous présenter les fonctionnalités des deux scripts présentés dans ce billet.

Page d'information

Il faut dans un premier temps créer une page d'information. Cela peut être votre page de mentions légales, ou une page dédiée à votre politique de gestion de la vie privée et des cookies.

Sur cette page, il faut lister les cookies que vous utilisé sur votre site. Pour ce faire, le plus simple est de purger tous les cookies de votre navigateur, et de visualiser les cookies présents dans votre navigateur après une visites sur votre site (sur les différentes pages utilisants des services externes (réseaux sociaux, publicités, statistiques, dons, etc.). Vous pouvez également vérifier les en-têtes Set-cookie: des réponses HTTP des ressources chargées via votre site. Pensez à désactiver vos systèmes anti-pub et anti-scripts (Ghostery, AdBlock, No Script, etc.) avant de faire ce test car ils pourraient fausser votre audit.

Une fois la liste des cookies utilisés sur votre site établie, présentez l'utilisation qui est faite de chacun et le service externe correspondant (éventuellement). Présentez également votre politique de gestion des données personnelles récoltées par votre site (cela peux inclure les adresses de courriels de vos correspondants, les logins et mots de passe de vos utilisateurs, les adresses IP, etc.)

La demande de consentement

Utilisation de Cookie Banner

Votre page d'information est maintenant terminée. Il vous faut recevoir le consentement de vos visiteurs/utilisateurs. Nous allons pour cela placer un petit morceau de script Javascript dans toutes les pages de votre site :

<script type="text/javascript" id="cookiebanner" src="//cookiebanner.eu/js/cookiebanner.min.js"></script>

Ce script va générer un bandeau d'information en haut (ou en bas) de vos pages (en anglais par défaut) et un lien vers la page d'information de AboutCookies.org ou votre page d'information personnalisée.

Options

il est possible de personnaliser le comportement du script via des balises directement incluses dans la balise du script. Ces options sont également décrites dans la documentation du script. Le code HTML généré par ce script est parfaitement modifiable via CSS, merci de vous référer à la documentation du script.

  • data-height : hauteur du bandeau (défaut : 32 pixels).
  • data-fg : couleur du texte (défaut : #ddd).
  • data-bg : couleur de fond (défaut : #000).
  • data-link : couleur du lien (défaut : #aaa).
  • data-position : position du bandeau, top (haut) ou bottom (bas) (défaut : bottom).
  • data-message : le texte du message d'information.
  • data-linkmsg : le texte du lien vers la page d'information (défaut : Learn more).
  • data-effect : les effets à utiliser.
  • data-cookie : nom du cookie permettant de stocker le consentement de l'utilisateur (défaut : cookiebanner-accepted).
  • data-expires : date d'expiration du cookie (défaut  configuré sur l'infini Fri, 31 Dec 9999 23:59:59 GMT). Support basic d'une fonction de callback (cf. Cookies.set()). Il est également possible de spécifier une date UTC valide.
  • data-cookie-path : chemin du cookie.
  • data-moreinfo : adresse URL de la page d'information (défaut : http://www.aboutcookies.org).
  • data-mask : si true, création d'un masque opaque au dessus de la page (défaut : false). Cliquer n'importe où sur le masque valide l'acceptation.
  • data-mask-opacity : opacité utilisée pour le masque (défaut : 0.5).
  • data-mask-background : style de fond optionnel pour le masque (défaut : #000)
  • data-zindex :propriété z-index du bandeau (défaut : 255). Si le masque est utilisé la propriété z-index passe automatiquement à 1 pour que le bandeau soit au dessus du masque.

Voici un exemple de code (à placer après le dernier élément visible de vos pages) :

…
<script type="text/javascript" id="cookiebanner" src="//cookiebanner.eu/js/cookiebanner.min.js" data-message="Nous n'utilisons pas de cookies sur la section publique du site. Des cookies de sessions sont utilisés lors de la connexion aux espaces d'administration." data-linkmsg="En savoir plus" data-moreinfo="/conditions-utilisation.html"></script></footer></body>

Et voilà, c'est terminé !

Si vous souhaitez proposer le fichier du script Cookie Banner depuis votre propre site, il vous suffit de vous rendre à l'adresse http://cookiebanner.eu/js/cookiebanner.min.js avec votre navigateur, d'enregistrer le fichier sur votre ordinateur puis de le déposer sur votre espace Web par FTP (pensez à modifier correctement le chemin vers le fichier).

Liens utiles

Utilisation d'une bannière informative très simple

Ce script s'articule autour de 3 éléments : du code CSS, HTML et Javascript.

Le code HTML est à placer dans entre les balises <body></body> de votre page :

…
<div id="cookie_notice"><span>Ce site utilise des cookies. En poursuivant votre navigation sur ce site, vous en acceptez l'utilisation.  <a href="/chemin/vers/la/page/informations" title="En savoir plus sur notre charte relative aux données personnelles">Cliquez ici pour en savoir plus</a><span class="closer" title="Fermer - Close"><button onclick="setExp();">X</button></span></div>
…

Le code CSS est à placer entre les balises <style></style> du <head></head> de votre page (ou dans votre fichier CSS externe) :

div#cookie_notice {font-family:Georgia, 'Times New Roman', Times, serif;font-weight:bold;position:relative;width:100%;margin:1em
auto; background-color:#b4b4b4;padding:8px 10px 7px 10px;color:#fff;border-radius: 5px;}
div#cookie_notice  a {color:#000;font-family:Georgia, 'Times New Roman', Times, serif;font-weight:bold;}
div#cookie_notice  a:hover {color:#007cc0;}
div#cookie_notice .closer {position:absolute;  top:5px;right:10px;} /* position Droite */
div#cookie_notice button {cursor: pointer;}

Le code du script Javascript est à placer juste avant la balise </body> de votre page Web. Dans cet exemple, le cookie enregistrant le consentement porte le nom MonSiteFree_AcceptationCookies :

…
<script type="text/javascript">// <![CDATA[
function setCookie(nom, valeur, expire, chemin, domaine, securite){
document.cookie = nom + ' = ' + escape(valeur) + '  ' +
((expire == undefined) ? '' : ('; expires = ' +
expire.toGMTString())) +
((chemin == undefined) ? '' : ('; path = ' + chemin)) +
((domaine == undefined) ? '' : ('; domain = ' + domaine)) +
((securite == true) ? '; secure' : '');
}

var dtExpire = new Date();
// Le nombre d'heures pendant lesquelles le consentement est valable (ici 48 heures).
dtExpire.setTime(dtExpire.getTime() + 3600 * 48000);

function  getCookie(name){
if(document.cookie.length == 0)
return null;
var regSepCookie = new RegExp('(; )', 'g');
var cookies = document.cookie.split(regSepCookie);
for(var i = 0; i < cookies.length; i++){
var regInfo = new RegExp('=', 'g');
var infos = cookies[i].split(regInfo);
if(infos[0] == name){
return unescape(infos[1]);
}
}
return null;
}

// On vérifie la présence du Cookie et l'on affiche ou l'on affiche pas la bannière.
var elmt = document.getElementById("cookie_notice");
if ( getCookie("MonSiteFree_AcceptationCookies") == "1" ) {
elmt.style.display = "none";
}else{
elmt.style.display = "";
}
// Si le cookie n'est pas présent, on le génère pour le navigateur.
function setExp(){
// on modifie son style
elmt.style.display = "none";
setCookie('MonSiteFree_AcceptationCookies', '1', dtExpire, '/');     }
// ]]></script>

Les options pour les CMS

SPIP

Les utilisateurs de SPIP peuvent utiliser l'extension CookiesChoices : http://contrib.spip.net/CookieChoices.