alert‘OAuth 2 0’; // The impact of XSS on OAuth 2 0 in SPAs
Why Stack Overflow recommends it
Stack Overflow users link it when answering questions about storing JWTs or OAuth tokens in a SPA, as the reference for why tokens should not live in the browser and why the BFF pattern is preferred.
Recommended by 3 people across 17 different months, 2021 to 2025.
What it is
A one-hour webinar by web security trainer Philippe De Ryck on how cross-site scripting affects OAuth 2.0 in single-page applications. It walks through what an XSS attacker can do with tokens held in the browser and reviews current security best practices, including moving token handling to a backend.
What people said
Strong rec Michal Trojanowski · 2021-09 · Stack Overflow · on “Secure JWT token handling in React”
In short - you can't securely store token in the browser. If your code has access to the token, then any attacker can also get access to it. That said you can mitigate some risks and decide on a solution which might be "secure enough" for your needs. E.g. it might be enough for you to keep tokens in the local storage, if losing such a token does not pose a great risk - maybe the data handled by your website is not sensitive. A viable option is to keep the token in the memory. This way it's a bit more complicated to steal it. Then of course you need to get a new token every time you refresh the page, but you might use SSO cookies to automatically get new tokens in the background. If you want
Strong rec Tore Nestenius · 2022-01 · Stack Overflow · on “What is the strategy on implementing a jwt auto login?”
You should not try to issue your own tokens, instead use a openid-connect certified token service (like KeyCloak [LINK] , AzureAd, Auth0 [LINK] , Ping [LINK] , IdentityServer [LINK] ...) Secondly you should try to avoid storing tokens in a cookie or even in the browser. A video discussing the security issue is the one below that I can highly recommend: alert‘OAuth 2 0’; // The impact of XSS on OAuth 2 0 in SPAs [this video]
Recommends Tore Nestenius · 2021-05 · Stack Overflow · on “How to "sign in with Google" (id_token) *and* receive a code/access_token for specific scope (for the backend)”
I would handle the token management on the backend instead of doing it in the frontend. The authorization code is only used as part of the authorization code flow.The code is just a random token and does not contain any user info, so you can't use it to signin the user. You can't get the id_token and authorization_code at the same time, why would you? Auth code flow is a two step process, so you always get a code first, that you then can exhange for the id/access tokens. I would consider looking at this this [this video] great video for how to approach authentication for SPA applications.
Recommends Tore Nestenius · 2021-05 · Stack Overflow · on “How do I do auth for SPA + API?”
I would check out these two resources and I do agree with the conclusion to put all of the token handling in the backend, not in the SPA client. alert‘OAuth 2 0’; // The impact of XSS on OAuth 2 0 in SPAs [this video] SPAs are dead!? [LINK]
Recommends Tore Nestenius · 2021-08 · Stack Overflow · on “How to know if openId connect provider support single page applications like angular App”
All OpenID Connect providers do support SPA applications. If it is a SPA, mobile application or a backend client does not matter. However you need to be aware of the security implications, a good stating point is this video alert‘OAuth 2 0’; // The impact of XSS on OAuth 2 0 in SPAs [this video] and this best practice document OAuth 2.0 for Browser-Based Apps [LINK]
Recommends Tore Nestenius · 2021-09 · Stack Overflow · on “OpenID Connect - Token Validation on client without call identity provider (IdP)”
If you can include the public signing key in the client, then you can validate all the tokens offline. There are plenty of JWT-token libraries out there that can do that for you. The most common case is that the client downloads the public key, but there is nothing stopping you from including it in the client. Just be careful if you update the keys in Keycloak, that you also update the client key. To identify the user, classic session cookies are typically used. Using cookies is a well proven and secure way to identify the user after he has logged in. Assuming you protect the cookies in the right way. (samesite, secure, httponly) This is a good video on the topic: alert‘OAuth 2 0’; // The im
Recommends Tore Nestenius · 2021-12 · Stack Overflow · on “Keycloak public vs confidental client”
You typically tend to move to the BFF-pattern to better secure your SPA applications so that you do not have to deal with tokens directly in the SPA application. Do read more about the SPA pattern here: The BFF Pattern (Backend for Frontend): An Introduction [LINK] This video is also a good intro to what you have to do: alert‘OAuth 2 0’; // The impact of XSS on OAuth 2 0 in SPAs [this video]
Recommends Tore Nestenius · 2022-01 · Stack Overflow · on “Reference token management”
To get automatic refresh token management, I would recommend that you use the IdentityModel library [LINK] from the authors of IdentityServer. You can set the UpdateAccessTokenClaimsOnRefresh flag to true in the client definition, then you will get updated claims when you refresh the access token. For dealing with tokens in the browser, I would recommend watchin this video alert‘OAuth 2 0’; // The impact of XSS on OAuth 2 0 in SPAs [this video] then visit the Backend for Frontend (BFF) Security Framework library [LINK] .
Recommends Tore Nestenius · 2022-01 · Stack Overflow · on “Login when using OpenID for First Party authentication”
For new projects I would recommend that you consider storing the tokens only in the backend and not in the browser. It is better to only use classic session cookies between the browser and the backend. Do check out this video for more details: alert‘OAuth 2 0’; // The impact of XSS on OAuth 2 0 in SPAs [this video] This is another good resource: The BFF Pattern (Backend for Frontend): An Introduction [LINK]
Recommends Tore Nestenius · 2022-01 · Stack Overflow · on “How to avoid client imposters in OAuth / OIDC”
The solution is to not do it in the browser at all, but instead do all the sensitive things in the backend, preferable using the BFF pattern as described in these two videos: alert‘OAuth 2 0’; // The impact of XSS on OAuth 2 0 in SPAs [this video] Using the BFF pattern to secure SPA and Blazor Applications [LINK] Storing tokens or client secrets in the browser is a impossible thing to properly secure, so the solution is not to do it at all in the browser.