Maison > interface Web > js tutoriel > Explorer le monde des cookies : guide du débutant

Explorer le monde des cookies : guide du débutant

WBOY
Libérer: 2023-09-03 21:25:02
original
1252 Les gens l'ont consulté

Explorer le monde des cookies : guide du débutant

Vous avez peut-être entendu parler des cookies, mais que sont-ils exactement et que pouvons-nous réellement en faire ? Dans ce didacticiel, nous nous concentrerons sur les bases des cookies et comprendrons leur fonctionnalité dans divers environnements d'applications Web et de sites. Nous apprendrons également comment les utiliser dans des projets PHP et JavaScript, en accordant une attention particulière aux problèmes de sécurité qui peuvent survenir lors de leur utilisation. Après avoir lu cet article, vous posséderez les compétences nécessaires pour implémenter en toute sécurité des cookies 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 les avez déjà utilisés, cette section peut vous être utile – alors continuez à me suivre !

Résumé

Vous pouvez facilement considérer les cookies comme des fichiers texte enregistrés sur votre ordinateur. À la demande d'un serveur Web, votre navigateur crée un tel fichier. Après cela, le serveur réseau peut lire ou écrire dans ce fichier. Bien que cela puisse sembler une fonctionnalité dangereuse - personne n'aime que d'autres personnes écrivent des fichiers sur son ordinateur, après tout - il existe certaines limitations pour rendre ce processus aussi sûr que possible.

  • Les serveurs Web ne peuvent accéder qu'aux cookies définis sur leur propre domaine. Le domaine est défini par le navigateur lorsque le serveur web demande un nouveau cookie, et ne peut être que le domaine ou le sous-domaine du serveur web (le serveur web peut choisir un sous-domaine si nécessaire). Cela signifie que mozilla.com ne peut pas lire les cookies définis par google.com, etc., et vice versa.
  • Selon le protocole HTTP, chaque cookie ne peut pas dépasser 4096 octets (4 Ko).
  • Il y a une limite au nombre de cookies par domaine. Le nombre varie selon le navigateur, mais une limite couramment utilisée est de 20 cookies. Cela permet d'éviter qu'un seul domaine n'occupe de l'espace disque sur le client.
  • Il y a une limite au nombre total de cookies sur le disque dur du client. Ce nombre varie également selon le navigateur, mais est généralement limité à environ trois cents. Lorsque ce nombre est dépassé, les anciens cookies sont supprimés et de nouveaux sont créés.

Les cookies ont une date d'expiration. Cette date est fixée afin que les navigateurs puissent supprimer les anciens cookies lorsque le serveur Web n'en a plus besoin. Si la date d'expiration est vide, le cookie sera supprimé à la fermeture de la connexion au serveur. Cela se produit lorsque l'utilisateur ferme une fenêtre ou un onglet du site Web, ou lorsqu'il ferme l'intégralité du navigateur. Ces cookies, parfois appelés cookies de session, sont principalement utilisés pour stocker des paramètres temporaires.

Technologie

Voyons à quoi ressemblent ces choses sur le plan technique. Les cookies sont transmis via le protocole HTTP. Il s'agit du protocole utilisé par les navigateurs pour récupérer des fichiers et les envoyer au serveur. Après avoir demandé un cookie, le cookie est envoyé au serveur chaque fois que le navigateur récupère un nouvel élément sur la page Web. Ci-dessous, on peut voir un fragment du serveur demandant un nouveau cookie (ce fragment fait partie de la réponse HTTP).

Set-Cookie: Name=content data; expires=Fri, 31-Dec-2010 23:59:59 GMT; path=/; domain=.example.net
Copier après la connexion

N’ayez pas peur maintenant, tout est facile à comprendre !

  • Set-Cookie : informe le navigateur que le serveur souhaite créer un nouveau cookie.
  • name est le nom du cookie. Chaque cookie du domaine doit avoir un nom différent afin que le navigateur puisse séparer tous les cookies. Après le nom se trouve =content-data, où « content-data » correspond aux données à inclure dans le cookie. Ces données peuvent être une chaîne de texte ou un nombre et, comme mentionné ci-dessus, peuvent atteindre une taille de 4 Ko.
  • expires= est la commande de date d'expiration. La date d'expiration est au format "Wdy,DD-Mon-YYYY HH:MM:SS GMT" (ne me demandez pas pourquoi elle est définie dans ce format ridicule, car je ne sais pas non plus. Aucun utilisateur n'a jamais vu de date d'expiration, alors Pourquoi gaspiller de la mémoire, de l'espace disque dur et de la bande passante sur de longues dates ?) Mais ne vous inquiétez pas, car la plupart des langages de programmation disposent de fonctionnalités faciles à utiliser. Les navigateurs suppriment automatiquement les cookies dont la date d'expiration est dépassée.
  • Domains et Paths nécessitent des explications plus approfondies. Domain est le domaine dans lequel le cookie sera actif. Si le domaine est "ads.google.com", le cookie sera envoyé uniquement aux serveurs de ce domaine, si le domaine est "google.com", le cookie sera envoyé à n'importe quel serveur pour n'importe quel sous-domaine de ce domaine Google, y compris Google. com lui-même.
  • Path est le chemin d'accès au domaine auquel le cookie est envoyé. Cela signifie que si le chemin est défini sur "/images/" et que le domaine est défini sur "ads.google.com", le cookie ne sera envoyé au serveur que si le navigateur demande un fichier à "ads.google". com/images/'. Si le chemin est défini sur "/", le cookie sera envoyé au serveur quel que soit l'emplacement du fichier demandé sur le serveur.

Dans la prochaine étape, nous verrons comment utiliser ces propriétés dans les langages de programmation.


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

Les cookies peuvent être créés de plusieurs manières, cependant, pour les besoins de ce tutoriel, nous nous concentrerons sur PHP et JavaScript.

PHP

在 PHP 中创建 cookie 时要记住的最重要的事情是,您必须在向浏览器发送任何数据之前设置所有 cookie。这意味着您应该始终任何输出之前初始化新的cookie。这包括 echo() 或 print() 命令以及 或 标记。当然,也有一些例外,但这是一般的经验法则。

<?php
/***Creating a cookie***/
$name = 'clientname';
$value = 'Peter Griffin';
//time() gives current time in seconds, and we add 60 seconds * 30 = 30 minutes
//so this cookie expires in 30 minutes.
//You may notice that the expire date is in seconds, PHP translates this to
//the correct format internally!
$expireDate = time() + 60 * 30;
$path = '/example/';
$domain = 'test.envato.com';
$secure = false; //only transmit the cookie if a HTTPS connection is established
$httponly = true; //make cookie available only for the HTTP protocol (and not for JavaScript)
setcookie( $name, $value, $expireDate, $path, $domain, $secure, $httponly);

<html>
.... //all content etc goes here
?>
Copier après la connexion

除了 $secure$httponly 之外,现在看起来应该很熟悉。 “secure”是强制仅在已建立 HTTPS 连接的情况下发送 cookie,如果设置为 true,则通常应设置为 false。 “httponly”使 cookie 只能通过 HTTP 协议使用,这意味着客户端语言(如 JavaScript 和 VBscript)无法访问 cookie。这有助于防止令人讨厌的事情,例如跨站点脚本,如果您无意使用 JavaScript 等语言编辑客户端的 cookie,则应将其设置为 true。另外,为了防止误解,“httponly”并不意味着 cookie 不能通过 HTTPS 发送,因为事实上它们仍然可以。但是,请注意,上面的代码片段可以变得非常小(并且应该如此):

<?php
setcookie( 'clientname', 'Peter Griffin', time()+60*30, '/example/', 'test.envato.com', false,true);
?>
Copier après la connexion

太棒了!现在我们可以创建cookie,但我们也必须能够读取它们。幸运的是,一旦创建了 cookie,PHP 就可以让这一切变得非常简单。在 PHP 中,有一个名为 $_COOKIE[] 的环境变量,可用于提取 cookie 的值。要使用它,只需将 cookie 的名称插入方括号 [] 内,如下所示:

<?php
$cookieValue = $_COOKIE['name of the cookie'];
?>
Copier après la connexion

这个环境变量可以像其他环境变量一样使用。就像 $_GET[] 和 $_POST[] 一样,如果您愿意,可以直接将其视为普通变量(当然,一旦您检查了 cookie 是否确实存在)。

如果您想更改过期日期、路径或域,则必须使用与原始 cookie 相同的名称,使用 setcookie() 覆盖现有 cookie。如果您将过期日期更改为过去的日期(例如 time()-30*60),则 Cookie 将被删除。

JavaScript

Cookie 也可以在客户端读取和写入。尽管 JavaScript 没有提供一个很好的读取和写入 cookie 的解决方案,但它是可能的并且被广泛使用。 JavaScript 使用 document.cookie 对象进行 cookie 操作,如以下代码片段所示:

//get current date
var expiredate = new Date();
//increase date by 5 hours
expiredate.setHours( expiredate.getHours() + 5);
document.cookie = 'cookiename=cookievalue; expires='  + expiredate.toUTCString() + 'path=/example/; domain=test.envato.com';
Copier après la connexion

您可能已经注意到,此语法与 HTTP 协议表示法非常相似。这样做的优点是更容易控制,但也带来了一些潜在的问题。下面是读取 cookie 的 片段。

var cookieName = 'testcookiename';
var textArray = document.cookie.split(';'); //put all the parts of the string in an array
for(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);
}
}
Copier après la connexion

我知道,我知道;这是一种痛苦。对你们来说幸运的是,我在下面发布了一些预先编写的函数(不过,出于学习目的,您可能想创建自己的函数,而且您应该这样做!)。

function writeCookie(cookieName, cookieValue, expireHours, path, domain){
var date =  new Date();
date.setHours(date.getHours + expireHours);
document.cookie = cookieName + '=' + cookieValue + '; expires=' + date + '; path=' + path + '; domain=' + domain;
}

function readCookie(cookieName){
var textArray = document.cookie.split(';');
for(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);
}
}
Copier après la connexion

请记住,这些片段不包含任何错误检查。


第 3 步. 如何处理 Cookie

你知道吗? -

Cookie 是由 Netscape 发明的,该公司希望使用它们为在线商店创建购物车。多亏了 cookie,人们即使在与商店断开连接后也能够保留购物车中的商品。

如今,我们几乎将 Cookie 用于您能想到的所有用途。您可以使用它们来保存用户设置,例如名称、语言、位置或屏幕尺寸。这可以提高您想要为客户提供的服务质量,因为您可以优化为客户提供的服务,并在将来记住这种优化。例如,您可以将客户的首选语言保存到 cookie,然后在客户每次访问您的网站时以首选语言显示您网站的内容。

当然,用cookie还有很多比这更有趣的事情!在下一步中,我将向您展示一个很酷的代码片段示例。


第 4 步。 编写很酷的东西

终于!现在我们可以开始编写一些很棒的代码了!下面是一个奖励片段,它使用 cookie 创建重新登录机制。

“记住我”登录片段

在我们开始之前,此片段包含一些 MySQL 代码。如果您不熟悉 MySQL,请不要惊慌。尽管这段代码有点困难,但只要有一些基本的 PHP 和 cookie 知识就应该可以理解。

要创建“记住我”的实现,我们必须具备一些条件。首先,我们需要一个包含用户名、密码和标识字段的数据库表。其次,我们需要一个唯一的字符串或数字来通过cookie安全地识别客户端(这是数据库表中的标识)。在此代码片段中,我们将使用 SHA-1 摘要(它只是一个字符串)作为标识符。如果使用得当,这可以提供出色的安全性。

大多数人只是在 cookie 中插入用户名和密码,然后自动将其发送到服务器。 应始终避免这种情况!Cookie 通常通过非安全连接发送,因此任何潜在攻击者很容易看到内容。

<?php

//this assumes that the user has just logged in
/****Creating an identification string****/

$username; //normally the username would be known after login

//create a digest from two random values and the username
$digest = sha1(strval(rand(0,microtime(true)) + $username + strval(microtime(true)); 

//save to database (assuming connection is already made)
mysql_query('UPDATE users SET reloginDigest="'.$digest.'" WHERE username="'.$username.'"');  

//set the cookie
setcookie( 'reloginID', $digest, time()+60*60*24*7,'/', 'test.example.com', false, true); 


//this assumes that the user is logged out and cookie is set
/****Verifying users through the cookie****/

$digest = $_COOKIE['reloginID'];
$digest = mysql_real_escape_string($digest); //filter any malicious content

//check database for digest
$result = mysql_query('SELECT username FROM users WHERE reloginDigest="'.$digest.'"');
//check if a digest was found
if(mysql_num_rows($result) == 1){
	$userdata  = mysql_fetch_object($result);
	$username = $userdata->username;

	//here you should set a new digest for the next relogin using the above code!

	echo 'You have successfully logged in, '.$username;

} else{
//digest didn't exist (or more of the same digests were found, but that's not going to happen)
echo "failed to login!";
}

?>
Copier après la connexion

通过像我们一样使用摘要,获得两个相同摘要的机会微乎其微。摘要是一个四十个字符串,理论上,如果输入发生更改,它应该始终提供完整的随机输出。实际上,您应该在服务器端代码中添加时间限制,以便摘要在 X 分钟后无效。这可以防止攻击者复制某人的 cookie 并使用它们登录。


第 5 步。最佳实践

本教程即将结束。作为结论,我想总结一些最佳实践:

  • 切勿将敏感数据插入 cookie。客户可能会在公共计算机上浏览,因此不要留下任何个人信息。
  • 永远不要相信来自 Cookie 的数据。始终过滤字符串和数字!攻击者可能会向 Cookie 写入恶意数据,以执行您不希望服务执行的操作。
  • 尝试估计 cookie 的有效期限,并相应地设置到期日期。您不想让客户的计算机被设置为一百年后过期的旧 cookie 占用。
  • 始终设置 secure 和 httponly 以满足您的应用程序需求。如果您的应用程序不使用 JavaScript 编辑 cookie,请启用 httponly。如果您始终有 HTTPS 连接,请启用安全。这提高了数据的完整性和机密性。

结论

我希望您从今天的 Nettuts+ 教程中学到了一些东西。如果您有任何疑问,请随时发表评论或在 Twitter 上打个招呼。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal