JWT 存储在 Cookie 和 Web Storage 的区别

JSON Web Tokens (JWT) 是一种用于在各方之间安全传输信息的紧凑、URL 安全的方式。它常用于认证流程中,以减少每次请求时需要重新验证完整会话信息的情况。然而,正确地存储 JWT 是至关重要的,因为如果存储不当,它们可能会被恶意第三方获取并滥用。

以下是关于如何安全地在 Cookie 和 Web Storage 中存储 JWT 的一些建议:

 

推荐方案

首选存储在 Local Storage 中。

在安全方面最大的收益便是天然的CSRF免疫,因为不会被浏览器自动发送。 如果你使用了这种方法,后端并不需要花费时间精力来做CSRF相关的防护。

JS可以直接读取JWT,方便使用。

我们的网站只要没有XSS漏洞,安全性就会有保障。如果存在 XSS漏洞,无论 JWT 存在 cookie 还是存在 Local Storage,CSRF 防护都会形同虚设。

 

在 Cookie 中存储 JWT

  1. HttpOnly 标志:设置 HttpOnly 标志可以防止客户端脚本访问 cookie,从而降低跨站脚本(XSS)攻击的风险。这意味着 JavaScript 不能读取此 cookie 的值。

  2. Secure 标志:确保为 cookie 设置 Secure 标志。这样可以确保 cookie 只通过 HTTPS 协议发送,从而避免中间人(MITM)攻击。

  3. SameSite 属性:使用 SameSite 属性来限制 cookie 在第三方上下文中的使用。这有助于防止跨站请求伪造(CSRF)攻击。可以选择 Strict 或 Lax 模式。

 

在 Web Storage 中存储 JWT

  1. LocalStorage vs. SessionStorage:如果你选择在客户端存储 JWT,考虑使用 SessionStorage 而不是 LocalStorage。SessionStorage 数据仅在页面会话期间可用,并且当页面关闭时会被删除。

  2. CORS 设置:确保你的服务器正确配置了 CORS(跨源资源共享),以防止未经授权的数据访问。

  3. JavaScript 安全性:虽然 HttpOnly 标志无法应用于 Web Storage,但可以通过 JavaScript 代码来保护存储的数据。例如,在存取 JWT 时添加额外的安全检查或使用加密技术。

  4. 前端框架/库保护:如果你使用的是现代前端框架或库(如 React, Angular, Vue.js 等),可以利用它们提供的安全特性来保护存储的数据。

  5. 最小权限原则:只在必要的时候从 Web Storage 中读取 JWT,并确保这些操作是在安全的上下文中进行的。

总的来说,虽然可以在 Web Storage 中存储 JWT,但考虑到 JavaScript 的暴露风险,通常推荐的做法是将 JWT 存储在带有适当安全属性设置的 cookie 中。无论哪种方法,都应该结合其他安全措施(如 CSRF 令牌、HTTPS、CSP 等)来保护应用程序免受攻击。

 

 

修改时间 2024-10-10

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
793 文章
4 教程
8 项目
随机推荐
JavaScript 字符串详细介绍
WordPress 添加文章自定义字段
MySQL 使用 DATE_FORMAT() 和 FROM_UNIXTIME() 格式化时间
WordPress WP_Query() 文章置顶的方法
WordPress 分页
MySQL 的 sql_mode 模式介绍:为什么 MySQL 中 int,float,double 类型字段插入空字符时自动转为0
WordPress 添加自定义接口
JavaScript getter和setter