Securing SPAs: The Backend for Frontend (BFF) Pattern

Detailed security audits often flag “Tokens in LocalStorage” as a vulnerability (XSS). The industry standard solution is the Backend for Frontend (BFF) pattern.

The Problem with Implicit Flow

If your React app holds the Access Token in the browser, any malicious script (XSS) can exfiltrate it.

The BFF Solution

sequenceDiagram
    participant Browser
    participant BFF as Backend (ASP.NET Core)
    participant Auth as Identity Provider
    participant API as Downstream API
    
    Browser->>BFF: Login Request
    BFF->>Auth: Exchange Code for Tokens
    Auth-->>BFF: Access + Refresh Token
    BFF-->>Browser: HttpOnly Cookie (Session)
    
    Browser->>BFF: API Request (Cookie)
    BFF->>BFF: Decrypt Cookie -> Retrieve Access Token
    BFF->>API: Request (Bearer Token)

The Browser never sees the token. It only sees an encrypted, HttpOnly, SameSite cookie. This eliminates the largest attack vector for SPAs.


Discover more from C4: Container, Code, Cloud & Context

Subscribe to get the latest posts sent to your email.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.