将JWT保存在基于浏览器的应用程序中的位置以及如何使用它

小编典典

将JWT保存在基于浏览器的应用程序中的位置以及如何使用它

javascript

我正在尝试在身份验证系统中实现JWT，但我有几个问题。要存储令牌，我可以使用Cookie，但也可以使用localStorage或sessionStorage。

哪个是最佳选择？

我读过，JWT保护站点免受CSRF的侵害。但是，假设我将JWT令牌保存在cookie存储中，我无法想象它将如何工作。

那么如何保护它免受CSRF的侵害？

更新1
我看到了一些用法示例，如下所示：

curl -v -X POST -H "Authorization: Basic VE01enNFem9FZG9NRERjVEJjbXRBcWJGdTBFYTpYUU9URExINlBBOHJvUHJfSktrTHhUSTNseGNh"

当我从浏览器向服务器发出请求时，该如何实现？我还看到有人在URL中实现了令牌：

http://exmple.com?jwt=token

如果我要通过AJAX发出请求，则可以将header设置为jwt: [token]，然后可以从header中读取令牌。

更新2

我安装了高级REST客户端Google
Chrome扩展程序，并且能够将令牌作为自定义标头传递。向服务器发出GET请求时是否可以通过Javascript设置此标头数据？

阅读 690

2020-05-01

共1个答案

小编典典

[编辑]这个答案是可以接受的，但是若昂·安杰洛的回答更为详尽，应予以考虑。
不过，有一个说法是，由于自从2016年11月以来安全惯例不断发展，因此应该实施方案2来支持方案1。

如果要存储它们，则应使用localStorage或sessionStorage（如果可用）或cookie。您还应该使用Authorization标头，但要使用Basicer而不是Basic方案：

curl -v -X POST -H "Authorization: Bearer YOUR_JWT_HERE"

使用JS，您可以使用以下代码：

<script type='text/javascript'>
// define vars
var url = 'https://...';

// ajax call
$.ajax({
    url: url,
    dataType : 'jsonp',
    beforeSend : function(xhr) {
      // set header if JWT is set
      if ($window.sessionStorage.token) {
          xhr.setRequestHeader("Authorization", "Bearer " +  $window.sessionStorage.token);
      }

    },
    error : function() {
      // error handler
    },
    success: function(data) {
        // success handler
    }
});
</script>

2020-05-01