如何在 javascript cookie 中存储访问令牌值并使用 AJAX 调用将该令牌传递给 Header
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29838539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to store Access token value in javascript cookie and pass that token to Header using AJAX call
提问by Zoya Khan
I have a login form, as shown below:
我有一个登录表单，如下所示：
<form method="post" name="logForm" onsubmit="onLogin()" action="dashbooard.html">
<label>Email</label>
<input type="text" name="email">
<label>Password</label>
<input type="password" name="pass">
<input type="submit" name="submit" value="Login" >
</form>
Now when I click on the Login button, I am authenticated by the server and an access_tokenis generated and returned back to me via a REST API.
现在，当我单击“登录”按钮时，服务器access_token对我进行了身份验证并生成并通过 REST API 返回给我。
I would like to store that access_tokenin a cookie and pass that token into a request. But, I don't know how to do this. I would love to receive help on this.
我想将其存储access_token在 cookie 中并将该令牌传递给请求。但是，我不知道该怎么做。我很想得到这方面的帮助。
回答by boombox
Here is how you can use a cookie for your question regarding the access_token:
以下是您如何使用 cookie 解决有关以下问题的方法access_token：
1. Storing the cookie on the client:
1.在客户端存储cookie：
document.cookie='access_token=[value]'where [value]is the token value.
document.cookie='access_token=[value]'[value]令牌值在哪里。
If we use a reader/writer library that MDN provides here, we can do the above as:
如果我们使用 MDN在此处提供的读写器库，我们可以执行上述操作：
docCookies.setItem('access_token', [value]);
docCookies.setItem('access_token', [value]);
The reason why we would use something like this instead of the standard way is to make it easier to access and delete the token, as demonstrated in #3 below.
我们之所以使用这样的方法而不是标准方法是为了更容易访问和删除令牌，如下面的 #3 所示。
2. Passing the cookie back to the server:
2. 将 cookie 传回服务器：
We need to send the access_tokenback to the server through the header.
我们需要access_token通过标头将其发送回服务器。
This should automatically be done for you, assuming that the server sends a response after authentication like Set-Cookie: access_token=[value].
这应该自动为您完成，假设服务器在身份验证后发送响应，如Set-Cookie: access_token=[value].
If for any reason you encounter an issue regarding Access-Control-Allow-Origin, here is an example of how you can set Access-Controlresponse headers for CORS:
如果出于任何原因遇到有关 的问题Access-Control-Allow-Origin，以下是如何Access-Control为CORS设置响应标头的示例：
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Authorization
3. Deleting the cookie:
3. 删除cookie：
Using the reader/writer library linked in #1, we can do the following:
使用 #1 中链接的读写器库，我们可以执行以下操作：
docCookies.removeItem('acccess_token');
docCookies.removeItem('acccess_token');
Security considerations when using cookies for authorization:
使用 cookie 进行授权时的安全注意事项：
XSS, MITM, and CSRF attack vectors should be considered when using cookies for authorization. On a basic level:
使用 cookie 进行授权时，应考虑 XSS、MITM 和 CSRF 攻击媒介。在基本层面上：
- For XSSattacks, we can set the
HttpOnlyflag in the response header by the server to prevent a client side script from accessing the cookie. - For MITMattacks, we can use the
Secureflag to guarantee the cookie is not sent over an unencrypted HTTP channel. - For CSRFattacks, the recommendation by OWASP is the Synchronizer Token Pattern. It's basically a randomly generated token that is sent by the server and is sent back by the client to verify a request submission done by the user.
- 对于XSS攻击，我们可以
HttpOnly通过服务器在响应头中设置标志来防止客户端脚本访问 cookie。 - 对于MITM攻击，我们可以使用该
Secure标志来保证 cookie 不会通过未加密的 HTTP 通道发送。 - 对于CSRF攻击，OWASP 推荐的是Synchronizer Token Pattern。它基本上是一个随机生成的令牌，由服务器发送并由客户端发回以验证用户完成的请求提交。
回答by Sunny
Try this code
试试这个代码
document.cookie="username=John Doe";
