Política de Segurança de Conteúdo: nonce e hash
Escrever uma CSP rigorosa com nonces para scripts incorporados, hashes para trechos conhecidos e report-uri para monitorizar violações em produção.
Política de Segurança de Conteúdo: nonce e hash é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Recapitulação do CSP
O CSP é um cabeçalho HTTP que coloca em uma lista de permissões o que o navegador pode carregar — scripts, estilos, imagens, fontes, quadros e conexões. Defesa em profundidade: mesmo que o XSS passe pelos seus filtros, o CSP geralmente interrompe a carga maliciosa.
Anatomia do cabeçalho CSP
Cada diretiva lista as fontes permitidas. 'self' significa mesma origem. URLs específicas também são permitidas.
Content-Security-Policy:
default-src 'self';
script-src 'self' https://cdn.example.com;
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
connect-src 'self' https://api.example.com;
font-src 'self' https://fonts.gstatic.com;
frame-ancestors 'none';
base-uri 'self';Diretivas comuns
default-src: alternativa para tudo. script-src: JavaScript. style-src: CSS. img-src: imagens. connect-src: fetch/XHR/WebSocket. font-src: fontes. frame-ancestors: quem pode incorporá-lo em um quadro (proteção contra sequestro de cliques).
'unsafe-inline' — a brecha comum
Muitos sites adicionam 'unsafe-inline' para permitir tags <script> e atributos onclick incorporados. Isso anula o principal objetivo do CSP — cargas maliciosas de XSS podem ser executadas de forma incorporada. Substitua-o por nonces ou hashes.
Nonces — lista de permissões de uso único
Gere um nonce aleatório por solicitação. Marque os scripts incorporados legítimos com esse nonce. O navegador permite somente scripts com nonces correspondentes.
// Server (Express middleware):
import crypto from 'crypto';
app.use((req, res, next) => {
res.locals.nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy',
`script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
);
next();
});
// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>'strict-dynamic'
Combine o nonce com 'strict-dynamic': scripts confiáveis, ou seja, aqueles com o nonce, podem carregar scripts adicionais. Isso elimina a necessidade de listar cada URL de origem de script. É a prática recomendada atual para CSP.
Hashes — lista de permissões estática
Para scripts incorporados conhecidos e fixos (por exemplo, quando sua compilação sempre emite o mesmo trecho de inicialização), calcule o SHA-256 e adicione-o como uma fonte de hash. Não é necessário um nonce por solicitação.
// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='Hashes de estilos incorporados
Use o mesmo método para tags <style> incorporadas: calcule o hash e adicione-o a style-src. É melhor do que 'unsafe-inline' para CSS.
Modo de relatório do CSP
Use Content-Security-Policy-Report-Only para testar uma política sem aplicá-la. As violações são enviadas ao seu endpoint, mas nada é bloqueado. É uma ótima opção para implementar o CSP gradualmente.
Content-Security-Policy-Report-Only:
default-src 'self';
report-uri /csp-violations
// /csp-violations receives POSTs like:
{
"csp-report": {
"document-uri": "https://example.com/",
"violated-directive": "script-src 'self'",
"blocked-uri": "https://evil.com/x.js"
}
}report-to (Moderno)
report-to + Reporting-Endpoints é a substituição moderna de report-uri. Os dados são os mesmos, mas têm uma estrutura melhor.
Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to cspIntegrações com frameworks
Next.js: defina o CSP por meio de middleware.ts ou dos cabeçalhos de next.config.js. Nuxt: módulo nuxt-security. Vite: configure os cabeçalhos do servidor de desenvolvimento; em produção, use a configuração de cabeçalhos do seu provedor (Vercel, Netlify).
// next.config.js
module.exports = {
async headers() {
return [{
source: '/(.*)',
headers: [{
key: 'Content-Security-Policy',
value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
}]
}];
}
};Testes do CSP
Abra DevTools → Console: as violações do CSP são registradas ali. Use https://csp-evaluator.withgoogle.com/ para avaliar sua política. Primeiro use o modo de somente relatório em produção; aplique a política depois de corrigir todas as violações.
Verificação rápida
Por que 'unsafe-inline' em uma diretiva script-src é considerado uma fraqueza do CSP?
Recapitulação: boas práticas do CSP
Defina o cabeçalho Content-Security-Policy com diretivas para cada tipo de recurso. Evite 'unsafe-inline' — use nonces + 'strict-dynamic' ou hashes SHA. Defina frame-ancestors 'none' (ou 'self'). Primeiro teste no modo de somente relatório. Envie as violações para /csp-violations (ou use o moderno report-to). Os frameworks oferecem suporte ao CSP por meio de middleware ou cabeçalhos de configuração.
Perguntas Frequentes
A aula “Política de Segurança de Conteúdo: nonce e hash” é grátis?
Sim — o texto completo de “Política de Segurança de Conteúdo: nonce e hash” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Política de Segurança de Conteúdo: nonce e hash”?
Escrever uma CSP rigorosa com nonces para scripts incorporados, hashes para trechos conhecidos e report-uri para monitorizar violações em produção. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Política de Segurança de Conteúdo: nonce e hash”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Prevenção de XSS: codificação de saída e CSP
- CSRF: cookies SameSite e tokens
- Política de Segurança de Conteúdo: nonce e hash
- Fluxos OAuth no frontend