前端架构师成长之路:避免将 JWT 存储在 localStorage 中
zhezhongyun 2025-01-12 20:16 32 浏览
看到很多文章介绍将 JWT 存储在 localStorage 中,事实上,个人觉得建议最好不要。这就是将敏感信息存储在 localStorage 中,对于安全问题来说是个挑战,对于客户端的行为在安全问题上多数是不可靠的。
先简单介绍一下本地存储。
本地存储
localStorage 是 HTML5 的一项新特征,它基本上允许 Web 开发人员使用 JavaScript 在用户的浏览器中存储想要的任何信息,十分简单。
在操作上,localStorage 只是一个可以添加或删除数据的 JavaScript 对象,下面是一段 localStorage 操作的示例代码,该代码片段将创建一个指定 Key 的localStorage 数据,并可以为其更新、删除数据。
export const useStorage = (
valKey = "authorization",
keyPrefix = "DevPoint"
) => {
const localKey = `${valKey}.${keyPrefix}`;
const save = (data) => {
window.localStorage.setItem(localKey, JSON.stringify(deepCopy(data)));
};
const get = () => {
const localData = window.localStorage.getItem(localKey);
if (localData && localData !== "") {
return JSON.parse(localData);
} else {
return false;
}
};
/**
* 清除 localStorage 中 valKey 的值
*/
const clear = () => {
window.localStorage.setItem(localKey, "");
};
return {
save,
get,
clear,
};
};
// 清除所有的 localStorage
export const cleanAll = () => {
window.localStorage.clear();
};
打开浏览器开发工具,在控制台窗口的 Application 的标签页下看到,左侧的 Storage 可以看到,如下图所示:
localStorage 是一个纯 JavaScript 对象。如果正在构建一个单页面站点,使用 localStorage 之类的东西意味着网页可以独立于任何 Web 服务器运行,只需要浏览器存储空间,而无需在服务器中存储任何数据。
此外,localStorage 的好处是大小限制:像 Cookie 一般是 4KB 的大小限制,而 localStorage 在所有主流浏览器中至少5MB 的数据存储。因此现在也越来越多的 Web 应用使用 localStorage 来存储一些数据。
安全问题
localStorage 尽管使用简单,但在安全问题上,没有任何的保护措施,这就意味着敏感信息存储在 localStorage 会带来安全问题。
将任何敏感信息存储在localStorage 中相当于在互联网中发布了这些信息。localStorage 设计的目的是为浏览器增加本地存储机制,被设计为简单的 key/avalue 存储,开发人员可以使用它来构建稍微复杂的单页应用程序。
当将敏感信息存储在 localStorage 中时,实际上是在使用世界上最危险的东西 JavaScript 将最敏感的信息存储在有史以来最糟糕的保险库中,绝对不是一个好注意
如果攻击者可以在您的网站上运行 JavaScript,他们就可以检索您存储在 localStorage 中的所有数据并将其发送到他们自己的域中。这意味着存储在 localStorage 中的敏感信息都有可能受到损害。
当然可能有足够的信息认为 Javascipt 无法在您的站点中运行,但是如果您的站点包含来自域外源的第三方 JavaScript 代码,例如一些第三方脚本库的CDN源:
- bootstrap 源
- jQuery
- 广告脚本
- 谷歌分析链接
- 跟踪脚本
- ...
一旦出现第三方脚本库被攻击了就会带来安全上的威胁,或许不曾使用第三方脚本库,又或者第三方脚本库绝对安全。
如果需要考虑所有可能的场景,为了降低安全事故的风险,建议尽量不要在 localStorage 中存储任何重要的敏感信息。
JWT 本质上与用户名/密码 在功能上相同,一旦知道 JWT 就相当于知道了用户名和密码。
如果攻击者可以获得 JWT 副本,就可以神不知鬼不觉的伪造请求向网站发出请求,因此建议不要将敏感信息存储在 localStorage 中。
JWT存储在 HttpOnly Cookie
本文只是介绍了将 JWT 存储在 localStorage 得不好,不推荐这样使用。
建议的方式是将JWT存储在 HttpOnly Cookie 中,优点是不需要在 JavaScript 代码中处理 Token , 后续请求中都会自动跟上 Token 信息的 Cookie。
再者 Cookie 的 HttpOnly 标签是防御 XSS 的解决方案之一,因为 HttpOnly 在简单的条件下阻止客户端(JavaScript)访问 Cookie。如果再将 secure 标志设置为 true,则只会在安全或加密的网络中使用 Cookie,从而增加其安全性。
虽然上面的方式可以防御 XSS ,但还存在另一个威胁即跨站请求伪造(CSRF),可以采用 CORS 白名单机制,并且 CSRF 令牌(可以参阅《CSRF 攻击:解析、预防和 CSRF 令牌》)与 JWT 一起使用。
但是在某些情况下,例如当 API 被移动应用程序使用并且它需要 Authorization Bearer xxx 标头而不是 Cookie 时,或者当需要使用同一个 JWT 向多个后端发出 HTTP 请求时,把 JWT 存在 localStorage 中的方案就更方便。
还有一点 Cookie 存储的大小为 4KB ,因此在使用这个方案的时候需要注意 JWT 的大小。如果 JWT 超过了 4KB 就不适合使用 Cookie 存储 JWT的方案。
总结
JWT 是一个非常流行的标准,可以使用签名来信任请求,并在各方之间安全的交换信息。在实际项目开发中,建议避免将 JWT 存储在 localStorage 中,而是存储在 HttpOnly Cookie 。
相关推荐
- 用豆包生成的BMI计算器(豆包的热量是多少?)
-
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8...
- Android 开发中文引导-应用小部件
-
应用小部件是可以嵌入其它应用(例如主屏幕)并收到定期更新的微型应用视图。这些视图在用户界面中被叫做小部件,并可以用应用小部件提供者发布。可以容纳其他应用部件的应用组件叫做应用部件的宿主(1)。下面的截...
- Qt推流(视频文件/视频流/摄像头/桌面转流媒体rtmp+hls+webrtc)
-
一、前言说明推流直播就是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号从手机端,电脑端,摄影机端打包传到服务器的过程。“推流”对网络要求比较高,如果网络不稳定,直播效果就会很差,观...
- 一看就会!谷歌广告转化跟踪详细设置指南来了
-
在出海推广业务中,投放广告最常见的目的是获取订单,但我们怎么知道有没有达成投放目的呢?谷歌转化跟踪技术就可以做到!熟悉谷歌的卖家朋友都知道,转化跟踪在最近几年变得越来越复杂了,虽然有很多选项可以自定义...
- Android原生编解码接口MediaCodec详解
-
作者:躬行之MediaCodec是Android中的编解码器组件,用来访问底层提供的编解码器,通常与MediaExtractor、MediaSync、MediaMuxer、MediaCrypt...
- 手把手搭建RTSP流媒体服务器(rtsp 流媒体)
-
0.引言本文主要讲解如何搭建RTSP流媒体服务器的过程,使用开源项目ZLMediaKit。通过这个开源项目,推RTSP流到服务器,然后拉流端可以拉取RTSP、RTMP等流。ZLMediaKit码云链接...
- MediaInfo 24.04.0 是一个关于多媒体文件的信息提供工具
-
MediaInfo24.04.0是一个关于多媒体文件的信息提供工具(仅当文件中包含信息时才提供):包括常规信息(标题、作者、导演、专辑、曲目编号、日期、时长等);视频信息(编解码器、画面比例、帧率...
- rmvb格式视频怎么打开,rmvb转MP4认准这个方法
-
一、rmvb是什么格式? RMVB是一种视频文件格式,其中的VB指的是可变比特率。比起上一代的RM格式,RMVB 格式的画面比较清晰,因为它是降低了静态画面下的比特率。 二、制作rmvb ①...
- 教你用Plex Media Server,把铁威马变成你的“私人好莱坞”!
-
TNAS(铁威马NAS)中可以安装多媒体服务器、影视、PlexMediaServer、EmbyServer作为个人媒体服务器使用。PlexMediaServer可以组织整理TNAS上的媒体...
- 你肯定用过!经典Windows软件被抛弃
-
Windows系统这些年持续更新的过程中,不断融入新的软件和功能的同时,一些经典的应用也渐渐成为了历史……Windows媒体播放器被抛弃Windows系统不断地推陈出新,一些老旧的组件也难免被抛弃,在...
- 博思得Q8标签打印全能手(博思得标签打印机安装教程)
-
2014-12-0905:35:00作者:宋达希【中关村在线办公打印频道原创】服装吊牌、洗涤标签、产品说明标签等都要用到标签打印机,这些标签涵盖多种尺寸的长度和宽度以及材质。另外作为一件商品或者产...
- flv文件用什么播放器打开,这样做不踩雷!
-
FLV是FLASHVIDEO的简称,是随着FlashMX的推出发展而来的视频格式。它的出现有效地解决了视频文件导入Flash后,使导出的SWF文件体积庞大,不能在网络上很好的使用等问题。一、...
- media player怎么转换格式?音频转换神器推荐!
-
Windowsmediaplayer怎么转换格式?WindowsMediaPlayer是微软公司出品的一款多媒体播放器,通常简称“WMP”。提供了编辑音频和视频文件的功能。用户可以使用该软件导...
- 视频参数检查工具更新:MediaInfo 23.10
-
MediaInfo提供有关视频或音频文件的技术和标签信息。信息示例包括编解码器、比特率、每秒帧数、宽度、高度、频道数、持续时间、标题、作者、字幕语言和章节名称。多种方式可以查看信息(文本、工作表、树和...
- 多媒体管理软件:JRiver Media Center 31.0.68 (64位)
-
JRiverMediaCenter64位是适用于大量库的完整媒体解决方案。它组织、播放和标记所有类型的媒体文件,并对Xbox、PS3、UPnP、DLNA和TiVo进行翻录、刻录。JRiverM...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)