YouMind
Accedi

Spostare i token fuori dal browser con il pattern BFF

@farstep_
GIAPPONESE01 giu 2026
295K
604
38
0
1.1K

TL;DR

Questo articolo spiega come il pattern BFF protegga le applicazioni SPA gestendo i token OAuth sul lato server e utilizzando cookie HttpOnly, riducendo significativamente l'impatto delle vulnerabilità XSS.

Ecco la traduzione in italiano del testo fornito:

Quando si gestisce OAuth in una Single Page Application (SPA), dove archiviare i token di accesso e di aggiornamento è un dibattito di lunga data. localStorage, sessionStorage e variabili in-memory sono tutti insufficienti contro XSS. Il pattern Backend for Frontend (BFF) è un design in cui i token sono conservati lato server invece di essere passati al browser. Questo articolo organizza il meccanismo e i punti chiave di implementazione.

Prerequisiti

Questo articolo presuppone il seguente ambiente:

  • Sviluppo di un'app basata su browser che utilizza OAuth 2.0 e OpenID Connect.
  • Esistenza di una SPA, delle API che chiama e di un server di autorizzazione.
  • La SPA e i suoi componenti server di supporto possono essere posizionati sullo stesso dominio padre.
  • HTTPS è un prerequisito (richiesto per l'emissione di Secure Cookies).

Rischi XSS nelle App Basate su Browser

Il codice applicativo eseguito nel browser è vulnerabile a tutto ciò che accade nell'ambiente di esecuzione del browser. XSS ha un ampio impatto e, poiché il codice di attacco viene eseguito nello stesso contesto dell'app, sono possibili le seguenti operazioni:

  • Lettura dei valori archiviati in localStorage o sessionStorage.
  • Lettura di variabili in-memory accessibili da JavaScript.
  • Esecuzione di tutte le chiamate API che l'app può eseguire.
  • Modifica del comportamento sovrascrivendo funzioni integrate (prototype pollution).

Esistono molteplici punti di ingresso per XSS, come vulnerabilità nelle librerie dipendenti, difetti nell'elaborazione input/output del proprio codice o compromissione di script di terze parti. Poiché è difficile prevenire completamente XSS, una politica realistica è "limitare l'impatto se si verifica un'intrusione".

Finché i token sono posizionati nel browser, rimane la possibilità che vengano rubati tramite XSS. Se un utente malintenzionato utilizza un refresh token rubato nel proprio ambiente, può chiamare le API per molto tempo anche dopo che l'utente ha chiuso il sito web. Sebbene la rotazione dei token e i timeout di inattività possano mitigare l'impatto, non sono soluzioni fondamentali.

Design Che Non Posiziona i Token nel Browser

Il pattern BFF fornisce un componente lato server dedicato alla SPA e centralizza lì le responsabilità del client OAuth. La SPA non gestisce direttamente l'elaborazione OAuth, ma esegue l'autenticazione e le chiamate API tramite il BFF.

La suddivisione dei ruoli è la seguente:

  • Comunicazione del protocollo OAuth con il server di autorizzazione: Gestita dal BFF.
  • Conservazione dei token di accesso e aggiornamento: Solo BFF.
  • Mantenimento dello stato di autenticazione tra SPA e BFF: HttpOnly Cookie.
  • Chiamate API: La SPA invia richieste al BFF e il BFF converte il Cookie in un token e lo inoltra all'API.

In questa configurazione, i token circolano solo tra il BFF e le API che chiama e sono invisibili al JavaScript del browser. Anche se si verifica XSS, un utente malintenzionato non può estrarre il token e usarlo altrove. Tutto ciò che un utente malintenzionato può fare è inviare richieste al BFF nell'ambito della sessione attualmente aperta dall'utente. Sebbene questo impatto non sia trascurabile, la durata e la portata dell'impatto sono significativamente limitate rispetto al furto di token.

Il BFF agisce come ciò che la terminologia OAuth chiama un "confidential client". Possiede un client secret e completa lo scambio di codici di autorizzazione per token e l'elaborazione del refresh interamente lato server.

Flusso di Autenticazione

Un flusso di autenticazione tipico è il seguente:

farstep on X — cover
  1. Quando la SPA avvia un login, invia una richiesta di login al BFF.
  2. Il BFF avvia un flusso di codice di autorizzazione con PKCE, genera un URL di reindirizzamento al server di autorizzazione e lo restituisce alla SPA.
  3. La SPA fa transitare il browser a quell'URL e l'utente si autentica presso il server di autorizzazione.
  4. Il server di autorizzazione restituisce un codice di autorizzazione all'URI di reindirizzamento del BFF.
  5. Il BFF scambia il codice di autorizzazione con i token e ottiene un token di accesso e un refresh token.
  6. Il BFF archivia i token nella propria area sicura (cookie crittografato, archivio di sessione lato server, ecc.) e restituisce solo un identificatore di sessione alla SPA tramite un HttpOnly Cookie.
  7. Quando la SPA chiama un'API, invia la richiesta tramite il BFF. Il Cookie viene inviato contemporaneamente e il BFF lo converte in un token di accesso e lo inoltra all'API upstream.
  8. Se il token di accesso scade, il BFF lo aggiorna silenziosamente utilizzando il refresh token.

Dal punto di vista della SPA, lo stato di login è mantenuto dal Cookie e le richieste API vengono completate con normali chiamate fetch. Il codice che gestisce direttamente i token OAuth o i codici di autorizzazione non esiste nella SPA.

Impostazioni di Sicurezza Richieste

Per il Cookie emesso dal BFF devono essere impostati i seguenti attributi:

  • HttpOnly: Proibisce l'accesso da JavaScript. Anche con XSS, il contenuto del Cookie non può essere letto.
  • Secure: Inviato solo su HTTPS.
  • SameSite=Strict: Assicura che il Cookie non venga inviato con richieste da altri siti. Questo aiuta a bloccare i principali percorsi di attacco CSRF, ma la protezione CSRF non è completata solo da questo.
  • Prefisso __Host-: Aggiungere il prefisso __Host- al nome del Cookie garantisce che il browser limiti il Cookie all'host emittente e non lo condivida con i sottodomini.

Se si archiviano i token in un Cookie crittografato (sessione lato client), il contenuto del Cookie viene crittografato. Se si posizionano i token in un archivio di sessione lato server (sessione lato server), il Cookie contiene solo un identificatore di sessione, quindi la crittografia non è necessaria.

La Protezione CSRF Non Dovrebbe Fare Affidamento Solo su SameSite

Poiché utilizza l'autenticazione basata su Cookie, il BFF deve implementare la protezione contro CSRF. SameSite=Strict è un passo valido, ma non l'intera soluzione. È necessaria cautela specialmente nelle configurazioni in cui la SPA è posizionata su www.example.com e il BFF su api.example.com. Poiché la determinazione SameSite viene effettuata per sito anziché per origine, le richieste da altri sottodomini sotto example.com sono considerate "stesso sito" e i Cookie verranno inviati anche con SameSite=Strict.

Pertanto, rinforzare la difesa CSRF con uno dei seguenti metodi:

  • Se BFF e SPA sono su origini diverse, utilizzare CORS e la convalida dell'header Origin per la difesa.
  • Per le richieste che modificano lo stato, verificare i token CSRF utilizzando il metodo anti-forgery / double-submit cookie.

Limitare CORS alle Origini Esatte

CORS dovrebbe essere consentito solo per l'origine esatta della SPA. Per le richieste con credenziali che coinvolgono Cookie, i browser non consentono caratteri jolly (*) in Access-Control-Allow-Origin. Pertanto, il BFF deve riflettere l'origine esatta della SPA nella risposta. Questa limitazione rigorosa delle origini consentite funge da parte della difesa CSRF.

È necessaria la gestione delle chiavi per i dati di sessione detenuti dal BFF, in particolare le informazioni sui token archiviate in Cookie crittografati. Incorporare operazioni per iniettare in modo sicuro le chiavi come impostazioni BFF e ruotarle regolarmente.

Si noti che posizionare la SPA e il BFF sullo stesso dominio padre serve a soddisfare la condizione affinché i Same-Site Cookies funzionino come cookie di prima parte.

Evoluzione: BFF Guidato dalle API

Se un BFF viene costruito come un'app web tradizionale, il rendering lato server del BFF viene coinvolto nelle transizioni di pagina della SPA. Un BFF guidato dalle API minimizza questo impatto.

I ruoli sono suddivisi in due:

  • OAuth Agent: Un'API responsabile dell'elaborazione del protocollo OAuth. Viene chiamata dalla SPA tramite JSON.
  • OAuth Proxy: Opera come plugin del gateway API, estrae il token dal Cookie e lo inoltra all'API upstream.

In questa configurazione, la SPA chiama semplicemente l'OAuth Agent come una normale API REST. L'esperienza di sviluppo frontend della SPA può essere mantenuta quasi uguale a prima dell'introduzione del BFF.

Considerazioni per l'Adozione

Quando si adotta il pattern BFF, considerare quanto segue:

  • Ulteriori componenti architetturali aumentano i costi di sviluppo e operativi.
  • La SPA e il BFF devono essere posizionati sullo stesso dominio padre.
  • Una configurazione che inoltra semplicemente l'header Authorization tramite un reverse proxy non è un BFF. L'essenza di un BFF è detenere il token come confidential client.
  • PKCE e BFF sono usati insieme, non come alternative.
  • Il BFF deve verificare l'host di destinazione prima di inoltrare per prevenire l'esposizione del token a host non previsti.
  • La progettazione del logout diventa complessa poiché le sessioni SPA, i cookie BFF e le sessioni del server di autorizzazione devono essere tutte collegate.

Riepilogo

Un modo pratico per gestire i token in modo sicuro nelle app basate su browser è non posizionarli nel browser. Il pattern BFF sposta le responsabilità del client OAuth lato server e passa solo HttpOnly Cookies al browser. Ciò impedisce il furto di token anche se si verifica XSS. Suddividendo i ruoli in OAuth Agent e OAuth Proxy, la sicurezza può essere rafforzata mantenendo l'esperienza di sviluppo della SPA.

Salva con un clic

Leggi in profondità gli articoli virali con l’AI di YouMind

Salva la fonte, fai domande mirate, riassumi l’argomentazione e trasforma un articolo virale in note riutilizzabili in un unico spazio di lavoro AI.

Scopri YouMind
Per i creator

Trasforma il tuo Markdown in un articolo 𝕏 pulito

Quando pubblichi i tuoi testi lunghi, formattare immagini, tabelle e blocchi di codice per 𝕏 è una seccatura. YouMind trasforma un'intera bozza Markdown in un articolo 𝕏 pulito e pronto da pubblicare.

Prova Markdown verso 𝕏

Altri pattern da decodificare

Articoli virali recenti

Esplora altri articoli virali