浏览器 cookie 的原理（详）

目录

  • 1，cookie 的出现
  • 2，cookie 的组成
    • 浏览器自动发送 cookie 的条件
  • 3，设置 cookie
    • 3.1，服务端设置
    • 3.1，客户端设置
    • 3.3，删除 cookie
  • 4，使用流程总结

整理和测试花了很大时间，如果对你有帮助，可以点个关注哇，也有其他干货哦~

1，cookie 的出现

浏览器和服务器之间的传输使用的 HTTP 协议，而它是无状态的。也就是说，每个请求都是独立的，服务器并不知道2次请求是否是同一个人。

为了解决这个问题，服务器想了一个办法：

当客户端登录成功后，服务器会给客户端一个令牌凭证 token；客户端后续的请求都需要带着这个 token 在服务器做验证。

但用户不可能只在一个网站登录，于是客户端会收到各个网站的出入证 token。所以客户端需要一个 “卡包” 来实现以下功能：

  • 能够存放多个 token，token 可能来自不同的网站，也可能一个网站有多个 token。
  • 能够自动出示正确的 token，客户端访问不同网站时，会自动在请求中带着对应的 token。
  • 管理 token 的有效期，客户端需要自动发现那些过期的 token 并移除。

满足上述要求的就是 cookie，每一个 token 就是一个 cookie。

每个网站的 cookie 大小不超过 4kb。

2，cookie 的组成

每一个 cookie 都记录了以下信息：（除了 key 和 value，其他非必填+顺序无关）

  1. key：键，比如表示身份编号的字符串 token

  2. value：值，比如 123abc，它可以是任何字符串。

  3. domain：主机（域），表示这个 cookie 是属于哪个网站的，比如 www.csdn.net。【默认值：当前主机，也就是 location.host】MDN参考

  4. path：路径，表示这个 cookie 是属于该网站的哪个路径。【默认值：实测发现是 cookie 所处目录的上级目录。比如页面是 http://localhost:3001/a/api/login，则 path 为 /a/api】

  5. secure：是否使用安全传输。MDN参考

  6. httpOnly：表示该 cookie 仅能用于传输，而客户端通过 document.cookie 获取的是空字符串，这对防止跨站脚本攻击（XSS）会很有用。

    XSS：比如当前页面打开 iframe，iframe 可以获取父级的 cookie。设置 httponly 可以不允许 js 获取来防止跨站脚本攻击。

  7. expires：过期时间，表示该 cookie 在什么时候过期。MDN 参考

  8. max-age：有效期。【默认值：如果 expires 和 max-age 都不设置，则为 session，也就是会话结束后过期，大多浏览器关闭（注意不是标签页关闭）意味着会话结束。】
    在这里插入图片描述

    expires 和 max-age 一般只设置一个即可。

浏览器自动发送 cookie 的条件

需要同时满足以下4个条件：

  1. 没有过期。
    • expires 必须是一个有效的GWT时间，格林威治标准时间字符串，比如 Fri, 22 Dec 2023 17:09:13 GMT。到期后浏览器会自动删除。
    new Date().toGMTString() // Fri, 22 Dec 2023 17:09:13 GMT
// 对比常见的时间格式：
new Date() // Sat Dec 23 2023 01:09:13 GMT+0800 (中国标准时间)
    • max-age 是相对有效期，比如 max-age=1000，相当于设置 expires=当前时间 + 1000s
  2. domain 字段和这次请求的域是匹配的。
    • 设置的 domain 是 csdn.net，则可匹配的请求域有：csdn.net、www.csdn.net、blogs.csdn.net等。
    • 设置的 domain 是www.csdn.net，则只能匹配 www.csdn.net 这样的请求域。
    • cookie 是不关心端口的，只要域匹配即可。
    • 无效的域，浏览器的是不认的。比如对 https://search.jd.com/Search?keyword=xxx 网页来说：

在这里插入图片描述

【翻译：通过 Set-Cookie 标头设置 cookie 的尝试被阻止，因为其域对于当前域无效】
  1. path 字段和这次请求的 path 也是匹配的。/ 表示匹配所有。如果是 /docs：
    • 匹配的路径：/docs，/docs/，/docs/Web/，/docs/Web/HTTP
    • 不匹配的路径：/，/docsets，/fr/docs
  2. secure 字段验证。设置该字段，则请求协议必须是 https（否则不发送 cookie）；不设置则请求协议可以是 https 或 http。

浏览器会将符合条件的 cookie，自动添加到请求头 Cookie 中。下图可以看到有3个满足的 cookie，以 ; 分隔。

在这里插入图片描述

3，设置 cookie

cookie 是保存在浏览器端的，有2种设置模式：

  • 服务器设置：通过设置响应头 set-cookie: 123abc，浏览器会自动保存在 “卡包” 中。查看方式：控制台–>Application–> Storage–>Cookies
  • 浏览器设置：这种情况比较少见。举例：用户关闭了广告时勾选了【不喜欢】或其他原因，就可以把这种小信息直接通过 js 保存到 cookie 中。后续请求服务器时，服务器会根据这个信息调整广告投放。

3.1，服务端设置

可在一次响应中设置多个 cookie。格式如下：

键=值; path=?; domain=?; expires=?; max-age=?; secure; httponly

举例：

// 服务端
const Koa = require("koa");
const Router = require("koa-router");
const { bodyParser } = require("@koa/bodyparser");

const app = new Koa();
const router = new Router();

router.post("/api/login", (ctx) => {
  const { name, pwd } = ctx.request.body;
  if (name === "下雪天的夏风" && pwd === "123") {
    ctx.set("set-cookie", 'token=aaa; domain=localhost; max-age=3600;secure; httponly');
    ctx.body = "登录成功";
  } else {
    ctx.body = {
      code: 500,
      msg: "用户名或密码错误",
    };
  }
});

router.get("/api/home", (ctx) => {
  ctx.body = "home";
});

app.use(bodyParser()).use(router.routes());
app.listen(3000);

<!-- 前端 -->
<form action="http://localhost:3000/api/login" method="post" target="_blank">
  <input type="text" name="name" />
  <input type="password" name="pwd" />
  <button>提交</button>
</form>

form 表单发送请求登录成功后，会自动跳转到页面 http://localhost:3000/api/login，可以看到 cookie 已经设置了：

在这里插入图片描述

  • 注意到 path 的默认值是 cookie 所处目录的上级目录。
  • expires/max-age 的时间格式保存为 ISO国际标准时间
new Date() // Sat Dec 23 2023 01:27:53 GMT+0800 (中国标准时间)
new Date().toISOString() // 2023-12-22T17:27:53.738Z
new Date().toGMTString() // Fri, 22 Dec 2023 17:27:53 GMT

再次访问 http://localhost:3000/api/home 时，会发现请求头中自动带上了 cookie：

在这里插入图片描述

3.1，客户端设置

格式和在服务端相同，只是 httponly 字段无效。因为该字段本来就是限制在客户端访问的，客户端设置它没有意义。

document.cookie = 'token=aaa; domain=localhost;secure;httponly'

在这里插入图片描述

3.3，删除 cookie

可以修改 cookie 的过期时间即可：max-age=-1。浏览器会自动删除。

可以让服务器响应一个同样的 domain、同样的 path、同样的 key，只是时间过期的 cookie 即可。

以上面的例子来说，设置如下：

ctx.set("set-cookie", 'token=aaa; domain=localhost; max-age=-1');

或客户端删除：

document.cookie = 'token=aaa; domain=localhost; max-age=-1'

注意：无论是修改还是删除，都需要注意 domain 和 path，因为可能存在 domain 和 path 不同但 key 相同的 cookie。

4，使用流程总结

登录 / 注册请求：

  1. 浏览器发送用户名和密码到服务器。
  2. 服务器验证通过后，在响应头中设置 cookie，附带登录认证信息（一般为 jwt）。
  3. 浏览器收到 cookie 保存下来。

后续请求，浏览器会自动将符合的 cookie 附带到请求中；服务器验证 cookie 后，允许其他操作完成业务流程。

以上。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/264606.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

python调用GPT API

python调用GPT API

每次让gpt给我生成一个调用api的程序时&#xff0c;他经常会调用以前的一些api的方法&#xff0c;导致我的程序运行错误&#xff0c;所以这期记录一下使用新的方法区调用api 参考网址 Migration Guide&#xff0c;这里简要地概括了一下新版本做了哪些更改 OpenAI Python API l…
阅读更多...
引领汽车营销新趋势，3DCAT实时云渲染助力汽车三维可视化

引领汽车营销新趋势，3DCAT实时云渲染助力汽车三维可视化

当前&#xff0c;汽车产业发展正从电动化的上半场&#xff0c;向智能化的下半场迈进。除了车机技术体验的智能化之外&#xff0c;观车体验的智能化也不容忽视。 这是因为&#xff0c;随着数字化、智能化、个性化的趋势&#xff0c;消费者对汽车的需求和期待也越来越高&#xf…
阅读更多...
2016年第五届数学建模国际赛小美赛B题直达地铁线路解题全过程文档及程序

2016年第五届数学建模国际赛小美赛B题直达地铁线路解题全过程文档及程序

2016年第五届数学建模国际赛小美赛 B题 直达地铁线路 原题再现&#xff1a; 在目前的大都市地铁网络中&#xff0c;在两个相距遥远的车站之间运送乘客通常需要很长时间。我们可以建议在两个长途车站之间设置直达班车&#xff0c;以节省长途乘客的时间。   第一部分&#xf…
阅读更多...
Qt的简单游戏实现提供完整代码

Qt的简单游戏实现提供完整代码

文章目录 1 项目简介2 项目基本配置2.1 创建项目2.2 添加资源 3 主场景3.1 设置游戏主场景配置3.2 设置背景图片3.3 创建开始按钮3.4 开始按钮跳跃特效实现3.5 创建选择关卡场景3.6 点击开始按钮进入选择关卡场景 4 选择关卡场景4.1场景基本设置4.2 背景设置4.3 创建返回按钮4.…
阅读更多...
Java面向对象（初级）

Java面向对象（初级）

面向对象编程(基础) 面向对象编程&#xff08;OOP&#xff09;是一种编程范式&#xff0c;它强调程序设计是围绕对象、类和方法构建的。在面向对象编程中&#xff0c;程序被组织为一组对象&#xff0c;这些对象可以互相传递消息。面向对象编程的核心概念包括封装、继承和多态。…
阅读更多...
2023.12.21 关于 Redis 常用数据结构 和 单线程模型

2023.12.21 关于 Redis 常用数据结构 和 单线程模型

目录 各数据结构具体编码方式 查看 key 对应 value 的编码方式 Reids 单线程模型 经典面试题 IO 多路复用 Redis 常用数据结构 Redis 中所有的 key 均为 String 类型&#xff0c;而不同的是 value 的数据类型却有很多种以下介绍 5 种 value 常见的数据类型 注意&#xff1…
阅读更多...
阿里云 ACK One 新特性：多集群网关，帮您快速构建同城容灾系统

阿里云 ACK One 新特性：多集群网关，帮您快速构建同城容灾系统

云布道师 近日&#xff0c;阿里云分布式云容器平台 ACK One[1]发布“多集群网关”[2]&#xff08;ACK One Multi-cluster Gateways&#xff09;新特性&#xff0c;这是 ACK One 面向多云、多集群场景提供的云原生网关&#xff0c;用于对多集群南北向流量进行统一管理。 基于 …
阅读更多...
虚拟机的下载、安装(模拟出服务器)

虚拟机的下载、安装(模拟出服务器)

下载 vmware workstation&#xff08;收费的虚拟机&#xff09; 下载vbox 网址&#xff1a;Oracle VM VirtualBox&#xff08;免费的虚拟机&#xff09; 以下选择一个下载即可&#xff0c;建议下载vbox&#xff0c;因为是免费的。安装的时候默认下一步即可&#xff08;路径最好…
阅读更多...
hiveserver负载均衡配置

hiveserver负载均衡配置

一.安装nginx 参数我的另一篇文章&#xff1a;https://mp.csdn.net/mp_blog/creation/editor/135152478 二.配置nginx服务参数 worker_processes 1; events { worker_connections 1024; } stream { upstream hiveserver2 { # least_conn; # 使用最少连接路由…
阅读更多...
八大排序算法@直接插入排序（C语言版本）

八大排序算法@直接插入排序（C语言版本）

目录 直接插入排序概念算法思想代码实现核心算法&#xff1a;直接插入排序的算法实现&#xff1a; 特性总结 直接插入排序 概念 算法思想 把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为止&#xff0c;得到一个新…
阅读更多...
【Spring实战】配置多数据源

【Spring实战】配置多数据源

文章目录 1. 配置数据源信息2. 创建第一个数据源3. 创建第二个数据源4. 创建启动类及查询方法5. 启动服务6. 创建表及做数据7. 查询验证8. 详细代码总结 通过上一节的介绍&#xff0c;我们已经知道了如何使用 Spring 进行数据源的配置以及应用。在一些复杂的应用中&#xff0c;…
阅读更多...
文档 - - - Docsify文档创建

文档 - - - Docsify文档创建

目录 1. Docsify 介绍2. 创建 Docsify 项目2.1 安装 Node.js2.1 安装 docsfiy-cli2.3 初始化项目2.4 运行项目2.5 使用 Python 运行项目&#xff08;扩展&#xff0c;不推荐有bug&#xff09; 3. 配置 Docsify 项目3.1 修改等待加载文字3.2 添加网站 ico 图标3.3 创建新页面写文…
阅读更多...
python 用OpenCV 将图片转视频

python 用OpenCV 将图片转视频

import os import cv2 import numpy as npcv2.VideoWriter&#xff08;&#xff09;参数 cv2.VideoWriter() 是 OpenCV 中用于创建视频文件的类。它的参数如下&#xff1a; filename&#xff1a;保存视频的文件名。 fourcc&#xff1a;指定视频编解码器的 FourCC 代码&#xf…
阅读更多...
SVM —— 代码实现

SVM —— 代码实现

SMO 算法的实现步骤&#xff1a; 代码如下&#xff1a; import numpy as np import matplotlib.pyplot as plt import seaborn as sns import random# 设置中文字体为宋体&#xff0c;英文字体为 times new roman sns.set(font"SimSun", style"ticks", fo…
阅读更多...
webpack学习-7.创建库

webpack学习-7.创建库

webpack学习-7.创建库 1.暴露库1.1概念1.2验证1.2.1 不导出方法1.2.2 导出方法 2.外部化 lodash3.外部化的限制4.最终步骤5.使用自己的库5.1坑 6.总结 1.暴露库 这个模块学习有点坑。看名字就是把自己写的个包传到npm&#xff0c;而且还要在项目中使用到它&#xff0c;支持各种…
阅读更多...
java类和对象的思想概述

java类和对象的思想概述

0.面向对象Object OOP——名人名言&#xff1a;类是写出来的&#xff0c;对象是new出来的 **> 学习面向对象的三条路线 java类以及类成员&#xff1a;&#xff08;重点&#xff09;类成员——属性、方法、构造器、&#xff08;熟悉&#xff09;代码块、内部类面向对象特征&…
阅读更多...
在Next.js和React中搭建Cesium项目

在Next.js和React中搭建Cesium项目

在Next.js和React中搭建Cesium项目&#xff0c;需要确保Cesium能够与服务端渲染(SSR)兼容&#xff0c;因为Next.js默认是SSR的。Cesium是一个基于WebGL的地理信息可视化库&#xff0c;通常用于在网页中展示三维地球或地图。下面是一个基本的步骤&#xff0c;用于在Next.js项目中…
阅读更多...
VideoPoet: Google的一种用于零样本视频生成的大型语言模型

VideoPoet: Google的一种用于零样本视频生成的大型语言模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
SpringCloud Alibaba(itheima)

SpringCloud Alibaba(itheima)

SpringCloud Alibaba 第一章 微服务介绍1.1系统架构演变1.1.1单体应用架构1.1.2垂直应用架构1.1.3分布式架构1.1.4 SOA架构1.1.5微服务架构 1.2微服务架构介绍1.2.1微服务架构的常见问题1.2.2微服务架构的常见概念1.2.3微服务架构的常见解决方案 1.3 SpringCloud Alibaba介绍1.…
阅读更多...
【clickhouse】在CentOS中离线安装clickhouse

【clickhouse】在CentOS中离线安装clickhouse

一、下载地址 通过以下链接进行rpm安装包的下载 https://packages.clickhouse.com/rpm/stable/ 根据需求下载对应版本 注意&#xff1a;ClickHouse 20.8.2.3版本新增加了 MaterializeMySQL 的 database 引擎&#xff0c;该 database 能映射到 MySQL 中的某个 database&#…
阅读更多...
最新文章

Copyright @ 2022~2023