5

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_token is generated and returned back to me via a REST API.

I would like to store that access_token in 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.

boombox
  • 2,246
  • 2
  • 10
  • 13
Zoya Khan
  • 73
  • 1
  • 2
  • 6
  • possible duplicate of [How do I create and read a value from cookie?](http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie) – Orifjon Apr 24 '15 at 04:13
  • Are you wanting to set the cookie with straight JavaScript or jQuery? – Drakes Apr 24 '15 at 04:35
  • By using javascript, and after storing access_token i have to pass that access_token value through header. and i have to delete the cookie when user get Logout. – Zoya Khan Apr 24 '15 at 04:37

2 Answers2

9

Here is how you can use a cookie for your question regarding the access_token:

1. Storing the cookie on the client:

document.cookie='access_token=[value]' where [value] is the token value.

If we use a reader/writer library that MDN provides here, we can do the above as:

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.

2. Passing the cookie back to the server:

We need to send the access_token back to the server through the header.

This should automatically be done for you, assuming that the server sends a response after authentication like 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-Control response headers for 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:

Using the reader/writer library linked in #1, we can do the following:

docCookies.removeItem('acccess_token');

Security considerations when using cookies for authorization:

XSS, MITM, and CSRF attack vectors should be considered when using cookies for authorization. On a basic level:

  • For XSS attacks, we can set the HttpOnly flag in the response header by the server to prevent a client side script from accessing the cookie.
  • For MITM attacks, we can use the Secure flag to guarantee the cookie is not sent over an unencrypted HTTP channel.
  • For CSRF attacks, 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.
boombox
  • 2,246
  • 2
  • 10
  • 13
1

Try this code

document.cookie="username=John Doe";
Sunny
  • 422
  • 2
  • 8
  • why this error gives: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://murmuring-fjord-2343.herokuapp.com/delete. This can be fixed by moving the resource to the same domain or enabling CORS. and how to solve this issue.? – Zoya Khan Apr 24 '15 at 04:51
  • You are using this by ajax ? if yes then make sure that type must be "jsonp" – Sunny Apr 24 '15 at 07:33
  • sorry! when i write at the place of json to jsonp, the entire code is not running. – Zoya Khan Apr 24 '15 at 10:31