I've been building a web app (rails api + react SPA) for learning / fun and have been researching authentication. The most commonly recommended approach for authenticating SPAs that I have read is to put the auth token (such as a JWT) in a secure HTTP-only cookie to protect from XSS. This seems to have a couple of consequences:
- We now have to handle CSRF since we are using cookie authentication
- Since it's an SPA we can't protect against CSRF until the user is logged in, which means we are vulnerable to a login phishing attach (https://stackoverflow.com/questions/6412813/do-login-forms-need-tokens-against-csrf-attacks)
But what is the real downside to just storing the auth token in browser storage (i.e. session storage)? XSS becomes slightly more convenient for the attacker? Even with an HTTP-only cookie the attacker can still use the auth token by making requests directly from the site, because if there's a XSS vulnerability then they don't need to be able to read the token to use it.
It seems that the popular recommendation just makes things more complicated to protect against CSRF just to make things a little more difficult for the attacker in the case of XSS. Due to the amount of resources making these recommendations I feel like I am missing something and would appreciate any feedback or clarifications!
Here is a couple of sources I've been reading that have been quite adamant against browser storage for auth tokens: