Les cookies en JavaScript

Avec JavaScript, il est possible de programmer les célèbres cookies.
Nous allons voir ici à quoi servent les cookies et comment stocker et récupérer des informations grâce à eux.
En bas de cette page, vous trouverez des exemples de programmation de cookies.

A quoi servent les cookies ?

Les cookies sont très utilisés, par tous les sites commerciaux et par de plus en plus de sites d'information. La raison est simple. Un cookie permet de stocker de manière permanente des informations sur le poste du visiteur, qui pourront être récupérées lors des futures visites.

Voyons quelques unes des principales informations stockées dans les cookies :

• Le nombre de visites, la date de la dernière visite, ...
• L'identifiant de la session de l'utilisateur
• Un identifiant et un mot de passe crypté pour une reconnaissance automatique du visiteur
• Une liste de mots-clés utilisés dans les moteurs de recherche pour cibler les publicités à afficher
• Une liste de paramètres de préférences de navigation pour personnaliser la page présentée

Comment STOCKER des informations ?

Le type d'informations à stocker n'a aucune influence sur le code. Un cookie est un fichier de texte qui contient une chaîne de caractères contenant les informations concaténées.
Voici la fonction qui permet de stocker une information dans un cookie

function SetCookie (name, value) {
  var argv=SetCookie.arguments;
  var argc=SetCookie.arguments.length;
  var expires=(argc > 2) ? argv[2] : null;
  var path=(argc > 3) ? argv[3] : null;
  var domain=(argc > 4) ? argv[4] : null;
  var secure=(argc > 5) ? argv[5] : false;
  document.cookie=name+"="+escape(value)+
    ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
    ((path==null) ? "" : ("; path="+path))+
    ((domain==null) ? "" : ("; domain="+domain))+
    ((secure==true) ? "; secure" : "");
}

La valeur à stocker est associée à un nom de cookie.
La date d'expiration permet de définir la longévité du cookie. Si elle est omise, le cookie est détruit à la fermeture du navigateur.
Le path indique simplement d'où vient le cookie.
Le nom de domaine permet d'identifier le cookie parmi tous ceux stockés sur la machine.
La variable secure indique si l'accès au cookie est protégé.

Donc pour stocker la valeur Arthur dans la variable prenom il suffit d'appeler la fonction comme ceci :

  var pathname=location.pathname;
  var myDomain=pathname.substring(0,pathname.lastIndexOf('/')) +'/';
  var date_exp = new Date();
  date_exp.setTime(date_exp.getTime()+(365*24*3600*1000)); // Ici on définit 365 jours
  SetCookie("prenom","Arthur",date_exp,myDomain);

Comment RECUPERER les informations ?

Voyons un cookie qui contiendrait les informations suivantes :

• prenom = Arthur
• nb_visite = 3

Pour récupérer l'information prenom, il faut extraire, de la chaîne de caractères composant le cookie, le nom de la variable soit prenom. La valeur de prenom est la chaine de caractères située immédiatement après et séparée par ';' et par ' '.
Voici le code des fonctions nécessaires à la récupération d'une information :

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;
}

Si la variable demandée n'est pas contenue dans le cookie, elle est considérée comme valant null.

Pour récupérer la variable prenom, il suffit d'appeler la fonction :

le_prenom=GetCookie("prenom");

Les cookies sur le serveur web

Il faut bien comprendre que les cookies sont transférés dans l'entête HTML des pages web entre le navigateur et le serveur web, dans les deux sens.

Un cookie peut être déposé par le serveur web. Il est envoyé dans l'entete HTTP (dans le bloc Response Hearders) vers le navigateur qui l'enregistre sur le système de l'utilisateur.

Un cookie déposé par JavaScript sur le poste du navigateur sera vu par le serveur web au prochain chargement de page, toujours via l'entete HTTP (dans le bloc Request Hearders) .

Les entêtes HTML transmettent donc à chaque appel au serveur l'ensemble des cookies du domaine, filtré selon les paramètres de création (chemin d'acès, sous-domaine, durée de validité, ...).

La sécurité des cookies

On a vu que toutes les informations contenues dans les cookies du visiteur naviguent entre le navigateur et le serveur web. Il ne faut donc pas stocker dans les cookies de données sensibles comme un mot de passe non crypté car il est possible que ces données soient interceptées. Cela peut être facilement le cas dans les reseaux wifi des lieux publics ou des hôtels dont la clé est largement diffusée.

C'est en partie pour cette raison que Google incite à passer son site en protocole https qui crypte toutes les transmissions entre le navigateur et le serveur, empêchant l'interception des données sur les différents réseaux du chemin reliant le navigateur à l'hébergeur du serveur.