鹤岗手机网站建设,wordpress国内现状,凡科建站的网址,电脑大型网络游戏排行目录 1#xff0c;cookie 的出现2#xff0c;cookie 的组成浏览器自动发送 cookie 的条件 3#xff0c;设置 cookie3.1#xff0c;服务端设置3.1#xff0c;客户端设置3.3#xff0c;删除 cookie 4#xff0c;使用流程总结 整理和测试花了很大时间#xff0c;如果对你有… 目录 1cookie 的出现2cookie 的组成浏览器自动发送 cookie 的条件 3设置 cookie3.1服务端设置3.1客户端设置3.3删除 cookie 4使用流程总结 整理和测试花了很大时间如果对你有帮助可以点个关注哇也有其他干货哦~ 1cookie 的出现
浏览器和服务器之间的传输使用的 HTTP 协议而它是无状态的。也就是说每个请求都是独立的服务器并不知道2次请求是否是同一个人。 为了解决这个问题服务器想了一个办法
当客户端登录成功后服务器会给客户端一个令牌凭证 token客户端后续的请求都需要带着这个 token 在服务器做验证。 但用户不可能只在一个网站登录于是客户端会收到各个网站的出入证 token。所以客户端需要一个 “卡包” 来实现以下功能
能够存放多个 tokentoken 可能来自不同的网站也可能一个网站有多个 token。能够自动出示正确的 token客户端访问不同网站时会自动在请求中带着对应的 token。管理 token 的有效期客户端需要自动发现那些过期的 token 并移除。
满足上述要求的就是 cookie每一个 token 就是一个 cookie。 每个网站的 cookie 大小不超过 4kb。 2cookie 的组成
每一个 cookie 都记录了以下信息除了 key 和 value其他非必填顺序无关 key键比如表示身份编号的字符串 token value值比如 123abc它可以是任何字符串。 domain主机域表示这个 cookie 是属于哪个网站的比如 www.csdn.net。【默认值当前主机也就是 location.host】MDN参考 path路径表示这个 cookie 是属于该网站的哪个路径。【默认值实测发现是 cookie 所处目录的上级目录。比如页面是 http://localhost:3001/a/api/login则 path 为 /a/api】 secure是否使用安全传输。MDN参考 httpOnly表示该 cookie 仅能用于传输而客户端通过 document.cookie 获取的是空字符串这对防止跨站脚本攻击XSS会很有用。 XSS比如当前页面打开 iframeiframe 可以获取父级的 cookie。设置 httponly 可以不允许 js 获取来防止跨站脚本攻击。 expires过期时间表示该 cookie 在什么时候过期。MDN 参考 max-age有效期。【默认值如果 expires 和 max-age 都不设置则为 session也就是会话结束后过期大多浏览器关闭注意不是标签页关闭意味着会话结束。】 expires 和 max-age 一般只设置一个即可。
浏览器自动发送 cookie 的条件
需要同时满足以下4个条件
没有过期。 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 GMT0800 (中国标准时间)max-age 是相对有效期比如 max-age1000相当于设置 expires当前时间 1000s 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?keywordxxx 网页来说 【翻译通过 Set-Cookie 标头设置 cookie 的尝试被阻止因为其域对于当前域无效】path 字段和这次请求的 path 也是匹配的。/ 表示匹配所有。如果是 /docs 匹配的路径/docs/docs//docs/Web//docs/Web/HTTP不匹配的路径//docsets/fr/docs 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, tokenaaa; domainlocalhost; max-age3600;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 actionhttp://localhost:3000/api/login methodpost target_blankinput typetext namename /input typepassword namepwd /button提交/button
/formform 表单发送请求登录成功后会自动跳转到页面 http://localhost:3000/api/login可以看到 cookie 已经设置了 注意到 path 的默认值是 cookie 所处目录的上级目录。expires/max-age 的时间格式保存为 ISO国际标准时间
new Date() // Sat Dec 23 2023 01:27:53 GMT0800 (中国标准时间)
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 tokenaaa; domainlocalhost;secure;httponly3.3删除 cookie
可以修改 cookie 的过期时间即可max-age-1。浏览器会自动删除。
可以让服务器响应一个同样的 domain、同样的 path、同样的 key只是时间过期的 cookie 即可。
以上面的例子来说设置如下
ctx.set(set-cookie, tokenaaa; domainlocalhost; max-age-1);或客户端删除
document.cookie tokenaaa; domainlocalhost; max-age-1注意无论是修改还是删除都需要注意 domain 和 path因为可能存在 domain 和 path 不同但 key 相同的 cookie。 4使用流程总结
登录 / 注册请求
浏览器发送用户名和密码到服务器。服务器验证通过后在响应头中设置 cookie附带登录认证信息一般为 jwt。浏览器收到 cookie 保存下来。
后续请求浏览器会自动将符合的 cookie 附带到请求中服务器验证 cookie 后允许其他操作完成业务流程。 以上。
