Pular para o conteúdo

BFF para o Frontend React

Aplicações com frontend React não devem guardar tokens de sessão em localStorage (alvo fácil de XSS). A Serigy adota o padrão BFF (Backend-for-Frontend): um backend dedicado ao frontend que mantém a sessão em cookies seguros e fala com as APIs internas.

O padrão

flowchart LR
    React["SPA React<br/>(navegador)"] <-->|cookie httpOnly + CSRF token| BFF["BFF<br/>(sessão server-side)"]
    BFF <-->|mTLS interno| API["APIs / serviços"]
    API <--> DB[("PostgreSQL")]

O token nunca chega ao JavaScript do navegador: ele vive na sessão do BFF, referenciada por um cookie que o script não consegue ler.

Atributo	Efeito
`HttpOnly`	JavaScript não lê o cookie → reduz roubo de sessão por XSS
`Secure`	Cookie só trafega por HTTPS
`SameSite` (`Lax`/`Strict`)	Limita envio em requisições cross-site → mitiga CSRF
CSRF token	Token sincronizado para requisições que mudam estado

O que cada camada mitiga

XSS — sem token no localStorage; HttpOnly impede leitura do cookie.
CSRF — SameSite + token CSRF nas operações de escrita.
Vazamento em trânsito — Secure (HTTPS) externamente, mTLS internamente entre BFF e APIs.
CSP — cabeçalho Content-Security-Policy restringe origens de script (violações de CSP também viram sinal de detecção).

Onde se aplica

Em qualquer aplicação da Serigy com SPA React. As aplicações de terceiros (GitLab, Nextcloud, Penpot) já trazem seu próprio modelo de sessão; o padrão BFF vale para os frontends próprios que a Serigy construir.