js-cookie的使用以及存储token安全的注意要点

npm 安装

复制代码

npm i js-cookie -S
// https://www.npmjs.com/package/js-cookie

引入使用

复制代码

import Cookies from 'js-cookie'

获取

复制代码

Cookies.get('token'); // 读取token
Cookies.get() // 读取所有可见的 Cookie => { 'token': 'value' }

设置

复制代码

cookies.set(名称，[值]，[options])

maxAge：一个数字，表示自Date.now()到期起的毫秒数
expires：一个Date对象，指示cookie的过期日期（默认在会话结束时过期）。默认：天
path：一个字符串，指示cookie的路径（/默认情况下）。
domain：一个字符串，指示cookie的域（无默认值）。
secure：一个布尔值，指示cookie是否仅通过HTTPS发送（false默认情况下，对于HTTP，true默认情况下，对于HTTPS）。在下面阅读有关此选项的更多信息。
httpOnly：一个布尔值，指示cookie是否仅通过HTTP（S）发送，并且不提供给客户端JavaScript（true默认情况下）。
sameSite：布尔值或字符串，指示cookie是"相同站点" cookie（false默认情况下）。可以将其设置为'strict'，'lax'或true（映射到'strict'）。
signed：一个布尔值，指示是否要对cookie进行签名（false默认情况下）。如果为真，.sig则还将发送另一个具有后缀的同名Cookie，其27字节的url安全base64 SHA1值表示针对第一个Keygrip密钥的cookie-name = cookie-value的哈希值。此签名密钥用于检测下次接收cookie时的篡改。
overwrite：一个布尔值，指示是否覆盖以前设置的同名Cookie（false默认情况下）。如果是这样，则在设置此Cookie时，将从相同名称的同一个请求中设置的所有Cookie（无论路径或域如何）都从Set-Cookie标头中过滤掉。

// 创建一个在整个站点上有效的 cookie
Cookies.set('token', '要设置的token');
// 创建一个 cookie，该 cookie 从现在起 7 天后过期，在整个网站上有效
Cookies.set('token', 'value', { expires: 7 })
// 创建一个即将过期的 cookie，对当前页面的路径有效
Cookies.set('token', 'value', { expires: 7, path: '' })

删除

复制代码

Cookies.remove('token');

为了提高token的安全性,防止CSRF攻击

1、我们最好在设置存储token的时候增加SameSite属性,SameSite属性可以设置为Strict、Lax或None。

Strict: cookie只会在同源请求中发送
Lax: cookie会在同源请求和顶级导航(比如链接点击)中发送
None: cookie会在所有请求中发送，但这需要Secure属性同时设置为true

Cookies.set('token', 'value', { SameSite: 'Lax'})

2、使用CSRF Token：在每个请求中添加一个随机生成的CSRF Token，然后在服务器端验证这个Token。如果Token不匹配，那么请求将被拒绝。

3、使用Referer Header：在服务器端检查Referer Header，如果请求不是来自同一源，那么请求将被拒绝。

为了提高token的安全性,防止XSS攻击

1、配置httpOnly和secure

将httpOnly设为true,这样即使网站受到XSS攻击，攻击者也无法通过JavaScript访问到cookie
将secure设为true，强制启用https安全协议

Cookies.set('token', 'value', { SameSite: 'Lax', httpOnly: true, secure: true})

2、启用Content Security Policy，简称CSP内容安全策略集配置，限制浏览器只加载和执行来自特定源的脚本，从而防止XSS攻击;

3、对用户输入进行验证和转义：对所有用户输入进行验证，并对特殊字符进行转义，以防止恶意脚本被执行。