Content-Security-Policy (CSP): o que é e como adicionar uma
Content-Security-Policy (CSP) é um cabeçalho de resposta HTTP que informa ao navegador quais origens de script, estilo e outros conteúdos ele pode carregar e executar. Uma boa CSP é uma das defesas mais fortes contra cross-site scripting (XSS).
O que é
A CSP é uma lista de permissões aplicada pelo navegador. Quando seu servidor envia um cabeçalho Content-Security-Policy, o navegador se recusa a carregar ou executar qualquer coisa que a política não permita explicitamente — scripts inline, domínios de terceiros, eval() e por aí vai.
Uma política é uma lista de diretivas. Por exemplo, script-src 'self' significa "só execute JavaScript servido da minha própria origem", enquanto object-src 'none' bloqueia totalmente os plugins legados.
Por que importa
Sem CSP, qualquer falha de injeção de HTML ou XSS deixa um atacante executar JavaScript arbitrário nos navegadores dos seus usuários — roubando sessões, reescrevendo a página ou exfiltrando dados.
Uma CSP fraca é quase tão ruim quanto nenhuma. 'unsafe-inline' volta a permitir os scripts inline dos quais os atacantes dependem, e uma origem curinga como script-src * deixa o script carregar de qualquer lugar, anulando o propósito.
Como corrigir
Defina o cabeçalho no next.config.js para que ele se aplique a todas as respostas. Comece estrito e afrouxe apenas onde for necessário.
// next.config.js
const csp = [
"default-src 'self'",
"script-src 'self'",
"style-src 'self' 'unsafe-inline'",
"img-src 'self' data:",
"base-uri 'none'",
"frame-ancestors 'none'",
"object-src 'none'",
].join("; ");
module.exports = {
async headers() {
return [{ source: "/:path*", headers: [{ key: "Content-Security-Policy", value: csp }] }];
},
};Se você precisa de scripts inline, gere um nonce por requisição e adicione-o tanto na tag script quanto na política (script-src 'self' 'nonce-<value>') em vez de usar 'unsafe-inline'.
base-uri 'none', frame-ancestors 'none' e object-src 'none' fecham brechas comuns (injeção de tag base, clickjacking e incorporação de plugins) e são padrões seguros para a maioria dos apps.
FAQ
Uma CSP deixa meu site mais lento?
Não. A CSP é só um cabeçalho que o navegador avalia; ela não adiciona latência mensurável. O custo real é o trabalho de engenharia para remover os scripts inline.
Qual é a diferença entre Content-Security-Policy e X-Frame-Options?
X-Frame-Options só controla o enquadramento em iframe (clickjacking). A diretiva frame-ancestors da CSP a substitui, e a CSP também governa scripts, estilos, imagens e mais.
Seu app está afetado?
O AppSafe verifica isso e dezenas de outros problemas em um único escaneamento grátis.
Escanear meu app grátis