Le mystère du stockage des cookies révélé : une explication détaillée de l'interaction entre le navigateur et le serveur

Avec le développement d'Internet, nous utilisons de plus en plus de navigateurs pour la navigation sur le Web, les achats, la connexion et d'autres opérations. Dans ces processus, nous entendons souvent un mot : cookie. Alors, que sont exactement les cookies ? Quelle est sa fonction ? Aujourd'hui, nous allons révéler le mystère du stockage des cookies, analyser en détail l'interaction entre le navigateur et le serveur et donner des exemples de code spécifiques.

1. Que sont les cookies ?

En termes simples, un cookie est un petit élément de données envoyé par le serveur au navigateur et enregistré localement. Chaque fois que le navigateur fera une requête au même serveur, il apportera les données des cookies précédemment enregistrées. Dans ce cas, le serveur peut lire les données des cookies dans le navigateur et effectuer les opérations correspondantes en fonction des informations qu'il contient.

2. Le rôle des cookies

1. Gestion de l'état de session

Grâce aux cookies, le serveur peut identifier l'utilisateur et maintenir l'état de session de l'utilisateur lorsqu'il visite à nouveau le site Web. Par exemple, lorsque nous nous connectons, le serveur envoie un cookie contenant nos informations de connexion au navigateur, de sorte que lorsque nous visitons à nouveau le site Web, le serveur puisse nous reconnaître comme la dernière fois et se connecter automatiquement.

2. Paramètres personnalisés

Grâce aux cookies, le serveur peut obtenir certaines habitudes et préférences personnelles de l'utilisateur ainsi que d'autres informations, fournissant ainsi aux utilisateurs des services et des suggestions plus personnalisés. Par exemple, lorsque nous parcourons un site Web commercial, le serveur recommandera des produits associés en fonction de nos enregistrements d'achats précédents et de notre historique de navigation.

3. Suivi et analyse

Grâce aux cookies, le serveur peut suivre les habitudes de navigation de l'utilisateur pour effectuer des analyses et des statistiques pertinentes. Par exemple, une société de publicité peut utiliser des cookies pour suivre des informations telles que l'heure et la fréquence des visites des utilisateurs sur différents sites Web, afin de comprendre les intérêts et les désirs d'achat des utilisateurs et de fournir aux annonceurs de meilleurs services de promotion publicitaire.

3. Interaction entre le navigateur et le serveur

L'enregistrement et l'acquisition des cookies s'effectuent entre le navigateur et le serveur. L'ensemble du processus d'interaction peut être divisé en quatre étapes suivantes :

1. Le navigateur envoie une requête. au serveur et la demande est en cours. Ne contient pas d'informations sur les cookies.
2. Après avoir reçu la demande, le serveur génère et envoie des données de cookie au navigateur.
3. Une fois que le navigateur a reçu les données du cookie, il les enregistre localement.
4. Le navigateur envoie à nouveau une requête au même serveur, transportant les données de cookie précédemment enregistrées dans la requête.

Pour mieux comprendre ce processus, regardons un exemple spécifique.

(1) Exemple de code de serveur

Ce qui suit est un code de serveur écrit à l'aide du framework Node.js pour envoyer une réponse contenant des informations sur les cookies au navigateur.

const http = require('http');

http.createServer((req, res) => {
  //设置cookie
  res.writeHead(200, {
    'Set-Cookie': 'name=cookie_test; max-age=60'
  });

  //发送响应
  res.end('Hello World!
');
}).listen(8080);

console.log('Server running at http://localhost:8080/');

Analyse du code :

• Utilisez le champ Set-Cookie dans l'en-tête de réponse du serveur pour envoyer les données des cookies au navigateur.
• Définissez la durée de validité du cookie via le paramètre max-age, ici elle est fixée à 60 secondes.

(2) Exemple de code de navigateur

Ce qui suit est un code de navigateur écrit en JavaScript pour envoyer une requête au serveur ci-dessus et afficher des informations sur les cookies lorsque la réponse est reçue.

// 发送请求
fetch('http://localhost:8080')
  .then(response => {
    // 读取cookie
    console.log(response.headers.get('Set-Cookie'));
    return response.text();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error(error));

Analyse du code :

• Utilisez la fonction fetch pour envoyer une requête au serveur.
• Lisez les informations sur le cookie dans l'en-tête de réponse via la méthode Response.headers.get('Set-Cookie').
• Utilisez la méthode Response.text() pour obtenir les informations textuelles dans le corps de la réponse.

4. Attributs communs des cookies

En plus de l'attribut max-age utilisé dans l'exemple ci-dessus, les cookies ont de nombreux autres attributs. Les attributs communs sont les suivants :

1. Path

Cet attribut spécifie le chemin du cookie. Lorsque le navigateur lance une requête, le cookie ne sera introduit que si le chemin de la requête correspond exactement au chemin du cookie.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Path=/test'
});

2. Domain

Cet attribut précise le nom de domaine du cookie. Lorsque le navigateur lance une demande, le cookie sera inclus uniquement si le nom de domaine demandé correspond exactement au nom de domaine du cookie.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Domain=.example.com'
});

3. Expires

Cet attribut précise la durée de validité du cookie. Une fois cet attribut défini, le cookie expirera automatiquement à l'heure spécifiée et sera supprimé par le navigateur.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Expires=Wed, 18 Nov 2020 08:51:29 GMT'
});

4. Secure

Cet attribut précise si le cookie ne peut être envoyé que via le protocole https. Après avoir défini cet attribut, le cookie ne sera apporté que lorsqu'une requête https est effectuée.

res.writeHead(200, {
  'Set-Cookie': 'name=value; Secure'
});

5. HttpOnly

Cet attribut précise si le cookie ne peut être envoyé que via le protocole http. Après avoir défini cet attribut, le navigateur ne peut pas obtenir les informations sur les cookies via JavaScript, améliorant ainsi la sécurité des cookies.

res.writeHead(200, {
  'Set-Cookie': 'name=value; HttpOnly'
});

5. Résumé

Grâce à l'introduction de cet article, nous avons découvert la définition, la fonction, la méthode de stockage et les attributs communs des cookies. Dans le même temps, nous avons également appris le modèle d'interaction des cookies entre le navigateur et le serveur et approfondi notre compréhension des cookies grâce à des exemples de code spécifiques. En tant qu'ingénieur front-end, nous devons avoir une compréhension et une maîtrise approfondies des connaissances liées aux cookies afin de les appliquer de manière plus flexible et plus efficace dans le développement réel.

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!