浅谈Cookie、HttpOnly那点事儿

一. Cookie介绍

众说周知，Cookie 在浏览器里可以保存一些例如 tokenId 等的一些控制系统登 录状态的数据。通过 Cookie 和 Session 技术来实现记录访问者的一些基本信息, Cookie 可以翻译为“小甜品，小饼干” ，Cookie 几乎在所有的网络中都会出现，Cookie 实际上是指小量信息，是由 Web 服务器创建的，将信息存储在用户计算机上的文件。一般习惯用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 Session 跟踪而存储在用户本地终端上的数据，而这些数据通常会经过加密处理。
有些Cookie 是有限制的，一旦超过时间限制，就会被系统删除。很多人担心Cookie 会泄露用户的一些信息。但这是多余的，Cookie 是不能通过跨域来访问的，还有一些对象是不能脱离Cookie 来实现的，比如Session。这里还有一个点，就是客户端Cookie 数量最多为300个，每个不能超过4kb, 每个web站点设置的cookie 数量不能超过20个。

MDN cookie详解

二.JS 操作 Cookie

一般来说，只有服务器操作Cookie 才能保证一些必要的安全。但有时候，可能需要前端来增删改查 Cookie, 这个时候咱们的主角出现了——HttpOnly
HttpOnly是包含在Set-Cookie HTTP响应头文件中的附加标志。生成cookie时使用HttpOnly标志有助于降低客户端脚本访问受保护cookie的风险（如果浏览器支持）。

这个意思就是说，如果某一个Cookie 选项被设置成 HttpOnly = true 的话，那此Cookie 只能通过服务器端修改，JS是操作不了的，对于 document.cookie 来说是透明的。

aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi01NTYyN2FmMDYyMjFjNjM4YWMyNzRmZTc2MmYwZjk0OV9oZC5qcGc.jpg

以 Google 翻译为例子，初次打开时，Cookie里面是这样的一共有4条记录，注意第二个最右侧倒数第三个字段有一个√， 这个对勾表明这条记录是 HttpOnly = true 的，对于JS，你是拿不到的。我们来试一下：

aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi02MGI1ZjdmMTcwMWNkMTg4NTdmNmNjMGU3ZWY0NTAxZV9oZC5qcGc.jpg

JS获取Cookie 的时候就会跳过HttpOnly = true 的Cookie 记录。当然，既然拿不到，那就跟别说删改了。