I've been reading Aaron Parecki's draft of browser-based apps' (meaning SPAs like those developed with React or Angular) authentication best practices with OAuth 2 as well as OWASP security guidelines, and it left me really confused:
localStorage
by default, which OWASP guidelines recommend against. Does it have some kind of extra protection? Should I put some extra digest in it and also put it in a cookie and match them?Some references:
TRADITIONAL SPA FLOW
In the traditional SPA flow it was standard to use iframes to silently renew tokens.
Meanwhile access tokens were best stored only in memory and should also be short lived. There were still threats of capturing tokens in transit.
2021 UPDATE
There are two big changes to browsers that are related to SPA token refresh:
Browsers drop third party cookies aggressively, meaning that traditional SPA token refresh no longer works reliably (eg in the Safari browser)
Browser cookies security has become stronger via SameSite=strict
cookies, and concerns about XSS threats (video) have increased
BACK END FOR FRONT END
So it is now recommended to store refresh tokens in HTTP only encrypted SameSite=strict
cookies. This is best done in an API driven manner, to avoid impacting the web architecture. See this blog post for some up-to-date best practices and links to resources including a React code example.