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

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、对用户输入进行验证和转义:对所有用户输入进行验证,并对特殊字符进行转义,以防止恶意脚本被执行。

相关推荐
wakangda30 分钟前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡33 分钟前
lodash常用函数
前端·javascript
emoji11111143 分钟前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs:GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习(三)
前端
User_undefined1 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app
AiFlutter1 小时前
Flutter-底部分享弹窗(showModalBottomSheet)
java·前端·flutter
麦兜*1 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue