JWT 令牌与 AJAX、非 AJAX、JQuery

我对在登录、提交和重定向期间管理 JWT 令牌感到有点沮丧。在开始之前，先介绍一下我的技术堆栈，以防万一：

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

我的 java Restful 服务管理创建 JWT 令牌，将其返回到 Node.js 层，该层决定如何处理它并将其传递给客户端。这一切都非常有效。

为了获取 JWT 令牌，我向 Node 中间层发出基于 ajax 的身份验证请求，该中间层对令牌进行身份验证并返回令牌，该令牌将被立即塞入客户端的本地存储中。

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

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

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

Ajax 请求

• Cookies：向服务器发出请求时会自动发送cookie，因此不需要添加特定的标头

• 本地存储：需要使用 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带有不记名令牌的标头。在这种情况下，您可以

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

始终使用 POST（而不是 GET）以避免 JWT 缓存

Link

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

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

如果您使用cookie，则通过单击链接，令牌将自动发送到服务器，但这仅在用户经过身份验证时才有效。在这种情况下请注意 CSRF 漏洞