75

I read that when using JWT, there is no need to protect against CSRF attacks, for instance: "since you are not relying on cookies, you don't need to protect against cross site requests".

However, something I do not understand: if I store the token in localStorage (as I was advised on a tutorial of the same website), what prevents an attacker to forge a malicious request by reading my localStorage instead of my cookies?

Since it was generated on the server side, I don't get how I could use a token for a client request without it being stored somewhere on the client.

2 Answers 2

171

Strictly speaking, yes, anything stored in local/session storage (which I'll call HTML5 Storage) could be stolen in a cross-site scripting (XSS) attack. See this article.

There are a lot of moving parts to consider, however.

First, there are subtle differences in how HTML5 Storage and cookies are scoped with respect to JavaScript access.

HTML5 Storage is:

  • divided between HTTP and HTTPS. An item stored in http://example.com HTML5 storage cannot be accessed by JavaScript running on https://example.com.
  • divided between subdomains. An item stored in http://example.com HTML5 storage cannot be accessed by JavaScript running on http://sub.example.com (you can do some tricks to get around this, however).

Cookies are more loosey-goosey:

  • A cookie with a domain example.com will go to both http://example.com and https://example.com unless it has the attribute secure, in which case it will only be sent to https.
  • A cookie not sent with an explicit domain will only be sent back to the exact domain that sent it. If the domain is explicitly defined to be example.com, then it will be sent to both example.com and sub.example.com. (This is the most confusing part of the cookie "spec", unfortunately, see this article).
  • A cookie can be read by JavaScript if it is running on a page with a matching domain (and respecting the secure cookie flag) unless the cookie has the httpOnly attribute, in which case JavaScript will not be able to read it.

Second, since cookies are marked with a domain, when a request is made to a server, the browser will send all-and-only cookies with a matching domain, regardless of the domain of the page that originated the request.

The last part is how a CSRF attack is accomplished (the same-origin policy only helps so much). The OWASP page on CSRF is a good resource for learning how these kinds of attacks work.

The reason storing an authentication token in local storage and manually adding it to each request protects against CSRF is that key word: manual. Since the browser is not automatically sending that auth token, if I visit evil.example and it manages to send a POST http://example.com/delete-my-account, it will not be able to send my authn token, so the request is ignored.

With the above in mind, whether to use a cookie or HTML5 Storage becomes a series of tradeoffs:

Storing the authen token in HTML5 Storage means:

  • (-) Risk of it getting stolen in an XSS attack.
  • (+) Provides CSRF protection.
  • (-) Must manually modify each request going to the server, limiting you to SPA (eg AngularJS) web applications.

On the other hand, if you store the authn token in a cookie marked httpOnly and secure, then:

  • (+) The authn token cannot be stolen by XSS.
  • (-) You will have to provide CSRF protection yourself. Implementing CSRF protection is easier in some frameworks than others.

Which option is better depends on your needs.

  • Does your authn token protect anything to do with money? You'll probably want the cookie httpOnly secure option.
  • Is the level of effort required to implement CSRF protection not worth the assets it's protecting? Then the HTML5 storage might be the right place.
17
  • 2
    First off, same-origin protects against reading/viewing of data, it does not protect against submitting a request. Correct me if am wrong.
    – Zack
    Commented Jul 6, 2017 at 16:59
  • 3
    @Zack evil.com can't access the web storage or cookies of example.com, so evil.com can't get a valid auth/CSRF token. However, cookies are automatically submitted to the server for all requests, even if they are sent from evil.com. If your session token is a cookie, you need to also provide a CSRF token. However, if your session token is in local storage, you have to "manually" add it to each request, the browser will not do it for you. If the Javascript adds the token as a custom header, that would be even better because cross origin requests with custom headers are not allowed by SOP.
    – kuporific
    Commented Jul 8, 2017 at 23:20
  • 1
    @Zack However, I'm not sure how practical this is because just a simple link to another page on your site would not have the session token sent with it when clicked. This is what I was trying to get across by saying you're limited "to SPA (eg AngularJs) web applications". I'm not 100% sure what the workarounds might be for the link issue.
    – kuporific
    Commented Jul 8, 2017 at 23:22
  • 3
    @Zack how does JavaScript running on evil.com access the web storage of example.com? It cannot. The web storage specification talks about why each domain's web storage must be private, w3.org/TR/webstorage/#implementation-risks. I don't understand what you mean when you say, "WebStorage will happily send back traffic over HTTP", web storage does not send or receive http requests. Similar to my original answer, here is an article talking about using web storage to store session cookies, blog.portswigger.net/2016/05/…
    – kuporific
    Commented Jul 9, 2017 at 22:39
  • 1
    Let us continue this discussion in chat.
    – kuporific
    Commented Jul 9, 2017 at 22:39
7

When using token based authentication you have to manually associate the token with the request. Contrary to cookies, tokens are not set automatically by the browser thus not susceptible to csrf attacks.

While this approach is safe from csrf attacks, it is susceptible to xss attacks.

A minimal effort improvement would be to use session storage instead of local storage since session storage data gets purged after the user closes the tab/browser.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.