摘要:详解以及实现一个操作库在前端有着大量的应用,但有时我们对它还是一知半解。若没有设置则是当前主机不包括子域名。现在我们来实现一个的操作库通过设置过期时间来实现删除,也是必须,因为需要知道作用范围,没有设置则会生成一个空的同名属性。
Cookie 详解以及实现一个 cookie 操作库
cookie 在前端有着大量的应用,但有时我们对它还是一知半解。下面来看看它的一些具体的用法
Set-Cookie服务器通过设置响应头来设置客户端的 cookie,形如:
Set-Cookie:=
可以同时添加多个 Set-Cookie,从而设置多个 cookie 的值。
Set-Cookie 有几个可选项:
Expires/Max-AgeExpires/Max-Age 可以设置过期时间。Expires 为某个日期 GMT 格式。Max-Age 为需要经过的秒数。优先级比 Expires 高。没有设置过期时间,则表示是一个会话期 cookie,在关闭浏览器后,会被移除(浏览器支持会话恢复,保留 cookie)。设置了后叫做持久性 cookie。
Domain 和 PathPath 设置必须是匹配的路径或者子路径才会发送 cookie。Domain 标识指定了哪些主机可以接受 Cookie。若没有设置则是当前主机(不包括子域名)。否则则为设置的域名(包括子域名)。
Secure 和 HttpOnlySecure 标志 cookie 只能通过 https 传输。可以防止 xss 攻击。
HttpOnly 表示 cookie 无法通过 javascript 调用。 防止中间人劫持。
可以设置 SameSite:SameSite=Strict SameSite=Lax。则 cookie 不跨域发送。
第三方 cookie如果发送的请求的域和接送的域不同,则请求仍有可能携带目标域的 cookie。如:
new Image.src() = https://google.com/xxxx // 无论该链接是否存在都会发送
该请求会将 google 的 cookie 携带在请求中发送到 google 的服务器上。因此如果 google 只采用 cookie 鉴权的话。那恶意网站就可以为所欲为的进行它想要的操作了。这就是 csrf 的原理之一。
对于 post,ajax 可以标示 withCredentials 从而跨域携带 cookie,fetch 可以设置 credentials:"include"。
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://a.test/hhh12"); xhr.withCredentials = true; xhr.send(); fetch("http://a.test/hhhaaaaa12", { credentials: "include" });
浏览器可以关闭第三方 cookie。(如果应用了 p3p 协议则无法关闭)。
通过第三方 cookie 广告商可以标示用户,从而进行跟踪。
javascript 和 cookie通过 document.cookie 我们可以获取所有非 http-only 标志的 cookie。document.cookie = newCookie 可以一个新的 cookie。
现在我们来实现一个 mini 的 cookie 操作库:
const Minicookie = { getItem(cookieName) { const cookies = document.cookie; const cookieList = cookies ? cookies.split("; ") : []; for (const cookieItem of cookieList) { const [, _cookieName, _cookieValue] = cookieItem.match(/^(.*?)=(.*)/); if (_cookieName === cookieName) { return _cookieValue; } } return void 0; }, setItem(key, value) { document.cookie = `${key}=${value}` }, removeItem(key) { // 通过设置过期时间来实现删除, path也是必须,因为需要知道作用范围,没有设置则会生成一个空的同名属性。 document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/` } };
参考链接
MDN: set-cookie
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/98447.html
摘要:通过加密和安全传输技术,减少被破解的可能性。只在中存放不敏感数据,即使被盗也不会有重大损失。限制每个与最多个和对于每个域的数量限制没有硬性规定。安全性文件中可能含有涉密信息,可能会导致信息泄露。 一、 什么是cookie A cookie is a small stub of information left by a website on a visitors computer th...
摘要:所谓的无连接就是服务器收到了客户端的请求之后,响应完成并收到客户端的应答之后,即断开连接。从而节省传输时间。协议对事务的处理没有记忆能力。这种方式某种方面上讲解放了服务器,但是却不利于客户端与服务器的连接。 session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我...
阅读 2192·2021-11-23 09:51
阅读 997·2021-11-22 15:35
阅读 4709·2021-11-22 09:34
阅读 1507·2021-10-08 10:13
阅读 2987·2021-07-22 17:35
阅读 2419·2019-08-30 15:56
阅读 3043·2019-08-29 18:44
阅读 3047·2019-08-29 15:32