title: Do cookies protect tokens against XSS attacks?
body: <p>I'm building a JWT-based (JSON Web Token)  authentication mechanism for an browser-based Javascript web app, working with a stateless server (no user-sessions!) and I want to know, once and for all, if using storing my JWT token in a <em>cookie</em> will protect my token from XSS attacks, or if there is no protection, so there's no real advantage over using browser local storage in my Javascript app.</p>
  <p>I have seen this question asked and answered in SO and in many blogs, but I've never seen an answer that really satisfies me.</p>
  <hr />
  <p>This question was originally held on the basis that it solicits opinion - and given my original wording, rightly so. So let me make it clear here and now that I don't want an opinion based on vague notions of developer laziness or such - that's what the ground rules are meant to eliminate. What I want is an evidence-backed Yes/No answer. Either:</p>
  <ul>
  <li><em>&quot;Yes, cookies can be protected from XSS and CSRF and here's how&quot;</em> <strong>or</strong></li>
  <li><em>&quot;No, by protecting your cookies from CSRF, you always open them up to the same kind of XSS attack that made cookies a good idea in the first place&quot;</em></li>
  </ul>
  <hr />
  <p>So I'm going to restate the question, with some simplifying ground-rules, and point out the holes in advance, so that you, the experts, can set me straight.</p>
  <h2>Ground rules</h2>
  <ul>
  <li><p>Your app is a javascript browser app - it might be in AngularJS, but it might be custom-built. It communicates with the server via REST calls. Let's say,  jQuery $ajax calls.</p>
  </li>
  <li><p>The server is stateless: there is no session management.</p>
  </li>
  <li><p>The app users JWTs as the main authentication token ('access token' in OAuth2 parlance) and validates them on the server using a secret signing key</p>
  </li>
  <li><p>Ignore other  important advantages of cookies: browser management, less chance of coding poorly, etc. For this battle, I want to consider the absolute security, and assume we can competently code either mechanism.</p>
  </li>
  <li><p>Ignore other disadvantages of cookies, such as non-browser apps, etc. For this battle we are only concerned with a browser-based javascript app.</p>
  </li>
  <li><p>It doesn't matter whether you use a header or a request body to transmit tokens in the non-cookie approach; nor does it matter if you're using local storage vs session storage - ignore any security differences there. And yes I know that technically Cookies use headers, ignore that.</p>
  </li>
  </ul>
  <hr />
  <p><em>In a nutshell, we're only interested in comparing browser-handles-tokens vs your-javascript-handles-tokens and the comparative XSS and CSRF security risks.</em></p>
  <hr />
  <h2>The contestants</h2>
  <p>In the red corner, <a href="https://auth0.com/blog/2014/01/27/ten-things-you-should-know-about-tokens-and-cookies#xss-xsrf" rel="noreferrer" title="Auth0">Auth0</a>: Local Storage beats Cookies, because XSS is easier to fix than CSRF</p>
  <p>In the blue corner, <a href="https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage" rel="noreferrer">Stormpath</a>: Cookies beats headers, because actually CSRF is easier to fix than XSS.</p>
  <p>(excerpts of both arguments in detail below)</p>
  <h2>Weapons of choice</h2>
  <p>XSS and CSRF (we'll use CSRF and XSRF interchangeably: the C seems to be more popular in documentation, the X in code)</p>
  <p>Here's my super-simplified summary of the attack types:</p>
  <p>Let's assume your stateless, JWT-authenticated, javascript browser app is for online banking and the attacker, &quot;Evil Corp&quot;, wants to submit an AJAX REST call that transfers funds to their account by impersonating your users.</p>
  <p><em>XSS</em>   (Cross-site scripting)</p>
  <p>(As Stormpath points out, there are many attack vectors - I'll pick one)</p>
  <p>Evil Corp buys the github account rights for the nifty text field widget you use for password entry. They know your bank site uses it, so they update it to submit AJAX requests to transfer funds to their account when you type in your passord and hit enter. Your build system foolishly pulls the update and puts in production.</p>
  <p><em>CSRF</em>  (Cross-Site Request Forgery)</p>
  <p>Evil Corp knows your bank site uses JWTs in cookies to authenticate transactions, so they write a web app that submits AJAX requests to transfer funds to their account. They host this on their own evil.com site, and lure you there with an email (phishing) or some other way, when you happen to be logged into your bank site in another tab. The browser submits the request from evil.com, but attaches your JWT becaues it's going to the correct site: the bank.</p>
  <h2>Standard defences</h2>
  <p>The defence against XSS is to be very careful about the code in your site so that you never let the browser process something the user types in without sanitizing it (removing javascript and html) and that all the 3rd party libraries (Evil's text field widget) are vetted before being used. As Stormpath rightly points out, this is hard, bordering on impossible.</p>
  <p>The defence against CSRF is to use a form of double-submit-cookie. This means our server creates a token (securely random string) and sends it to our Javascript browser app in a readable cookie (call it &quot;XSRF-TOKEN&quot; by convention), and our Javascript sends it back in a header or body with every request.</p>
  <p>Actually, double-sumbit-cookie's are only one defence agasint CSRF, but some others require stateful server sessions and no other (I <em>think</em>!) offers any better protection. The statelessness can be achieved by also putting the token in the JWT and comparing it on the server side with the one that comes in the header or body.</p>
  <p>But the real CSRF-busting quality of this defence, is that same-origin-policy mean that only the javascript that our app loaded from <em>our domain</em> can read that cookie. So even if the javascript on evilcorp.com can send our cookies with its requests, it can't <em>embed</em> our XSRF-TOKEN because it can't <em>read it</em> in the first place.</p>
  <p>To <em>really</em> simplify CSRF:</p>
  <ul>
  <li>CSRF <em>attacks</em> work because a browser attaching a cookie depends only on the <em>destination</em> of a request.</li>
  <li>CSRF <em>defences</em> work because Javascript access to a cookie depends on the <em>origin</em> of the Javascript.</li>
  </ul>
  <h2>Auth0's argument</h2>
  <blockquote>
  <p>It's easier to deal with XSS than XSRF Cookies have this feature that
  allows setting an HttpOnly flag from server side so they can only be
  accessed on the server and not from JavaScript. This is useful because
  it protects the content of that cookie to be accessed by injected
  client-side code (XSS). Since tokens are stored in local/session
  storage or a client side cookie, they are open to an XSS attack
  getting the attacker access to the token. This is a valid concern, and
  for that reason you should keep your tokens expiration low.</p>
  <p>But if you
  think about the attack surface on cookies, one of the main ones is
  XSRF. The reality is that XSRF is one of the most misunderstood
  attacks, and the average developer, might not even understand the
  risk, so lots of applications lack anti-XSRF mechanism. However,
  everybody understands what injection is. Put simply, if you allow
  input on your website and then render that without escaping it, you
  are open to XSS. So based on our experience, it is easier to protect
  against XSS than protecting against XSRF. Adding to that, anti-XSRF is
  not built-in on every web framework. XSS on the other hand is easy to
  prevent by using the escape syntax available by default on most
  template engines.
  <a href="https://auth0.com/blog/2014/01/27/ten-things-you-should-know-about-tokens-and-cookies#xss-xsrf" rel="noreferrer">https://auth0.com/blog/2014/01/27/ten-things-you-should-know-about-tokens-and-cookies#xss-xsrf</a></p>
  </blockquote>
  <h2>Stormpath's argument</h2>
  <blockquote>
  <p>Stormpath recommends that you store your JWT in cookies for web
  applications, because of the additional security they provide, and the
  simplicity of protecting against CSRF with modern web frameworks.
  HTML5 Web Storage is vulnerable to XSS, has a larger attack surface
  area, and can impact all application users on a successful attack.
  <a href="https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/" rel="noreferrer">https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/</a></p>
  </blockquote>
  <p>Also:</p>
  <blockquote>
  <p>I see a lot of discussions where cookies are pitted against access
  tokens. While we’ve all been burned by systems that store a session ID
  in a cookie, and that cookie is not secured and thus gets stolen. That
  sucks, but its not a reason to use tokens. Its a reason to avoid
  non-secure, non-https cookies.
  <a href="https://stormpath.com/blog/token-auth-spa/" rel="noreferrer">https://stormpath.com/blog/token-auth-spa/</a></p>
  </blockquote>
  <h2>My take</h2>
  <p>Stormpath's argument in favour of cookies is pretty convincing, but there's a hole in it that I don't see them addressing clearly:</p>
  <hr />
  <p><em>The double-submit CSRF defence relies on the fact that my CSRF attacker cannot access my cookie: the one with the XSRF-TOKEN in it. But isn't that cookie just as vulnerable in an XSS attack as local storage?</em></p>
  <hr />
  <p>An XSS exploit can run javascript on <em>my</em> domain, so it can read the same cookies my javascript can. (The browser doesn't know that it isn't my Javascript)</p>
  <p>To look at it from the other side: local storage is protected by the same-origin-policy just as much as a readable cookie. If I'm using the Auth0 approach, and an XSS attacker knows how to find my JWT in local storage and use it. Can't that same attacker use that same XSS script to grab my XSRF-TOKEN cookie and use that?</p>
  <p>Both attacks require them to read and understand my javascript app, but that's out there in their browser.</p>
  <p>So what's the difference? Is one really more secure than another, and why?</p>