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

这篇具有很好参考价值的文章主要介绍了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、对用户输入进行验证和转义:对所有用户输入进行验证,并对特殊字符进行转义,以防止恶意脚本被执行。文章来源地址https://www.toymoban.com/news/detail-767527.html

到了这里,关于js-cookie的使用以及存储token安全的注意要点的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 简述一下cookie、session以及token的区别

    相同都是用来签权服务器的,不同的是主要是存储位置和存储容量 cookie数据存放在客户的浏览器上、session数据放在服务器内存上、token存储在服务器数据库上 cookie 单个4kb,不超过20个;session不限制 token是接口测试时鉴权码,其实也就是一个字符串,一般情况下登陆后才可以

    2024年04月14日
    浏览(41)
  • Cookie、Session和Token三者区别以及各自应用场景

    存储位置:Session和Cookie分别存储在服务器端和客户端,而Token则是在客户端和服务器端之间传递的。 安全性:Session相对于Cookie来说更安全,因为Session存储在服务器端,不容易被恶意攻击者获取。而Cookie存储在客户端,存在被拦截或篡改的风险。Token则通常用于安全认证和授

    2024年02月09日
    浏览(45)
  • http 请求报文响应报文的格式以及Token cookie session 区别

    HTTP 请求报文和响应报文的格式如下: HTTP 请求报文格式: 方法 : 请求方法,例如 GET、POST、PUT、DELETE 等。 路径 : 请求的路径,表示需要访问的资源。 协议版本 : 使用的协议版本,通常是 HTTP/1.1 或 HTTP/2。 请求头部字段:包含了关于请求的附加信息,每个字段由字段名和对

    2024年02月16日
    浏览(52)
  • 安全学习DAY23_Cookie&Session&Token

    Cookie和Session都是用来在Web应用程序中跟踪用户状态的机制 1、存储位置不同: Cookie是存储在客户端(浏览器)上的,而Session是存储在服务器端的。 2、安全性不同: Cookie存储在客户端上,可能会被黑客利用窃取信息,而Session存储在服务器上,更加安全。 3、存储容量不同:

    2024年02月09日
    浏览(32)
  • 解密Web安全:Session、Cookie和Token的不解之谜

    在当今数字化世界中,我们随处都会遇到用户身份验证和数据保护的挑战。无论是网上购物、社交媒体还是在线银行,我们的身份和隐私信息需要得到妥善的保护。本文将引导你探索三个核心概念:Session、Cookie和Token,它们是构建现代Web应用的不可或缺的组成部分。我们将解

    2024年02月06日
    浏览(45)
  • 深入理解 Session、Cookie 和 Token:网络安全和身份验证的重要概念

    在当今数字化的世界中,网络安全和身份验证是至关重要的议题。为了实现这些目标,我们常常使用诸如 Session、Cookie 和 Token 等概念。这些概念在 Web 开发、网络通信和安全领域发挥着重要作用。在本文中,我们将深入探讨这些概念的定义、作用以及它们在实际应用中的用途

    2024年03月22日
    浏览(40)
  • 精通api接口测试,接口分类,接口架构,http,webservice,dubbo接口协议,接口流程,接口工具,cookie,session,token接口鉴权原理以及实战

    接口口测试和接口自动化测试一直都是很多人混乱的概念。所以搞清楚2个的概念是很重要的一件事情。 接口:一段具备逻辑处理功能的程序代码组成的,可被其他方法、服务或应用所使用。 对于调用接口的那一方,可以把接口看做一只黑匣子,只需要负责按约定传入参数,

    2024年02月02日
    浏览(47)
  • vue 前端登录获取token后添加到cookie,并使用token获取其他数据(添加到请求头中)

    1.登录获取到token存到cookie中   这里我的cookie设置为一天失效 cookie.js代码如下 main.js导入到全局使用 request.js请求头添加token   最后浏览器可查看到   并且下一次发请求时候请求参数中可查看到

    2024年02月15日
    浏览(41)
  • 安全开发-PHP应用&留言板功能&超全局变量&数据库操作&第三方插件引用&后台模块&Session&Cookie&Token&身份验证&唯一性

    DW + PHPStorm + PhpStudy + Navicat Premium DW : HTMLJSCSS开发 PHPStorm : 专业PHP开发IDE PhpStudy :Apache MYSQL环境 Navicat Premium: 全能数据库管理工具 1、数据库名,数据库表名,数据库列名 2、数据库数据,格式类型,长度,键等 PHP函数:连接,选择,执行,结果,关闭等 参考:https://www.runoo

    2024年02月17日
    浏览(60)
  • cookie+session和token

    总结说在前面: session:起源于服务端,保存在服务端(服务器或者数据库),通过cookie传递给用户,用户每一次发送HTTP请求的时候,通过验证cookie中的session-id来验证用户身份。 jwt(json web token):起源于服务端,保存在浏览器(cookie或者storage),和session一样,用户每一次发

    2024年02月19日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包