O que é Content Security Policy (CSP) e Como Prevenir XSS?
Domine o CSP Level 3: sintaxe de diretivas, uso de nonces criptográficos rigorosos, hashes e cabeçalhos zero-trust.
Web Protocols & Security Architecture Research
O que é Content Security Policy (CSP) e Como Prevenir XSS?
TL;DR — Principais Conclusões de Engenharia
- O CSP é um cabeçalho de resposta HTTP que define quais origens podem carregar scripts, estilos e recursos na página.
- É a principal linha de defesa contra Cross-Site Scripting (XSS) e injeções de dados no navegador.
- O CSP Level 3 moderno recomenda nonces criptográficos (
'nonce-{random}') e hashes em vez de listas de domínios. - A diretiva
frame-ancestors 'none'substitui oX-Frame-Optionspara neutralizar Clickjacking. - Use
Content-Security-Policy-Report-Onlypara testar e monitorar violações em produção sem quebrar o site.
Conceitos Centrais e Arquitetura
default-src
DirectivesThe fundamental fallback directive governing all unspecified resource types (scripts, images, fonts, styles).
Cryptographic Nonces
NoncesSingle-use random tokens generated per-request and passed in both the CSP header and `<script nonce="...">` tags.
strict-dynamic
ModernCSPCSP Level 3 directive allowing a trusted script with a valid nonce to load subsequent child scripts without domain allowlists.
frame-ancestors
ClickjackingReplaces legacy `X-Frame-Options` by declaring which parent origins are allowed to embed the page in iframes.
report-to / report-uri
TelemetrySpecifies an endpoint where the browser dispatches JSON violation reports whenever a policy breach is detected.
Como funciona O que é Content Security Policy (CSP) e Como Prevenir XSS??
When the browser receives an HTTP response containing a `Content-Security-Policy` header, its security manager parses the directive list into a memory policy tree. As the HTML parser encounters external resources or inline scripts, it queries the policy engine. If an inline script lacks a matching cryptographic nonce or SHA-256 hash, or if an image originates from an unlisted host, the browser blocks execution immediately and posts a JSON violation report.
Server Generates Nonce
For every incoming HTTP request, backend generates a high-entropy random base64 string.
const nonce = crypto.randomBytes(16).toString("base64");Header Injection
Server sends CSP header binding the nonce to script-src and setting default restrictions.
Content-Security-Policy: default-src 'self'; script-src 'nonce-${nonce}' 'strict-dynamic';HTML Template Rendering
Server attaches the identical nonce attribute to authorized script tags in HTML markup.
<script nonce="${nonce}" src="/app.js"></script>Browser Evaluation
Browser compares script tag nonce against header value; matches proceed, mismatches trigger violations.
Match: Execute script. Mismatch or Missing: Drop & Log Violation.Violation Reporting
Browser transmits structured JSON report to configured report-to endpoint for observability.
POST /csp-reports {"csp-report": {"blocked-uri": "eval", "violated-directive": "script-src"}}Como implementar O que é Content Security Policy (CSP) e Como Prevenir XSS? na prática?
Google-Recommended Strict Nonce-Based CSP (Level 3)
httpContent-Security-Policy:
default-src 'self';
script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa' 'strict-dynamic' https: 'unsafe-inline';
style-src 'self' 'unsafe-inline';
object-src 'none';
base-uri 'self';
frame-ancestors 'none';Detalhes de Engenharia: The modern gold standard: `'strict-dynamic'` trusts scripts loaded by nonced scripts; `'unsafe-inline'` is ignored by modern browsers when a nonce is present, providing backwards compatibility for legacy browsers.
Express.js Implementation using Helmet Middleware
javascriptimport express from "express";
import helmet from "helmet";
import crypto from "crypto";
const app = express();
// Generate cryptographic nonce per-request
app.use((req, res, next) => {
res.locals.cspNonce = crypto.randomBytes(16).toString("base64");
next();
});
app.use((req, res, next) => {
helmet.contentSecurityPolicy({
directives: {
defaultSrc: ["'self'"],
scriptSrc: ["'self'", (req, res) => `'nonce-${res.locals.cspNonce}'`, "'strict-dynamic'"],
objectSrc: ["'none'"],
baseUri: ["'self'"],
upgradeInsecureRequests: [],
},
})(req, res, next);
});Detalhes de Engenharia: Generates a unique 128-bit cryptographic nonce on every request and injects it into both Helmet CSP and template response locals.
Onde e por que O que é Content Security Policy (CSP) e Como Prevenir XSS? é usado em produção?
Preventing malicious third-party tag managers or browser extensions from exfiltrating medical records.
Locking down `connect-src` and `form-action` strictly to internal API domains so stolen data cannot be transmitted to external servers.
Stopping e-skimming attacks where compromised third-party scripts steal checkout credit card details.
Using strict CSP `script-src` and `connect-src` restrictions to block unauthorized external script injection at checkout steps.
Quais são os erros comuns com O que é Content Security Policy (CSP) e Como Prevenir XSS??
Impacto: Allows any injected `<script>evil()</script>` payload to run, rendering CSP almost entirely ineffective against XSS.
Correção Recomendada: Migrate inline JavaScript to external files or supply cryptographic nonces on all script tags.
Impacto: Enables attackers to inject malicious Flash, Java, or PDF plugin objects that bypass script execution filters.
Correção Recomendada: Always include `object-src 'none';` explicitly in every CSP policy.
Impacto: Inadvertently breaks legitimate analytics, payment gateways, or customer widgets, causing severe site outages.
Correção Recomendada: Deploy first using `Content-Security-Policy-Report-Only` for 1-2 weeks; analyze violation logs before enforcing.
Quais são as implicações e riscos de segurança de O que é Content Security Policy (CSP) e Como Prevenir XSS??
DOM-Based Cross-Site Scripting (DOM XSS)
OWASP Top 10 Injection / CWE-79Vulnerabilidade: Application passes untrusted input into execution sinks like `eval()`, `setTimeout(string)`, or `new Function()`.
Base Tag Hijacking (Base-URI Manipulation)
CWE-444 Inconsistent InterpretationVulnerabilidade: Attacker injects `<base href="https://attacker.com">`, forcing all relative script URLs to load from the attacker’s domain.
Como diagnosticar e resolver erros com O que é Content Security Policy (CSP) e Como Prevenir XSS??
Sintomas e Indicações Clínicas: Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'"
- Inline script tags (`<script>...</script>`) present in HTML without nonce or hash
- HTML event handlers (`onclick="..."`) used in markup
Sintomas e Indicações Clínicas: Refused to connect to "https://analytics.vendor.com" because it violates directive: "default-src 'self'"
- `connect-src` is missing from CSP and fell back to `default-src 'self'`
Perguntas Frequentes sobre O que é Content Security Policy (CSP) e Como Prevenir XSS?
Q:What is the difference between CSP Nonce and CSP Hash?
Nonces require a dynamic backend server (Node, Go, Python) to generate fresh random values on each page load. Static sites (JAMstack, Astro static builds) use SHA-256 hashes (`'sha256-xyz'`) calculated from the script contents.
Q:Does Content Security Policy completely eliminate XSS?
CSP cannot prevent logic flaws or server-side template injection before HTML generation, but it stops the attacker’s payload from executing in the browser or contacting outside command-and-control servers.
Ferramentas Relacionadas
Execução 100% no Cliente
Glossário
References & Primary Sources
Every source below directly substantiates technical statements and protocol behaviors explained in O que é Content Security Policy (CSP) e Como Prevenir XSS?. Curious-Techie prioritizes official Internet standards (IETF RFCs, W3C Recommendations, WHATWG specifications) and established security bodies (OWASP, NIST). Zero sponsored or secondary links.
- [1]W3CPrimary SpecificationW3C CSP Level 3 • Section 2 & 3Verified Primary SourceTechnical Claim Supported:
Normative specification for Content-Security-Policy HTTP headers, directive fallback inheritance from default-src, and cryptographic nonce/hash-based script execution.
“A server can specify a policy for a resource that the user agent will enforce, restricting the execution of scripts, stylesheets, and embedded frames.”Source URI: https://www.w3.org/TR/CSP3/ - [2]OWASPAuthoritative Security StandardOWASP Cheat Sheet Series • Strict CSP & XSS MitigationVerified Primary SourceTechnical Claim Supported:
Authoritative security guide for strict CSP deployment using per-request cryptographic nonces and strict-dynamic to neutralize Reflected and Stored XSS.
- [3]MDNDeveloper Authority (MDN)MDN Web Docs • CSP Directives ReferenceVerified Primary SourceTechnical Claim Supported:
Reference documentation for browser implementation of CSP directives including script-src, frame-ancestors, object-src, and report-to.
Ecossistema Técnico Relacionado e Próximos Passos
Ferramentas Relacionadas
Artigos Técnicos Relacionados
Perguntas Relacionadas
Especificações e Referências para Desenvolvedores
Continuar Aprendendo
Content Security Policy (CSP) Hands-On Lab
Step into the interactive lab to defend a vulnerable DOM application with strict CSP nonces.