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

Posted 2023-03-10

【中文标题】具有 AJAX、非 AJAX、JQuery 的 JWT 令牌

【英文标题】：JWT token with AJAX, non-AJAX, JQuery

【发布时间】：2017-07-06 07:43:11

【问题描述】：

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

JQuery/html -> Node.Js -> Java Restful Services -> mysql.  

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

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

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

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

【问题讨论】：

网络是无状态的。您必须在每个请求中传递它。

我意识到了这一点，但是如何在每个请求中正确传递它。 Ajax 很简单，因为我可以设置标题，但普通的 href 或转发是另一回事。

【参考方案1】：

如果您不想执行上述建议的任何操作，您唯一的选择是将令牌存储在 cookie 中。您不能在链接中设置 http 标头。

【参考方案2】：

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

Ajax 请求

Cookies：向服务器发出请求时会自动发送一个cookie，因此您无需添加特定的标头

LocalStorage：需要在每个请求中使用 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
);

表单提交

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

Cookie

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

表单参数

：JWT 存储在表单的隐藏字段中。

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

链接

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

的链接

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

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

【讨论】：

我实际上有这个用于我的 ajax 请求，但问题是处理非 ajax 请求的最佳方法是什么，比如单击菜单项以从网站的一个部分导航到另一个部分？跨度>

对不起，我没有阅读你问题的最后一部分。查看更新的答案

感谢您的反馈，这就是我解决问题的方法。我通过与链接上的类关联的单击处理程序将令牌作为请求参数动态添加到 url。在节点方面，我从参数、标头或 post 变量中获取令牌，因为它进入并沿逻辑前进。我认为这至少比在请求或 JS 中公开它更安全。

对于链接，没有更多的选择。我建议还使用较短的过期时间和 HTTPS