为什么不将JWT存储在全局变量中？

Question

我试图理解将jwt存储在本地存储（倾向于xss）与cookie（倾向于csrf）的安全含义。我想了解如果我将jwt令牌存储在前端的应用状态中的安全性影响，就像在redux商店中一样。

编辑：

我试图了解有关存储代币的更多信息。似乎所有的文章和答案实际上都是在确定有两种方法可以做到这一点后开始讨论的，即cookie或浏览器存储。像这样一个相关的问题：在浏览器中的何处存储JWT？如何防范CSRF？像这些帖子：https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage https://auth0.com/docs/security/store-tokens

我理解其中大多数的要点，但我试图明确地讨论全局变量的选项。

Answer 1

根据我的理解，在浏览器本地存储/缓存中存储JWT更多的是通过浏览器会话持久化令牌（用户授权）。

Answer 2

如果将JWT存储在全局变量中，或者存储在全局上下文中的任何可用存储中，那么它将暴露在同一页面上的所有JS代码中。如果您信任页面的所有其他JS脚本，并且可以保证页面不易受到代码注入攻击，那么将JWT存储在全局变量中是安全的。

如果你不能保证JWT是安全的，不要使用全局变量，更喜欢使用这样的封装：

(function() {
  // Retrieve the JWT from somewhere
  var jwt = "mockjwt";

  //All of the code that needs the JWT goes here
  console.log('Safe code:', jwt);

  
})();

// Evil code, either:
// - Injected through a vulnerability of your website (e.g: eval misuse,
//   WYSIWYG editor vulnerable to script tag injection, etc...)
// - Injected because your user got fooled by some "copy/paste this code in the F12 tab
//   of your browser, and you'll unlock a secret functionality"
// - Untrusted <script> tag that you added to your website

console.log('Evil code:', jwt);  //Fails because the JWT is scoped to the anonymous
                                 //function and is not accessible from anywhere outside
                                 //the function.