Lion Cipher Lab

Secure a single-page app with the Backend-for-Frontend (BFF) pattern — get OAuth tokens out of the browser

• AppSec / DevSecOps
• Advanced
• ~90 min
• Free · no account required

Why it matters

Most single-page apps store their OAuth access and refresh tokens in localStorage or a JavaScript variable. That is a design flaw, not a bug: an access token is a bearer token, meaning whoever holds it IS the user, anywhere, until it expires. A single cross-site scripting (XSS) flaw anywhere on the page — in your code or in any third-party script you load — can read localStorage and mail every token to an attacker in one line. The current IETF best practice for browser apps is the Backend-for-Frontend (BFF): keep the tokens on a small server you control, give the browser only an httpOnly…

What you'll learn

• OAuth 2.0 / OIDC token handling
• Backend-for-Frontend (BFF) pattern
• httpOnly / Secure / SameSite cookies
• CSRF defense
• reverse-proxy allow-listing
• XSS token-theft threat modeling

Steps in this lab

1. The one idea behind this whole lab
2. Set up an empty project folder
3. Part 1 — Build the BROKEN version and steal your own token
4. Why httpOnly cookies are immune to that exact line
5. Part 2 — Build the BFF server (tokens stay server-side)
6. Part 3 — Prove it from the command line with curl
7. The catch: cookies re-introduce CSRF — and how you closed it
8. Named failure modes — how a BFF gets built wrong
9. When NOT to reach for a BFF

Open the full interactive lab →