在单页应用程序中存储令牌

2025-05-24

在单页应用程序中存储令牌

使用令牌来验证用户的单页应用程序需要实施安全存储令牌的策略。

不要使用 localStorage

令牌不应存储在localStorage或 中sessionStorage。这些数据存储可以通过页面上运行的任何 JavaScript 代码访问。将令牌存储在 中localStorage会使您的应用程序容易受到 XSS 攻击。

您可能认为自己控制了页面上的所有 JavaScript,但事实并非如此。依赖项的依赖项、第三方跟踪脚本或 Chrome 插件都是可能在您不知情的情况下被恶意利用的代码示例。

不要使用浏览器 cookie

令牌不应存储在使用 JavaScript 创建的 Cookie 中。JavaScript Cookie 与 类似localStorage,可以被其他 JavaScript 代码读取。

客户端上运行的恶意代码可以访问令牌并代表用户发出请求。

确实使用内存

将令牌存储在内存中比将令牌保存在中更好localStorage,只要它不存储在全局范围可访问的变量中。

将令牌存储在内存中的问题是,当用户刷新页面或在新浏览器选项卡中打开应用程序时,存储不是持久的。

请使用 HTTP cookies

只要服务器具有正确的安全属性,令牌就可以存储在服务器创建的 cookie 中。

存储令牌的 Cookie 应该具有该HttpOnly属性。此属性确保它无法被 JavaScript 读取,从而防止 XSS 攻击。

Cookie 还应具有该Secure属性。此属性确保 Cookie 只能在 HTTPS 连接上设置和读取。使用加密连接可以防止中间人攻击。

应使用该Domain属性来确保 cookie 仅返回给应用程序的服务器。

最后,该SameSite属性应该是StrictLax。此属性确保只有服务器可以存储 Cookie,从而防止 CSRF 攻击。

为了使此方法有效,客户端和服务器应用程序必须托管在同一个域中。

厌倦了手动处理身份验证?我正在为 Laravel 和 Vue/React 创建入门套件,以支持不同的身份验证方法。查看Titanium获取最新资讯!

文章来源:https://dev.to/bjornlindholmdk/storing-tokens-in-single-page-applications-322k
PREV
面向对象编程
NEXT
初学者数据获取指南(AJAX、Fetch API 和 Async/Await)