Http Cookie总结（一）

avatar
前端开发工程师 @豌豆公主

我们知道http协议是无状态的，服务器端无法判断用户的状态，那么我们需要有一种方式告诉服务端当前请求的用户是谁，这种方式就是cookie；有了cookie之后服务端可以知道当前请求用户的状态。本文主要介绍cookie的基础，下一节将深入介绍cookie的使用。

1、什么是cookie

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。当然，要不要发送cookie其实是开发者可以控制的。后面我会通过demo给大家展示cookie的使用方式。

2、cookie的作用

知道了cookie其实就是存在浏览器端的一小块数据，那么它有什么作用呢？可以想象一个场景：当你浏览购物网站的时候，看中了一件商品，然后加入了购物车，这时你突然有事需要外出，然后你关闭了电脑；等你回来之后想起来你还有东西要买，然后你打开电脑，打开购物网站，打开购物车，发现商品还在。那服务端怎么知道还是你这个人浏览的网站呢？其实这就是cookie的一个作用，可以记录用户的登录状态和用户的一些信息。
当然，cookie还可以用在其他的方面：

  • 个性化设置（如用户自定义设置、主题等）
  • 浏览器行为跟踪（如跟踪分析用户行为等

3、如何使用cookie

  • 设置cookie cookie的设置有两种方式，一种是通过Document.cookie设置，另一种是通过服务端设置；
    （1）js操作
    通过js设置cookie的方式很简单：
document.cookie = 'my_token=abc';

image.png 这样就在浏览器中设置了一个name为my_token的cookie了； 也可以通过这个方式获取cookie：

let cookies = document.cookie;
console.log(cookies); // "my_token=abc"

（2）服务端设置
服务端在响应请求的时候，header中设置set-cookie就可以设置cookie了：

// 设置cookie，注意一点：set-cookie要在writeHead之前，否则会报错，也就是需要在响应客户端之前设置
response.setHeader('Set-Cookie', ['server_cookie=aaa']);
response.writeHead(200, {
    'Content-Type': 'text/html'
});

image.png

  • 服务端接收cookie
    浏览器在发出一个请求之后默认的会把cookie放在请求头中发送到服务端：

image.png 这就是为什么cookie中不要设置太多的数据的原因。

4、cookie的安全

既然cookie可以记录用户的登录状态，那么它的安全是不容忽视的。
有两种方法可以确保 Cookie 被安全发送，并且不会被意外的参与者或脚本访问：Secure 属性和HttpOnly 属性。
Secure

标记为 Secure 的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端，因此可以预防 man-in-the-middle 攻击者的攻击。但即便设置了 Secure 标记，敏感信息也不应该通过 Cookie 传输，因为 Cookie 有其固有的不安全性，Secure 标记也无法提供确实的安全保障, 例如，可以访问客户端硬盘的人可以读取它。 HttpOnly JavaScript Document.cookie API 无法访问带有 HttpOnly 属性的cookie；此类 Cookie 仅作用于服务器。例如，持久化服务器端会话的 Cookie 不需要对 JavaScript 可用，而应具有 HttpOnly 属性。此预防措施有助于缓解跨站点脚本（XSS）攻击。

5、小结

以上介绍了cookie的定义、cookie的基本设置，非常简单，但是cookie在使用的时候并不是那么简单的，下一篇文章会详细介绍cookie的设置、cookie的安全、cookie的其他属性。

avatar
文章
阅读
粉丝