javascript - 带有 AJAX、非 AJAX、JQuery 的 JWT token

Question

我对在登录、提交和重定向期间管理我的 JWT token 感到有点沮丧。在我开始之前，这里是我的技术堆栈以防万一:

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

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

为了获取 JWT token ，我向 Node 中间层发出基于 ajax 的身份验证请求，该中间层对 token 进行身份验证并返回 token ，该 token 被汇总到客户端的本地存储中。

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

这里是问题(最后)......如何将 JWT token 发送到中间层 (node.js)，而不将其作为请求或发布参数附加，因为这是一个很大的禁忌？我似乎找不到将其填充到与 Bearer 关联的 header 中的方法。

Answer 1

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

Ajax 请求

• Cookies:当向服务器发出请求时会自动发送 cookie，因此您无需添加特定的 header

• LocalStorage:需要在每个使用 HTTP header 的请求中提供 token 。

例如

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
});

表单提交

通过表单提交，您无法控制浏览器设置的 header ，因此无法使用 Bearer token 设置 Authorization header 。在这种情况下，您可以

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

总是使用 POST(而不是 GET)来避免 JWT 的缓存

链接

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

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

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