Une introduction aux cookies

Vous avez peut-être entendu parler des cookies, mais que sont-ils exactement et que pouvons-nous en faire? Dans ce tutoriel, nous allons nous concentrer sur les bases des cookies et en apprendre davantage sur leurs fonctionnalités dans divers environnements Web et d’applications Web. Nous allons également apprendre à les utiliser dans nos projets PHP et JavaScript, tout en accordant une attention particulière aux problèmes de sécurité pouvant survenir lors de leur utilisation. Après avoir lu ceci, vous aurez acquis les compétences nécessaires pour mettre en place des cookies en toute sécurité dans vos propres applications Web..


Étape 1. Comprendre les cookies

La première étape de notre voyage consiste à découvrir ce que sont réellement ces cookies! Même si vous avez déjà travaillé avec eux, vous trouverez peut-être cette partie très utile - alors restez avec moi!

Abstrait

Vous pouvez facilement considérer les cookies comme des fichiers texte, qui sont enregistrés sur votre ordinateur. À la demande d'un serveur Web, votre navigateur crée un tel fichier. Ensuite, le serveur Web peut lire et écrire du contenu depuis et vers ce fichier. Bien que cela semble une fonctionnalité dangereuse - après tout, personne n'aime les autres personnes écrivant des fichiers sur leur ordinateur, quelques restrictions sont en place pour rendre ce processus aussi sûr que possible..

  • Les serveurs Web peuvent uniquement accéder aux cookies définis dans leur propre domaine. Ce domaine est défini par le navigateur lorsqu'un nouveau cookie est demandé par le serveur Web. Il ne peut s'agir que du domaine ou d'un sous-domaine du serveur Web (le serveur Web peut choisir un sous-domaine s'il le souhaite). Cela signifie que les cookies définis par exemple par google.com ne peuvent pas être lus par mozilla.com et inversement..
  • Selon le protocole HTTP, les cookies ne peuvent pas dépasser 4096 octets (4 Ko) chacun.
  • Le nombre de cookies par domaine est limité. Le nombre diffère d'un navigateur à l'autre. Toutefois, la limite généralement utilisée est de vingt cookies. Cela empêche un seul domaine de monopoliser l'espace disque du client..
  • Le nombre total de cookies stockés sur le disque dur du client est limité. Ce nombre diffère également d’un navigateur à l’autre, mais il est généralement limité à environ trois cents cookies. Lorsque ce nombre est dépassé, un cookie ancien est supprimé avant qu'un nouveau ne soit créé..

Les cookies ont une date d'expiration. Cette date est définie afin que le navigateur puisse supprimer les anciens cookies lorsqu'ils ne sont plus nécessaires par le serveur Web. Si la date d'expiration est vide, le cookie sera supprimé lors de la fermeture de la connexion avec le serveur. Cela se produit lorsque la fenêtre ou l'onglet du site est fermé par l'utilisateur ou lorsque l'utilisateur ferme l'intégralité du navigateur. Ces cookies, parfois appelés cookies de session, sont principalement utilisés pour stocker des paramètres temporaires..

Technique

Voyons à quoi ressemblent ces choses sur le plan technique. Les cookies sont transférés via le protocole HTTP. C'est le protocole utilisé par les navigateurs pour récupérer et envoyer des fichiers au serveur. Lorsqu'un cookie est demandé, il est envoyé au serveur chaque fois qu'un nouvel élément de la page Web est récupéré par le navigateur. Ci-dessous, nous pouvons voir un extrait d'un serveur demandant un nouveau cookie (cet extrait fait partie d'une réponse HTTP)..

 Set-Cookie: Nom = données de contenu; expire = ven, 31 décembre 2010 23:59:59 GMT; chemin = /; domaine = .example.net

Maintenant, n'ayez pas peur, c'est très compréhensible.!

  • Set-Cookie: est de faire savoir au navigateur que le serveur souhaite créer un nouveau cookie.
  • prénom est le nom du cookie. Chaque cookie d'un domaine doit avoir un nom différent pour que le navigateur puisse conserver tous les cookies à part. Après le nom vient le = données de contenu où 'données de contenu' sont les données qui doivent être contenues dans le cookie. Ces données peuvent être une chaîne de texte ou un nombre et, comme indiqué, peuvent atteindre 4 Ko..
  • expire = est la commande pour la date d'expiration. La date d'expiration est au format "Wdy, JJ-Lun-AAAA HH: MM: SS GMT" (ne me demandez pas pourquoi il a été défini dans ce format ridicule, car je ne le sais pas non plus. Aucun utilisateur ne voit jamais le date d'expiration, alors pourquoi gaspiller de la mémoire, de l'espace disque et des bandes passantes lors de dates longues?). Ne vous en faites pas, car la plupart des langages de programmation proposent des fonctions faciles à utiliser. Le navigateur supprime automatiquement les cookies avec une date d'expiration passée.
  • le domaine et chemin besoin d'une explication plus profonde. le domaine est le domaine dans lequel le cookie sera actif. Si le domaine est "ads.google.com", le cookie sera uniquement envoyé au serveur de ce domaine. Si le domaine est "google.com", le cookie sera envoyé à n'importe quel serveur de l'un des sous-domaines de Google, y compris google.com lui-même.
  • le chemin est le chemin du domaine auquel le cookie est envoyé. Cela signifie que si le chemin d'accès est défini sur "/ images /" et que le domaine est défini sur "ads.google.com", le cookie n'est envoyé au serveur que si le navigateur demande un fichier à "ads.google. .com / images / '. Si le chemin d'accès est défini sur '/', le cookie sera envoyé au serveur indépendamment de l'emplacement du fichier demandé sur le serveur..

Dans la prochaine étape, nous verrons comment ces propriétés peuvent être utilisées dans les langages de programmation.


Étape 2. Comment créer et lire des cookies

Les cookies peuvent être créés de nombreuses manières, mais pour les besoins de ce tutoriel, nous allons nous concentrer sur PHP et JavaScript..

PHP

La chose la plus importante à retenir lors de la création d’un cookie en PHP est que vous devez définir tous les cookies. avant d'envoyer des données au navigateur. Cela signifie que vous devriez toujours initialiser de nouveaux cookies avant toute sortie. Cela inclut les commandes echo () ou print (), et le ou Mots clés. Bien sûr, il y a quelques exceptions, mais c'est une règle générale.

 … // tout le contenu, etc. va ici?>

Cela devrait maintenant sembler familier, sauf pour $ sécurisé et $ httponly. La «sécurisation» consiste à forcer l'envoi du cookie uniquement si une connexion HTTPS a été établie, si elle est définie sur true et doit normalement être définie sur false. "Httponly" rend le cookie uniquement disponible via le protocole HTTP, ce qui signifie que les langages côté client, tels que JavaScript et VBscript, ne peuvent pas accéder au cookie. Cela permet d'éviter des problèmes tels que le Cross Site Scripting, et doit être défini sur true si vous n'avez pas l'intention de modifier les cookies côté client avec un langage tel que JavaScript. En outre, pour éviter les idées fausses, "httponly" ne signifie pas que les cookies ne peuvent pas être envoyés via HTTPS, car ils le peuvent toujours. Cependant, veuillez noter que l'extrait ci-dessus peut être rendu plus petit (et devrait l'être):

 

Génial! Nous pouvons maintenant créer des cookies, mais nous devons également pouvoir les lire. Heureusement pour nous, PHP rend cela très facile une fois qu'un cookie a déjà été créé. En PHP, il existe une variable d'environnement appelée $ _COOKIE [], qui peut être utilisée pour extraire la valeur du cookie. Pour l'utiliser, il suffit d'insérer le nom du cookie dans les crochets [] comme suit:

 

Cette variable d'environnement peut être utilisée comme n'importe quelle autre. Tout comme $ _GET [] et $ _POST [], il peut être traité directement comme une variable normale (une fois que vous avez vérifié si le cookie existe bien sûr) si vous voulez.

Si vous souhaitez modifier la date d'expiration, le chemin ou le domaine, vous devez écraser un cookie existant avec setcookie () en utilisant le même nom que le cookie d'origine. Si vous modifiez la date d'expiration pour qu'elle soit dans le passé (time () - 30 * 60 par exemple), le cookie sera supprimé..

JavaScript

Les cookies peuvent également être lus et écrits côté client. Bien que JavaScript n'offre pas une solution intéressante pour lire et écrire des cookies, il est possible et largement utilisé. JavaScript utilise l'objet document.cookie pour la manipulation des cookies, comme le montre l'extrait suivant:

 // récupère la date actuelle var expiredate = new Date (); // augmente la date de 5 heures expiredate.setHours (expiredate.getHours () + 5); document.cookie = 'cookiename = cookievalue; expires = "+ expiredate.toUTCString () +" chemin = / exemple /; domaine = test.envato.com ';

Comme vous l'avez peut-être remarqué, cette syntaxe est assez similaire à la notation du protocole HTTP. Cela a l’avantage d’être plus maîtrisé, mais pose également certains problèmes potentiels. Ci-dessous est la extrait pour lire un cookie.

 var cookieName = 'testcookiename'; var textArray = document.cookie.split (';'); // place toutes les parties de la chaîne dans un tableau pour (var i = 0; i < textArray.length; i++) // loop though all string pieces var textPiece = textArray[i]; //contains 1 string piece //filter beginning spaces while(textPiece(0)==") textPiece = textPiece.substring(1,textPiece.length); //if the textpiece contains our cookies name if (textPiece.indexOf(cookieName)== 0) //return whats after the cookies name return textPiece.substring(cookieName.length,c.length);  

Je sais je sais; c'est une douleur. Heureusement pour vous, je poste quelques fonctions pré-écrites ci-dessous (vous voudrez peut-être créer vos propres fonctions à des fins d'apprentissage, et vous devriez le faire!).

 function writeCookie (cookieName, cookieValue, expireHours, chemin d'accès, domaine) var date = new Date (); date.setHours (date.getHours + expireHours); document.cookie = cookieName + '=' + cookieValue + '; expires = "+ date +"; chemin = "+ chemin +"; domain = "+ domain; fonction readCookie (cookieName) var textArray = document.cookie.split ("; '); pour (var i = 0; i < textArray.length; i++) var textPiece = textArray[i]; while(textPiece(0)==") textPiece = textPiece.substring(1,textPiece.length); if (textPiece.indexOf(cookieName)== 0) return textPiece.substring(cookieName.length,c.length);  

Veuillez garder à l'esprit que ces extraits ne contiennent aucune vérification d'erreur.


Étape 3. Que faire avec les cookies

Le saviez-vous? -
Les cookies ont été inventés par Netscape, qui souhaitait les utiliser pour créer un panier d'achat pour une boutique en ligne. Grâce aux cookies, les gens ont pu garder leurs articles dans leur panier, même après leur déconnexion du magasin..

De nos jours, nous utilisons des cookies pour presque tous les objectifs auxquels vous pouvez penser. Vous pouvez les utiliser pour enregistrer des paramètres utilisateur tels que le nom, la langue, l'emplacement ou la taille de l'écran. Cela peut améliorer la qualité du service que vous souhaitez fournir à un client, car vous pouvez optimiser le service pour un client et vous rappeler de cette optimisation à l'avenir. Par exemple, vous pouvez enregistrer la langue préférée du client dans un cookie, puis afficher le contenu de votre site dans la langue préférée chaque fois que le client visite votre site..

Bien sûr, il y a beaucoup plus de choses amusantes à faire avec les cookies que cela! Dans l'étape suivante, je vais vous montrer un exemple d'extrait de code génial..


Étape 4. Écrire des trucs cool

Finalement! Nous pouvons maintenant commencer à écrire du code génial! Ci-dessous se trouve un extrait de bonus, qui utilise des cookies pour créer un mécanisme de reconnexion.

"Se souvenir de moi"

Avant de commencer, cet extrait contient du code MySQL. Si vous n'êtes pas familier avec MySQL, ne paniquez pas. Même si cet extrait est un peu difficile, il devrait être compréhensible avec un peu de connaissances de base sur PHP et les cookies..

Pour créer une implémentation "Souviens-toi de moi", nous devons avoir quelques éléments. Tout d'abord, nous avons besoin d'une table de base de données contenant un nom d'utilisateur, un mot de passe et un champ d'identification. Deuxièmement, nous avons besoin d'une chaîne ou d'un numéro unique pour identifier les clients en toute sécurité grâce aux cookies (il s'agit de l'identification dans la table de la base de données). Dans cet extrait, nous allons utiliser un résumé SHA-1, qui est juste une chaîne, en tant qu'identificateur. Utilisé correctement, il offre une excellente sécurité.

La plupart des gens insèrent simplement un nom d’utilisateur et un mot de passe dans le cookie et l’envoient automatiquement au serveur.. Cela devrait être évité à tout moment! Les cookies sont généralement envoyés via une connexion non sécurisée, de sorte que le contenu puisse être facilement vu par tout attaquant potentiel..

 Nom d'utilisateur; // ici, vous devez définir un nouveau résumé pour la prochaine relogin en utilisant le code ci-dessus! echo 'Vous vous êtes connecté avec succès'. $ username;  else // digest n'existe pas (ou plusieurs digests identiques ont été trouvés, mais cela ne se produira pas) echo "Echec de la connexion!"; ?>

En utilisant un digest comme nous l'avons fait, les chances d'obtenir deux du même digest sont minimes. Un condensé est une chaîne de quarante caractères qui, en théorie, devrait toujours fournir une sortie aléatoire complète si l'entrée est modifiée. En pratique, vous devez ajouter une limite de temps dans le code côté serveur afin que le résumé ne soit pas valide après X minutes. Cela empêche les attaquants de copier les cookies de quelqu'un et de les utiliser pour se connecter..


Étape 5. Meilleures pratiques

Nous avons presque atteint la fin de ce tutoriel. En conclusion, je voudrais résumer quelques bonnes pratiques:

  • N'insérez jamais de données sensibles dans un cookie. Un client peut être en train de naviguer sur un ordinateur public, alors ne laissez aucune information personnelle derrière vous..
  • Ne faites jamais confiance aux données provenant de cookies. Filtrez toujours les chaînes et les nombres! Un attaquant pourrait écrire des données malveillantes dans le cookie afin de faire quelque chose que vous ne voulez pas que votre service fasse..
  • Essayez d'estimer la durée de validité du cookie et définissez la date d'expiration en conséquence. Vous ne voulez pas piéger l'ordinateur du client avec d'anciens cookies dont la date d'expiration est fixée à cent ans.
  • Définissez toujours les paramètres secure et httponly pour répondre aux demandes de votre application. Si votre application ne modifie pas les cookies avec JavaScript, activez httponly. Si vous avez toujours une connexion HTTPS, activez Secure. Cela améliore l'intégrité et la confidentialité des données.

Conclusion

J'espère que vous avez appris un peu du didacticiel Nettuts + d'aujourd'hui. Si vous avez des questions, n'hésitez pas à laisser un commentaire ou à dire bonjour sur Twitter.