具有AJAX，非AJAX，JQuery的JWT令牌 [英] JWT token with AJAX, non-AJAX, JQuery

问题描述

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

I'm a bit frustrated with managing my JWT token during login, submits and redirects. Before I get started here's my technology stack just in case:

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

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

My java Restful services manages creating the JWT Token returning it to the Node.js layer which decides what to do with it and pass it on the the client. This all works wonderfully.

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

To get the JWT token I'm making an ajax based authentication request to the Node middle tier, which authenticates and returns the token which is summarily crammed into localstorage on the client.

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

Now I have no desire what so ever to make the entire site load off a single page through ajax, it's a complex site and doing that is just dumb! I need to forward and navigate to sub pages while carrying along the JWT token.

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

Here's the question (finally)... How do send along the JWT token to the middle tier (node.js) without attaching it as a request or post parameter because that's a big no no? I can't seem to find a way to stuff it in the header associated with Bearer.

推荐答案

您需要使用例如cookie或localStorage

Ajax请求

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

It is needed to provide the token in each request using an HTTP header. For example

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

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

This is an example code to show how to execute an ajax POST request using jquery

$.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标题.在这种情况下，您可以

With a form submission you can not control the headers set by browser, so it is not possible to set the Authorization header with a Bearer token. In this case you can

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

• Cookie: store the JWT in a cookie that will be sent with the form data. You will need to add extra security to avoid CSRF attachs
• Form param: The JWT is stored in a hidden field of the form.

始终使用POST(而非GET)来避免缓存JWT

Use always POST (not GET) to avoid cache of JWT

链接

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

A link executes a GET request. You could build the link adding the JWT as a query param url?jwt=...

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

But, consider in this case the security risks. Browser can cache the url and it will be present in logs. An attacker could potentially obtain them if he has access. Also the user could copy the link and use it outside your web application (e.g send it by email...)

这篇关于具有AJAX，非AJAX，JQuery的JWT令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！