具有AJAX，非AJAX，JQuery的JWT令牌

Question

在登录，提交和重定向期间管理JWT令牌令我有些沮丧。在开始之前，这里是我的技术栈，以防万一：

JQuery/Html -> Node.Js -> Java Restful Services -> MySQL.  

我的Java Restful服务管理着创建JWT令牌的过程，将其返回到Node.js层，该层决定如何处理它并将其传递给客户端。这一切都很棒。

为了获得JWT令牌，我向Node中间层提出了一个基于Ajax的身份验证请求，该请求对中间层进行身份验证并返回该令牌，该令牌被汇总到客户端的本地存储中。

现在，我不再希望通过ajax将整个站点加载到单个页面上，这是一个复杂的站点，这样做简直是愚蠢的！我需要在携带JWT令牌的同时转发并导航到子页面。

（最终）这是问题。。。如何将JWT令牌发送到中间层（node.js），而又不将其附加为请求或发布参数，因为那是很大的不？我似乎找不到一种将其填充到Bearer相关联的标头中的方法。

Answer 1

您需要使用例如cookie或在客户端存储令牌localStorage

Ajax请求

需要使用HTTP标头在每个请求中提供令牌。例如

POST /authenticatedService 
Host: example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

这是一个示例代码，展示了如何使用jquery执行ajax POST请求

$.ajax({
    type: "POST", //GET, POST, PUT
    url: '/authenticatedService'  //the url to call
    data: yourData,     //Data sent to server
    contentType: contentType,           
    beforeSend: function (xhr) {   //Include the bearer token in header
        xhr.setRequestHeader("Authorization", 'Bearer '+ jwt);
    }
}).done(function (response) {
    //Response ok. process reuslt
}).fail(function (err)  {
    //Error during request
});

表格提交

使用表单提交时，您无法控制浏览器设置的Authorization标题，因此无法使用Bearer令牌设置标题。在这种情况下，您可以

• Cookie：将JWT存储在cookie中，该cookie将与表单数据一起发送。您将需要增加额外的安全性以避免CSRF附加
• 表单参数：JWT存储在表单的隐藏字段中。

始终使用POST（而非GET）来避免缓存JWT

链接

链接执行GET请求。您可以构建将JWT添加为查询参数的链接 url?jwt=...

但是，在这种情况下，请考虑安全风险。浏览器可以缓存该URL，它将显示在日志中。如果攻击者具有访问权限，则可能会获得它们。用户也可以复制链接并在您的Web应用程序之外使用它（例如，通过电子邮件发送...）