O que é Content-Security-Policy?

Content-Security-Policy (CSP) é um cabeçalho de resposta HTTP que ajuda a prevenir ataques de cross-site scripting (XSS), clickjacking e outras injeções de código. Funciona especificando quais fontes de conteúdo são permitidas carregar na sua página web.

Sem CSP

Estado Vulnerável

Navegadores carregam recursos de qualquer origem
Site exposto a injeção de scripts maliciosos
Sem controle sobre fontes de conteúdo
Risco maior de ataque XSS

Com CSP

Estado Protegido

Controle rigoroso sobre domínios permitidos
Bloqueia scripts não autorizados automaticamente
Permissões granulares de recursos
Camada de segurança em profundidade

Por que usar um Cabeçalho CSP?

Proteção contra XSS

Bloqueie scripts não autorizados de executar nas suas páginas, impedindo que atacantes injetem código malicioso através de vulnerabilidades.

Prevenção de Roubo de Dados

Controle para onde sua página pode enviar dados via fetch, XHR ou conexões WebSocket, prevenindo exfiltração de dados.

Defesa contra Clickjacking

Use a diretiva frame-ancestors para prevenir que seu site seja incorporado em iframes maliciosos para ataques de clickjacking.

Prevenção de Conteúdo Misto

Force HTTPS para todos os recursos com upgrade-insecure-requests, eliminando vulnerabilidades de conteúdo misto.

Como Esta Ferramenta Ajuda

Escrever cabeçalhos CSP manualmente é propenso a erros e requer memorizar nomes de diretivas e sintaxe de fontes. Este construtor visual permite alternar diretivas, clicar em valores de fonte e ver instantaneamente o cabeçalho gerado no formato que você precisa — seja HTTP bruto, Apache, Nginx ou PHP.

Benefício de economia de tempo: Configure políticas de segurança complexas em minutos em vez de horas, com validação em tempo real e conversão de formato integradas.

Table of Contents

1. O que é Content-Security-Policy?
2. Como Usar o Gerador de Cabeçalho CSP
3. Recursos
4. Perguntas Frequentes

Como Usar o Gerador de Cabeçalho CSP

Escolha um Ponto de Partida

Selecione um modelo predefinido para começar com uma configuração comum, ou comece com Em branco para construir do zero. Os modelos predefinidos disponíveis incluem Rigoroso, Site Básico, SPA + API, WordPress, E-commerce e configurações pesadas em CDN.

Configure Diretivas

Alterne diretivas ligadas ou desligadas clicando em sua caixa de seleção ou linha de cabeçalho. Quando uma diretiva está ativada, você pode:

Clicar em botões de fonte rápida ('self', 'none', 'unsafe-inline', etc.) para adicionar valores comuns
Digitar um domínio personalizado (por exemplo, cdn.example.com, *.googleapis.com) e clicar em Adicionar
Clicar em um botão de fonte novamente para removê-lo
Clicar no botão × nas tags de domínio personalizado para removê-las

Revise os Avisos

A ferramenta analisa automaticamente sua política e mostra avisos de segurança. Avisos vermelhos indicam riscos de segurança significativos, avisos amarelos sugerem melhorias e avisos azuis fornecem informações úteis.

Escolha o Formato de Saída

Selecione o formato de saída que corresponde ao seu servidor web:

Bruto - O valor do cabeçalho HTTP simples
Apache - Para arquivos .htaccess ou arquivos de configuração do Apache
Nginx - Para blocos de servidor nginx.conf
Meta Tag - Para tags HTML <meta> (nota: Report-Only não é suportado)
PHP - Para chamadas de função header() do PHP

Copie e Implante

Clique no botão Copiar para copiar o cabeçalho gerado para sua área de transferência. Considere ativar o modo Report-Only primeiro para testar sua política sem bloquear nenhum recurso.

Melhor prática: Sempre teste com o modo Report-Only em produção antes de aplicar a política para identificar possíveis problemas sem quebrar a funcionalidade.

Recursos

Construtor Visual de Diretivas

Cada diretiva CSP é exibida como uma linha interativa com um interruptor de alternância. Ative uma diretiva para revelar seu painel de configuração de fonte com botões de adição rápida e entrada de domínio personalizado. As diretivas são organizadas em quatro categorias: Fetch, Documento, Navegação e Outros.

Construtor de diretivas interativo com interruptores de alternância e botões de adição rápida de fonte

16 Diretivas Suportadas

Diretivas Fetch

Controle de onde diferentes tipos de recursos podem ser carregados:

default-src - Fallback para todas as diretivas fetch
script-src - Fontes de JavaScript
style-src - Folhas de estilo CSS
img-src - Imagens e favicons
connect-src - Conexões Fetch, XHR, WebSocket
font-src - Fontes web
object-src - Plugins (Flash, applets Java)
media-src - Áudio e vídeo
frame-src - Contextos de navegação aninhados (iframes)
worker-src - Web Workers e Service Workers
manifest-src - Manifestos de aplicativo web

Diretivas de Documento & Navegação

Controle do comportamento do documento e navegação:

base-uri - Restringe URLs que podem aparecer no elemento <base>
form-action - Endpoints válidos para envios de formulário
frame-ancestors - Pais válidos que podem incorporar esta página (proteção contra clickjacking)

Importante: frame-ancestors não pode ser definido via meta tag — requer um cabeçalho HTTP.

Outras Diretivas

Melhorias de segurança adicionais:

upgrade-insecure-requests - Atualize automaticamente HTTP para HTTPS
block-all-mixed-content - Bloqueie todo conteúdo misto (descontinuado, use upgrade-insecure-requests)
report-uri - Endpoint para enviar relatórios de violação (descontinuado, use report-to)

Modelos Predefinidos

Rigoroso

Configuração de segurança máxima com fontes permitidas mínimas. Melhor para aplicações de alta segurança.

Site Básico

Política equilibrada para sites padrão com recursos auto-hospedados e CDNs comuns.

SPA + API

Otimizado para Aplicações de Página Única com backends de API e carregamento dinâmico de módulos.

WordPress

Pré-configurado para sites WordPress com requisitos comuns de plugins e temas.

E-commerce

Inclui integrações Stripe, PayPal e gateway de pagamento para lojas online.

CDN Pesado

Configurado para sites usando Google Analytics, fontes e múltiplos provedores de CDN.

Gerenciamento Inteligente de Fontes

A ferramenta lida com a lógica de valor de fonte automaticamente para prevenir erros de configuração:

Exclusão Mútua

Selecionar 'none' limpa automaticamente todas as outras fontes, pois são mutuamente exclusivas.

Substituição Automática

Adicionar qualquer fonte quando 'none' está ativo remove automaticamente 'none' primeiro.

Prevenção de Duplicatas

Fontes duplicadas são automaticamente detectadas e impedidas de serem adicionadas.

Análise de Segurança

Avisos em tempo real alertam você sobre possíveis problemas de segurança na configuração do CSP:

Aviso crítico: Usar 'unsafe-inline' ou 'unsafe-eval' em script-src enfraquece significativamente a proteção contra XSS.

Recomendação de segurança: Diretivas object-src ou base-uri ausentes podem deixar vulnerabilidades abertas.

Nota de melhor prática: Uso de wildcard (por exemplo, https://*) derrota a proteção CSP ao permitir todos os domínios.

Múltiplos Formatos de Saída

Formato	Caso de Uso	Suporte a Report-Only
HTTP Bruto	Valor de cabeçalho simples para qualquer servidor	Sim
Apache	Arquivos .htaccess ou httpd.conf	Sim
Nginx	Blocos de servidor nginx.conf	Sim
Meta Tag	Elemento HTML <meta>	Não
PHP	Função header() do PHP	Sim

Limitação de meta tag: Ao usar o formato Meta Tag com o modo Report-Only ativo, uma nota é exibida, pois meta tags não podem usar Content-Security-Policy-Report-Only.

Seus Dados Permanecem Privados

Todo o processamento acontece no seu navegador sem comunicação com servidor:

Sem Requisições de Servidor

Sua configuração de política nunca sai do seu dispositivo. Toda a geração e validação acontece localmente usando JavaScript.

Sem Rastreamento

Não coletamos ou armazenamos nenhum dado de uso, detalhes de configuração ou análises sobre suas políticas CSP.

Perguntas Frequentes

Qual é a diferença entre Content-Security-Policy e Content-Security-Policy-Report-Only?

Content-Security-Policy aplica a política e bloqueia recursos que a violam. Content-Security-Policy-Report-Only apenas relata violações sem bloquear nada.

Fluxo de trabalho recomendado: Use o modo Report-Only primeiro para testar sua política e identificar problemas antes de aplicá-la em produção.

Esta abordagem em duas fases previne quebra acidental de funcionalidade enquanto permite monitorar relatórios de violação e refinar sua política com segurança.

Por que devo sempre incluir object-src 'none'?

A diretiva object-src controla plugins como Flash e applets Java. Esses plugins podem executar código arbitrário e contornar outras proteções CSP.

Definir object-src para 'none' bloqueia todo conteúdo de plugin, o que é recomendado porque:

Sites modernos raramente precisam de plugins
Flash e applets Java estão descontinuados e inseguros
Plugins podem contornar restrições de script-src do CSP
A maioria dos navegadores está eliminando o suporte a plugins

'unsafe-inline' é realmente tão perigoso?

Sim. Quando você permite 'unsafe-inline' em script-src, qualquer script inline na sua página pode executar — incluindo scripts injetados por um atacante através de vulnerabilidades XSS. Isso enfraquece significativamente a proteção CSP.

Com 'unsafe-inline'

Vulnerável

Todos os scripts inline executam
Scripts injetados executam livremente
Proteção contra XSS enfraquecida

Com nonces/hashes

Protegido

Apenas scripts na lista branca executam
Scripts injetados bloqueados
Proteção forte contra XSS

Alternativas melhores: Use nonces ou hashes em vez disso, que permitem scripts inline específicos enquanto bloqueiam os injetados.

O que default-src faz?

default-src atua como fallback para todas as diretivas fetch que não estão explicitamente definidas. Por exemplo, se você definir default-src 'self' mas não definir img-src, imagens só carregarão do seu próprio domínio.

Princípio-chave: Qualquer diretiva que você definir explicitamente substitui default-src para esse tipo de recurso.

Exemplo:

CSP com fallback default-src

Content-Security-Policy: 
  default-src 'self';
  script-src 'self' cdn.example.com;
  img-src *;

/* Result:
 * - Scripts: 'self' + cdn.example.com (explicit)
 * - Images: * (explicit)
 * - Styles: 'self' (falls back to default-src)
 * - Fonts: 'self' (falls back to default-src)
 */

Posso usar o formato meta tag para todos os recursos CSP?

Não. A abordagem de meta tag HTML tem limitações significativas:

Não pode usar modo Report-Only
Não pode definir diretiva frame-ancestors
Não pode usar report-uri ou report-to
Não pode usar diretiva sandbox

Recomendação: Para funcionalidade CSP completa, use cabeçalhos HTTP configurados no seu servidor web (Apache, Nginx, etc.).

Meta tags são úteis para testes rápidos ou quando você não tem acesso à configuração do servidor, mas cabeçalhos HTTP fornecem capacidades CSP completas.

O que é 'strict-dynamic' e quando devo usá-lo?

'strict-dynamic' diz ao navegador para confiar em scripts que são carregados por scripts já confiáveis. Isso é útil para aplicações modernas que carregam dinamicamente módulos JavaScript.

Benefícios

Simplifica CSP para aplicações dinâmicas

Funciona com bundlers de módulos
Suporta importações dinâmicas
Reduz complexidade de política

Como Funciona

Modelo de propagação de confiança

Listas de permissão baseadas em host ignoradas
Funciona com políticas baseadas em nonce
Scripts carregam outros scripts confiáveis

Melhor para: Aplicações de Página Única (SPAs), aplicações React/Vue/Angular e sites usando Webpack ou bundlers similares.