【案例】HTTP Cookie 的运行机制

Jimmy2023-09-06 14:00

问：你知道 cookie ?

答：很好吃的饼干🍪，我很喜欢。

呀呀呀～ 此 cookie 非彼 cookie。

HTTP(Hypertext Transfer protocol，超文本传输协议) 有一个很重要的特点：

无状态性：这也就是说每个请求都是独立的，服务器不会记住之前的请求状态。随着互联网的发展，交互式 Web 兴起，而 HTTP 无状态的特点严重影响其发展。

交互式 Web：客户端与服务器可以交互，比如用户登陆，购物，论坛等

网景公司(Netscape) 当时一名员工 Lou Montulli（卢-蒙特利），在1994年将 cookies 的概念应用于网络通信，用来解决用户网上购物的购物车历史记录问题。到目前为止，所有浏览器都支持 Cookie。

这里的 cookie，指的就是 HTTP Cookie（也叫做 Web Cookie 或者浏览器 Cookie）。Cookie 是服务端发送 到用户浏览器 并保存在浏览器本地的一小块数据。

浏览器会存储 Cookie 并在下一次向同一个服务器再发起请求时携带并发送到服务器上。 Cookie 通过用户的浏览器在服务器和浏览器之间传递。

Cookie 通常包含了一些键值对，用于标识用户和存储相关的信息。

Cookie 的作用是在用户访问同一网站或者相关网站时，用于认证用户、追踪用户行为，存储用户偏好设置等。网站可以通过读取和写入 Cookie 来实现个性化的用户体验，如记住用户的登录状态、购物车内容、语言偏好等等。

上面已经提及了 HTTP 是无状态的。我们在浏览平常的新闻的时候，无需认证，但是，我们在新闻下评论，那就需要认证了。上图给出了简单的 cookie 运行机制的介绍。简单归总如下：

  1. 浏览器发起一个 HTTP 请求，比如用户账号/密码登陆
  2. 服务器端，对用户账号密码进行验证，验证用户通过后，将用户的信息封装成 cookie，比如：ctx.cookies.set('userId', '123456')。然后把设置的 cookie 信息通过 HTTP 响应返回给浏览器
  3. 浏览器接收到返回的 cookie 信息，并将其保存在内存或者硬盘中。然后之后的每次 HTTP 请求都会带上用户的 cookie 信息，比如 userId=123456
  4. 服务端获取到 cookie 信息，解析了 cookie ，获取到用户的信息，这里指 userId=123456，然后返回相关的用户信息

一般来说，具有过期时间的 cookie 存储在硬盘中，方便浏览器关闭后仍然保存；而会话 cookie 存储在内存中，随着浏览器关闭而被删除。

演示

下面，我们来演示如何设置 cookie。

案例的演示环境:

macOS Monterey - Apple M1

node version - v14.18.1

Visual Studio Code 及其 Live Server 插件

我们已经了解了 cookie 的工作流程，下面会分同源和跨源来展示案例。

首先，我们添加个 hostname, 方便测试，当然你可以直接使用 ip 地址测试。

通过 sudo vim /etc/hosts 添加 127.0.0.1 a.example.com 的映射：

同源案例

这里我们使用了 Koa 框架开发服务端，为了方便管理路由，我们引入 koa-router 库，代码如下：

javascript 复制代码 
// index.js
const Koa = require('koa');
const app = new Koa();

const Router = require('koa-router');
const router = new Router();

// 模拟登陆
router.get('/api/same_origin_request', async (ctx, next) => {
  ctx.cookies.set('username', 'same-origin-jimmy');
  ctx.response.body = {
    message: 'Hello! Jimmy.'
  }
});
// 模拟登陆后的请求
router.get('/api/same_origin_another_request', async (ctx, next) => {
  ctx.response.body = {
    message: 'Hello! Ivy.'
  }
});

app.use(router.routes());
app.listen(3000, () => {
  console.log("Server is running on port 3000");
})

上面，我们编写了两个路由，路由 /api/same_origin_request 模拟我们登陆，假设验证了用户/密码，然后设定 username 的 cookie 信息，并返回信息；路由 /api/same_origin_another_request 模拟登陆后，获取指定用户的资源信息（验证是否带上了 cookie 信息发送到服务端）。

我们通过执行 node index.js 运行程序。

通过浏览器，我们访问链接 http://a.example.com:3000/api/same_origin_request：

此时 cookie 信息会自动写入 username=same_origin_jimmy。我们通过面板 Application -> Cookies -> http://a.example.com:3000 查看到相关 cookie 信息：

我们可以看到地址 http://a.example.com:3000 下面保存的 cookie 信息，它们有很多字段，是什么意思呢？

字段 含义
Name cookie 的名称
Value 储存在 cookie 中的数据值
Domain cookie 在哪个域名下创建的，默认是同一 host，如果指定了域名，则包含子域名，比如 Domain=example.com，则 cookie 也包含在子域名中(比如：a.example.com)
Path 指定哪些路径下的请求才会发送相应的 cookie。举例：以 / 为路径分隔符，其子路径也会被匹配
Expires / Max-Age cookie 的过期时间，Expires 是绝对时间，Max-Age 是相对时间，两者的参照时间点是客户端的时间。
Size 表示 Cookie 的大小。见下
HttpOnly 限制客户端脚本对 cookie 访问。提高安全性。
Secure 标记为 Secure 的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端。它永远不会使用不安全的 HTTP 发送（本地主机除外）。
SameSite 允许服务器指定是否/何时通过跨站点请求发送。可能的值有：Strict - cookie 仅发送到它来源的站点； Lax - 与 Strict 相似，只是在用户导航到 cookie 的源站点时发送 cookie，Lax 是默认值；None 指定浏览器会在同源请求和跨域请求下继续发送 cookie，但仅在安全的上下文（即，如果 SameSite=None，且必须设置 Secure 属性）
Partition Key 用于将一个网站的 cookie 划分为多个分区。
Priority Chrome 独有，与 cookie 的删除策略有关

Size 的支持数据来源网络

浏览器 Cookie最大条数 Cookie最大长度/单位：字节
IE 50 4095
Chrome 150 4096
FireFox 50 4097
Opera 30 4096
Safari 无限 4097

好了，我们简单了解了 cookie 的相关参数说明。我们现在通过浏览器打开同源网站的另一个 url 请求 - http://a.example.com:3000/api/same_origin_another_request。这个时候，应该在 Request Headers 中带上 cookie 属性才对。验证如下图：

跨域案例

OK！我们参考上篇文章 - 【案例】同源策略 - CORS 处理 处理里跨域问题。

我们设置简单网页代码：

html 复制代码 
<!-- demo/index.html -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>cookie 信息</title>
</head>
<body>
  <button id="trigger">请求接口</button>

  <script>
    (function() {
      document.getElementById("trigger").addEventListener("click", function() {
        fetch('http://a.example.com:3000', {
          method: 'GET',
          credentials: 'include', // 指示浏览器在跨域请求中包含凭证
        })
      })
    })()
  </script>
</body>
</html>

上面我们添加了按钮 请求接口，点击该接口，触发请求。该 fetch 请求中，需要留意 credentials: 'include：它指示浏览器在跨域请求中包含凭证，例如 cookie 信息。

credentials 有值如下：

值 含义
same-origin 只在同源 请求中包含凭证信息，为默认值。
include 在跨域请求中包含凭证信息。需要确保目标服务器明确允许跨域请求的凭证信息。
omit 忽略凭证信息。无论是同源请求还是跨域请求，在请求中都不包含凭证信息。

使用 credentials: 'include' 选项时，要确保在发送跨域请求时的源（Origin）不是通配符（*），而是明确指定的域名。这是出于安全性考虑，以防止凭证信息泄露给不受信任的域名。

服务端的代码设置如下：

javascript 复制代码 
// index.js
const Koa = require('koa');
const app = new Koa();

const Router = require('koa-router');
const router = new Router();

// 允许跨域白名单
const originArray = [
  'http://a.example.com:5500',
  'http://a.example.com:5501'
];

// 测试跨源
router.get('/api/cross_origin_request', async (ctx, next) => {
  const { origin } = ctx.request.header;
  ctx.set('Access-Control-Allow-Origin', originArray.includes(origin) ? origin : null);
  // 允许发送凭证信息（如 cookie）
  ctx.set('Access-Control-Allow-Credentials', 'true');
  ctx.cookies.set('username', 'cross_origin_jimmy');
  ctx.response.body = {
    message: 'Hello! Jimmy.'
  }
});
router.get('/api/cross_origin_another_request', async (ctx, next) => {
  const { origin } = ctx.request.header;
  ctx.set('Access-Control-Allow-Origin', originArray.includes(origin) ? origin : null);
  ctx.set('Access-Control-Allow-Credentials', 'true');
  ctx.response.body = {
    message: 'Hello! Ivy.'
  }
})

app.use(router.routes());

app.listen(3000, () => {
  console.log("Server is running on port 3000");
})

上面代码中，我们通过 http://a.example.com:5500/api/cross_origin_request 接口模拟了用户登陆并设置了允许跨域中携带凭证 Access-Control-Allow-Credentials，然后设置了返回的 cookie 信息。

当 demo/index.html 文件发起的模拟登陆请求中，缺少 credentials: 'include'，在跨域中，虽然请求在 Response Headers 上返回的 cookie，但是浏览器并不会存储它，如下图：

当在该模拟登陆的接口 /api/cross_origin_request 中添加了 credentials: 'include'，则浏览器会保存 cookie 在内存或者硬盘中。 credentials: 'include' 指示浏览器在跨域请求中包含凭证。

上面服务端的代码中，我们还添加了一个模拟登陆后发起的请求 http://a.example.com:5501/api/cross_origin_another_request 接口。

细心的读者会发现，两个请求的地址源不一样 http://a.example.com:5500 和 http://a.example.com:5501。这样做只是想验证下另外一个域名是否会存储 cookie 而已。

另一个站点的代码如下：

html 复制代码 
<!-- another_demo/index.html -->

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Another site for cookie</title>
</head>
<body>
  <button id="trigger">另一个请求</button>
  <script>
    (function() {
      document.getElementById("trigger").addEventListener("click", function() {
        fetch('http://a.example.com:3000/api/cross_origin_another_request', {
          method: 'GET',
          credentials: 'include'
        })
      })
      
    })()
  </script>
</body>
</html>

当我们自动打开该网页 http://a.example.com:5501/，在 Application -> Cookies -> http://a.example.com:5501 下看到写入的 cookie 信息。如下图：

我们触发页面 另一个请求 按钮，发现请求头中，自动带上了 cookie 信息：

上面，我们讲了很多 cookie 的好处，比如用户认证。那么，cookie 有什么缺点呢？

  • 存储限制 ：cookie 只能存储有限的数据量。如果一个站点设置了过多或者过大的 cookie，可能导致浏览器性能下降或者无法正常工作。主流浏览器对同一域名下的 cookie 限制在几百到一千之间；对其大小通常在几 KB 到几十 KB 之间，见上表格。
  • 隐私问题 ：cookie 是明文存储在用户浏览器上。因此容易被直接恶意读取，尤其是敏感信息。
  • 安全问题 ：因为 cookie 是在客户端浏览器上存储，所以容易受到网络攻击。比如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。黑客可能利用这些漏洞来获取用户的 Cookie 信息，冒充用户进行非法操作。关于 XSS 和 CSRF 后面会有一篇文章探讨。
  • 用户操控 cookie ：虽然用户可以通过浏览器管理 cookie，但是他们可能没有意识到自己的行为会留下或者删掉 cookie。

替代方案可有：session, localStorage 等，这里不展开探讨。

参考

相关推荐
IT女孩儿1 小时前
CSS查缺补漏（补充上一条）
前端·css
2401_857610031 小时前
SpringBoot社团管理：安全与维护
spring boot·后端·安全
凌冰_2 小时前
IDEA2023 SpringBoot整合MyBatis（三）
spring boot·后端·mybatis
码农飞飞2 小时前
深入理解Rust的模式匹配
开发语言·后端·rust·模式匹配·解构·结构体和枚举
一个小坑货2 小时前
Rust 的简介
开发语言·后端·rust
吃杠碰小鸡2 小时前
commitlint校验git提交信息
前端
monkey_meng2 小时前
【遵守孤儿规则的External trait pattern】
开发语言·后端·rust
虾球xz2 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
Estar.Lee2 小时前
时间操作[计算时间差]免费API接口教程
android·网络·后端·网络协议·tcp/ip
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
热门推荐
01【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07【postgresql 基础入门】多表联合查询 join与union 并，交，差等集合操作，两者的区别之处08玄机平台应急响应—webshell查杀09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10IT专业入门，高考假期预习指南