Content Security Policy (CSP)
Header HTTP que define quais scripts/recursos podem executar. Defesa principal contra XSS.
Definição
CSP (Content-Security-Policy) é um header HTTP que instrui o browser sobre quais sources de scripts, styles, images, etc podem ser carregados. Bloqueia inline scripts, scripts de domínios não permitidos, eval(). Essencial para defesa em profundidade contra XSS.
Problema → Solução
Problema
Mesmo com sanitização, XSS pode acontecer. CSP é a 'última linha de defesa' — mesmo que script malicioso seja injetado, o browser bloqueia execução.Solução
Configurar CSP estrito: script-src 'self' (e nonces para inline). Bloquear eval() com a ausência de unsafe-eval. Reportar violações via report-uri.Dica de entrevista
Tip
CSP é difícil de implementar do zero — quebra muitas libs/extensões. Use 'Content-Security-Policy-Report-Only' primeiro para detectar violações antes de impor.Código
// next.config.js
module.exports = {
async headers() {
return [{
source: '/:path*',
headers: [{
key: 'Content-Security-Policy',
value: `
default-src 'self';
script-src 'self' 'nonce-XYZ' https://vercel.live;
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
font-src 'self' data:;
connect-src 'self' https://api.example.com;
frame-ancestors 'none';
`.replace(/\s+/g, ' ').trim()
}]
}];
}
};Perguntas de entrevista
Q.CSP no Next.js — como configurar?▾
A.Via headers() em next.config.js OU em middleware.ts (Edge). Inline scripts do Next.js precisam de nonces — middleware gera nonce, layout consome via headers().
Q.O que é 'unsafe-inline' e por que evitar?▾
A.Diretiva que permite scripts inline (tags script com código direto no HTML). Anula a maior proteção do CSP contra XSS. Use nonces ou hashes para inline necessário, nunca unsafe-inline.
Q.CSP afeta extensões do browser?▾
A.Não — extensões têm permissões próprias. CSP bloqueia apenas o que vem do servidor. Mas algumas extensões (analytics, A/B testing) podem ser bloqueadas se forem injetadas via tags.
Termos relacionados
48/122← →