ATIVIDADES · DIAGRAMAS DE ARQUITETURA

MPA e SPA: duas formas de entregar a mesma aplicação.

Os diagramas mostram o caminho de uma requisição em uma aplicação de múltiplas páginas e em uma aplicação de página única. Em ambos os casos, o WAF pode analisar a chamada antes da aplicação responder.

DIAGRAMA 01 · MULTI-PAGE APPLICATION

MPA: cada rota solicita um novo documento.

Uma aplicação PHP tradicional é um exemplo comum: ao abrir uma rota, o navegador espera uma resposta HTML completa e substitui a página atual.

FLUXO DE NAVEGAÇÃO

MPA com Nginx, WAF e PHP

O WAF fica entre a requisição e o PHP. Se o risco ultrapassar o limiar, a aplicação não é executada.

HTML por rota
NavegadorClica em uma rota, por exemplo /produtos
NginxRecebe a navegação e encaminha a verificação
WAF + IACalcula o risco e permite ou bloqueia
PHPRenderiza a página HTML da rota permitida

Resposta: o PHP devolve HTML ao navegador. Uma nova rota normalmente provoca uma nova navegação e uma nova renderização de documento.

DIAGRAMA 02 · SINGLE-PAGE APPLICATION

SPA: a página permanece; os dados mudam.

O navegador recebe o HTML e JavaScript inicial uma vez. Depois, os eventos da interface fazem chamadas à API e o JavaScript atualiza parte da tela sem trocar o documento inteiro.

FLUXO DE DADOS

SPA com API protegida por WAF

O WAF protege as chamadas de API. A resposta permitida costuma ser JSON, que o JavaScript usa para alterar a interface.

JSON sem recarregar a página
SPA no navegadorUsuário interage; JavaScript faz fetch para /api
Nginx / APIRecebe a chamada de dados da interface
WAF + IABloqueia com 403 ou permite a chamada
API / PHPDevolve JSON para o JavaScript atualizar a tela

Resposta: quando recebe JSON, o JavaScript muda apenas o componente necessário. Se o WAF devolver 403, a SPA pode informar o bloqueio sem abandonar a página.

COMPARAÇÃO PRÁTICA

O WAF protege a borda, independente do tipo de interface.

Quando pensar em MPA

  • Páginas renderizadas no servidor e rotas orientadas a documentos.
  • Fluxo tradicional de PHP, formulários e navegação completa.
  • O WAF intercepta a solicitação antes do código da rota renderizar o HTML.

Quando pensar em SPA

  • Interface altamente interativa, com estado mantido no navegador.
  • Dados obtidos por API e exibidos sem recarga do documento.
  • O WAF intercepta cada chamada da API antes de devolver JSON à interface.

APLIQUE NO DESAFIO

Use o diagrama para explicar sua implementação do WAF.

Na entrega, indique qual requisição o modelo recebe, onde ocorre o bloqueio e qual resposta é devolvida à interface.

Voltar ao desafio do WAF →