Cookie 详解以及实现一个 cookie 操作库
cookie 在前端有着大量的应用，但有时我们对它还是一知半解。下面来看看它的一些具体的用法
Set-Cookie
服务器通过设置响应头来设置客户端的 cookie，形如：
Set-Cookie: <cookie名>=<cookie值>
可以同时添加多个 Set-Cookie，从而设置多个 cookie 的值。
Set-Cookie 有几个可选项：
Expires/Max-Age
Expires/Max-Age 可以设置过期时间。Expires 为某个日期 GMT 格式。Max-Age 为需要经过的秒数。优先级比 Expires 高。没有设置过期时间，则表示是一个会话期 cookie，在关闭浏览器后，会被移除（浏览器支持会话恢复，保留 cookie）。设置了后叫做持久性 cookie。
Domain 和 Path
Path 设置必须是匹配的路径或者子路径才会发送 cookie。Domain 标识指定了哪些主机可以接受 Cookie。若没有设置则是当前主机（不包括子域名）。否则则为设置的域名（包括子域名）。
Secure 和 HttpOnly
Secure 标志 cookie 只能通过 https 传输。可以防止 xss 攻击。
HttpOnly 表示 cookie 无法通过 javascript 调用。 防止中间人劫持。
SameSite
可以设置 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=/`
}
};
参考链接
原文地址：