小 cookie，大作用：探索网站中的隐私追踪器(上)

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

介绍 cookie 的概念和作用

Cookie是一种由服务器发送给客户端（通常是浏览器）的小文本文件，用于存储一些与用户相关的信息。Cookie通常包含一个唯一的标识符（Cookie ID）以及一些其他的元数据，如过期时间、创建时间、路径等。

Cookie的主要作用包括：

1. 会话管理：Cookie可以用于在服务器端跟踪用户的会话。当用户登录到一个网站时，服务器可以向用户的浏览器发送一个包含登录信息的Cookie。在后续的请求中，浏览器会自动将该Cookie发送给服务器，以便服务器验证用户的身份。

2. 个性化设置：网站可以使用Cookie来存储用户的偏好设置，如语言、字体大小、主题等。这样，当用户再次访问该网站时，网站可以根据Cookie中存储的信息为用户提供个性化的体验。

3. 广告追踪：广告商可以使用Cookie来跟踪用户在多个网站上的浏览行为，以便向用户展示相关的广告。

4. 分析和统计：网站所有者可以使用Cookie来收集用户的浏览行为数据，如访问页面的数量、停留时间等，以便进行网站分析和统计。

需要注意的是，Cookie可能会涉及到用户的隐私问题，因此一些浏览器提供了隐私设置，允许用户控制是否接受Cookie以及如何处理Cookie。同时，网站也需要在使用Cookie时遵循相关的法律法规，如欧盟的《通用数据保护条例》（GDPR）等。

二、 cookie 的基础知识

解释 cookie 的定义和工作原理

Cookie是由服务器发送到用户浏览器并保存在本地的一小段文本数据。它包含了一个唯一的标识符（Cookie ID）以及一些其他信息，如过期时间、创建时间、路径等。

Cookie的工作原理如下：

1. 当用户首次访问一个网站时，服务器会在响应中发送一个Set-Cookie头部，其中包含了一个Cookie的值。

2. 浏览器接收到该响应后，会将Cookie存储在本地。在后续的请求中，浏览器会自动将该Cookie包含在请求的Cookie头部中，发送给服务器。

3. 服务器接收到请求后，可以通过解析Cookie头部获取到之前发送的Cookie值。服务器可以使用该Cookie值来识别用户、跟踪用户的会话或存储用户的偏好设置等信息。

4. Cookie的过期时间决定了它在浏览器中保留的时间。当过期时间到达时，浏览器会自动删除该Cookie。如果没有设置过期时间，则Cookie会在浏览器关闭时被删除。

需要注意的是，Cookie是基于浏览器的，并且只能被发送给设置了Cookie的同一域名下的服务器。此外，浏览器通常会限制每个域名可以存储的Cookie数量以及总大小。因此，在使用Cookie时需要考虑到这些限制。

介绍 cookie 的类型：会话 cookie 和持久 cookie

根据过期时间的不同，Cookie可以分为两种类型：会话Cookie和持久Cookie。

1. 会话Cookie：会话Cookie是一种临时的Cookie，它在用户关闭浏览器或会话结束时自动失效。会话Cookie用于在用户的会话期间保持状态，例如在购物车中添加商品或登录到网站时。

2. 持久Cookie：持久Cookie是一种在浏览器中保存较长时间的Cookie，它的过期时间可以设置为几天、几个月甚至几年。持久Cookie常用于存储用户的偏好设置、登录状态等信息，以便用户在下次访问网站时可以自动恢复这些设置。

无论是会话Cookie还是持久Cookie，它们都可以在浏览器中被访问和修改。然而，需要注意的是，用户可以通过浏览器设置来禁用Cookie，或者在使用完浏览器后清除Cookie。因此，在开发网站时，需要考虑到Cookie的使用和用户的隐私问题。

讨论 cookie 的用途，如会话管理、个性化设置等

Cookie在 Web 开发中有许多用途，包括会话管理、个性化设置、广告追踪和分析等。下面是一些常见的Cookie用途：

1. 会话管理：Cookie可以用于跟踪用户的会话。当用户登录到一个网站时，服务器可以向用户的浏览器发送一个包含会话标识符的Cookie。在后续的请求中，浏览器会自动将该Cookie发送给服务器，以便服务器识别用户的会话并保持用户的登录状态。

2. 个性化设置：网站可以使用Cookie来存储用户的偏好设置，如语言、字体大小、主题等。这样，当用户再次访问该网站时，网站可以根据Cookie中存储的信息为用户提供个性化的体验。

3. 广告追踪：广告商可以使用Cookie来跟踪用户在多个网站上的浏览行为，以便向用户展示相关的广告。通过分析用户的浏览历史和兴趣，广告商可以更精准地投放广告，提高广告的点击率和转化率。

4. 分析和统计：网站所有者可以使用Cookie来收集用户的浏览行为数据，如访问页面的数量、停留时间等。这些数据可以用于分析网站的流量、用户行为和优化网站的设计和内容。

需要注意的是，Cookie可能会涉及到用户的隐私问题，因此一些浏览器提供了隐私设置，允许用户控制是否接受Cookie以及如何处理Cookie。同时，网站也需要在使用Cookie时遵循相关的法律法规，如欧盟的《通用数据保护条例》（GDPR）等。

三、 cookie 的设置和获取

演示如何在服务器端设置 cookie

在服务器端设置cookie通常使用 HTTP 响应的Set-Cookie头部。下面是一个简单的 Python 示例，演示如何在服务器端设置cookie：

import http.server
import socketserver

# 设置 cookie
def set_cookie(response, name, value, max_age=3600):
    response.headers.add("Set-Cookie", f"{name}={value}; max-age={max_age}")

# 处理请求
def handle_request(client_request):
    response = http.server.SimpleHTTPRequestHandler(client_request)
    set_cookie(response, "my_cookie", "my_value")
    return response

# 创建服务器并监听指定端口
with socketserver.TCPServer(("", 8000), handle_request) as httpd:
    print(f"Serving at port 8000...")
    # 启动服务器，按 Ctrl+C 停止
    try:
        httpd.serve_forever()
    except KeyboardInterrupt:
        print("Server stopped.")

在上面的示例中，我们使用 Python 的内置模块http.server和socketserver创建了一个简单的 HTTP 服务器。当客户端发送请求到该服务器时，我们使用set_cookie函数设置了一个名为my_cookie的cookie，其值为my_value，过期时间为 3600 秒（1 小时）。然后，服务器将包含Set-Cookie头部的响应发送给客户端。

请注意，这只是一个简单的示例，用于演示在服务器端设置cookie的基本概念。在实际应用中，你可能需要使用更复杂的框架或库来处理 HTTP 请求和响应，并设置cookie。

介绍如何在客户端通过 JavaScript 获取和操作 cookie

在客户端（通常是指浏览器）通过 JavaScript 获取和操作cookie的方法如下：

1. 获取cookie： 使用document.cookie属性可以获取所有存储在浏览器中的cookie。该属性返回一个包含所有cookie的字符串，每个cookie以分号（;）分隔。例如：

var cookies = document.cookie;

要获取特定的cookie，可以使用字符串的split()方法结合正则表达式来提取。例如，要获取名为"myCookie"的cookie的值，可以使用以下代码：

var cookieName = "myCookie";
var cookieValue = document.cookie.split("; ")[0].split("=")[1];

console.log(cookieValue);

2. 设置cookie： 可以使用document.cookie属性来设置新的cookie或更新已存在的cookie。设置cookie时，需要指定cookie的名称、值和其他可选属性，例如过期时间、路径等。例如，要设置一个名为"myCookie"的cookie，其值为"myValue"，过期时间为 7 天，可以使用以下代码：

var cookieName = "myCookie";
var cookieValue = "myValue";
var expireDate = new Date();
expireDate.setTime(expireDate.getTime() + 7 * 24 * 60 * 60 * 1000);

document.cookie = `${cookieName}=${cookieValue}; expires=${expireDate.toUTCString()}; path=/`;

3. 删除cookie： 要删除已存在的cookie，可以将其过期时间设置为过去的时间。例如，要删除名为"myCookie"的cookie，可以使用以下代码：

var cookieName = "myCookie";
var expireDate = new Date();
expireDate.setTime(expireDate.getTime() - 1);

document.cookie = `${cookieName}=; expires=${expireDate.toUTCString()}; path=/`;

需要注意的是，通过 JavaScript 设置或删除cookie可能会受到浏览器的安全设置和同源策略的限制。某些浏览器可能会限制第三方脚本对cookie的操作，或者要求cookie的域名与当前页面的域名相同。在实际应用中，需要考虑这些因素，并确保你的代码在目标浏览器和环境中正常工作。