Política de segurança de conteúdo para aplicações React

A Política de Segurança de Conteúdo (CSP) é um cabeçalho de resposta HTTP que informa ao navegador quais fontes de conteúdo são confiáveis. Ao declarar exatamente quais scripts, estilos, imagens e fontes podem ser carregados, a CSP impede que conteúdo malicioso injetado seja executado — mesmo que uma vulnerabilidade XSS permita ao invasor injetar HTML na página.

default-src 'self' define a base: todos os tipos de recurso (scripts, estilos, imagens, fontes e quadros) só podem ser carregados da mesma origem. script-src 'self' restringe o carregamento de scripts à mesma origem, bloqueando scripts de CDN externas, a menos que sejam listadas explicitamente. Juntas, essas duas diretivas formam a base de uma CSP restritiva.

eval() converte uma cadeia de caracteres em código executável durante a execução — exatamente o que as cargas XSS precisam. Uma CSP com script-src 'self' (sem 'unsafe-eval') bloqueia eval() e funções relacionadas, como new Function() e setTimeout(string). Isso elimina uma classe importante de execução de cargas XSS.

'strict-dynamic' em script-src concede confiança aos scripts carregados por scripts que já são confiáveis. Isso permite os padrões de carregamento dinâmico de scripts usados por ferramentas de empacotamento, sem exigir que você autorize o endereço de cada CDN. Um script confiável pode carregar scripts adicionais, que herdam essa confiança.

Se a sua aplicação precisar de um script inline específico (como um trecho de inicialização de análise), você poderá calcular seu hash SHA-256 e adicionar 'sha256-base64hash' a script-src. Somente scripts que correspondam exatamente a esse hash poderão ser executados inline. Qualquer script injetado por um invasor terá um hash diferente e será bloqueado.

Um nonce é um valor aleatório gerado criptograficamente pelo servidor para cada solicitação. O servidor adiciona o nonce tanto à tag de script (<script nonce="abc123">) quanto ao cabeçalho da CSP (script-src 'nonce-abc123'). Somente scripts que contenham o nonce correto são executados. Os invasores não conseguem prever o nonce e, portanto, não podem usá-lo nos scripts injetados.

A CSP permite relatar violações por meio de report-uri /csp-violation-endpoint ou da diretiva mais recente report-to. Quando o navegador bloqueia um recurso por causa da CSP, ele envia um relatório JSON ao endpoint. Monitorar esses relatórios ajuda a identificar tanto problemas legítimos de configuração quanto tentativas ativas de ataque.

No Next.js, adicione cabeçalhos de CSP ao middleware: crie middleware.ts, gere um nonce, defina o cabeçalho Content-Security-Policy e passe o nonce à página por meio de um cabeçalho de resposta. O layout da página lê o nonce do cabeçalho e o aplica a todos os scripts inline e às tags de estilo.

Content-Security-Policy-Report-Only é o modo de teste: o navegador não aplica nenhum bloqueio, mas envia relatórios de violação para tudo que teria sido bloqueado. Implante primeiro no modo Report-Only, corrija todas as violações e depois mude para o cabeçalho Content-Security-Policy, que aplica os bloqueios, para evitar interromper a aplicação.

Quando a CSP bloqueia um recurso, o console do Chrome DevTools exibe uma mensagem de erro vermelha que identifica a URL bloqueada e a diretiva violada. Essas mensagens são inestimáveis durante o desenvolvimento e os testes. Cada violação precisa ser resolvida corrigindo a política, movendo o recurso para uma fonte permitida ou usando um nonce ou hash.

Uma CSP prática para uma SPA React: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. A diretiva frame-ancestors 'none' também impede o sequestro de cliques, bloqueando a incorporação da sua aplicação em quadros.

O que script-src 'self' em uma Política de Segurança de Conteúdo impede?

A CSP é um cabeçalho HTTP que declara fontes de conteúdo confiáveis. default-src 'self' e script-src 'self' bloqueiam scripts externos e eval. Scripts inline podem ser permitidos por meio de hashes ou nonces. 'strict-dynamic' permite o carregamento dinâmico de scripts. Use Content-Security-Policy-Report-Only para testar antes de aplicar os bloqueios. O Next.js implementa a CSP por meio do middleware. O console do DevTools mostra as violações em tempo real.