Como Configurar Content Security Policy (CSP)
Oi! Sou a Sensei da GeHost 😊 Neste guia, vou te ensinar a configurar Content Security Policy (CSP) — uma ferramenta poderosa para proteger seu site de ataques como injeção de código malicioso. Relaxa, é mais fácil do que parece!
O que é Content Security Policy (CSP)?
CSP é como um segurança de bouncer para seu site. Ele controla quais recursos (scripts, imagens, estilos, fontes) podem ser carregados e de onde. Pense assim:
- Seu site diz: "Eu permito scripts apenas do meu próprio domínio e do Google Analytics"
- Um hacker tenta injetar um script malicioso de outro lugar
- O navegador vê a regra e bloqueia → site seguro! ✅
Por que usar CSP?
Existem vários motivos para ativar CSP no seu site:
- Bloqueia ataques XSS (injeção de código malicioso)
- Controla de onde vêm os recursos — scripts, estilos, imagens
- Aumenta a segurança sem afetar a experiência do visitante
- Relatórios de violação — você é avisado se alguém tenta contrabandear código
- Melhora a reputação do site junto aos navegadores modernos
Como o CSP Funciona?
O CSP funciona através de regras que você define. Cada regra diz ao navegador o que é permitido:
Exemplo simples: script-src 'self' https://cdn.exemplo.com significa: "scripts podem vir do meu site ou de cdn.exemplo.com, nada mais"
As partes principais são:
- script-src — Controla scripts JavaScript
- style-src — Controla folhas de estilos CSS
- img-src — Controla de onde vêm as imagens
- font-src — Controla fontes (Google Fonts, etc.)
- connect-src — Controla conexões (APIs, fetch, WebSocket)
- default-src — Configuração padrão para tudo o que não foi especificado
Passo a Passo: Configurar CSP
Existem duas formas principais de ativar CSP. Vou te mostrar as duas:
Opção 1: Via Header HTTP (Recomendado)
Esta é a forma mais segura. Você vai adicionar uma linha no arquivo de configuração do seu servidor.
- Acesse o painel de hospedagem (seu cPanel/painel.gehost.com.br)
- Procure por "File Manager" ou acesse via FTP
- Navegue até a raiz do seu site (pasta public_html)
- Localize o arquivo
.htaccess(se não existir, vamos criar) - Abra o arquivo e adicione estas linhas:
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.googleapis.com;" - Salve o arquivo
- Limpe o cache do navegador e acesse seu site para testar
Explicação simples do que cada parte faz:
default-src 'self'→ Padrão: só seu próprio domínioscript-src 'self' https://trusted-cdn.com→ Scripts: seu site + CDN confiávelstyle-src 'self' 'unsafe-inline'→ Estilos: seu site + estilos inline (cuidado com isso!)img-src 'self' data: https:→ Imagens: seu site + imagens em base64 + HTTPSfont-src 'self' https://fonts.googleapis.com;→ Fontes: seu site + Google Fonts
Opção 2: Via Meta Tag (Para WordPress, Lojas e Plataformas)
Se você usa WordPress, WooCommerce ou outra plataforma, pode adicionar CSP via HTML:
- Acesse o admin do seu site
- Vá para "Página" ou "Post" e edite o arquivo
header.php(ou onde fica o<head>) - Adicione esta linha dentro da tag
<head>:<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline';"> - Salve e teste
Dica: A meta tag é mais fácil, mas o header HTTP é mais seguro. Use o que funciona melhor para você!
Exemplos Práticos de Configuração CSP
Exemplo 1: Site Simples (Sem Ferramentas Externas)
default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:;
→ Tudo vem do seu próprio site. Muito restritivo, mas super seguro!
Exemplo 2: Site com Google Analytics
default-src 'self'; script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com; connect-src 'self' https://www.google-analytics.com; img-src 'self' data: https: https://www.google-analytics.com;
→ Permite Google Analytics monitorar seu site com segurança.
Exemplo 3: Loja Online (WooCommerce, Stripe, etc.)
default-src 'self'; script-src 'self' 'unsafe-inline' https://js.stripe.com https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.googleapis.com; connect-src 'self' https://api.stripe.com;
→ Permite Stripe, CDNs e estilos (comum em lojas online).
Dicas Importantes (do Sensei! 💡)
⚠️ Comece no "Modo Report" primeiro! UseContent-Security-Policy-Report-Onlyem vez deContent-Security-Policyno seu header. Assim, o navegador te avisa de erros sem bloquear nada. Depois que tudo estiver perfeito, troque para o modo de verdade.
- 'self' = seu próprio domínio
- 'unsafe-inline' = permite scripts/estilos inline (menos seguro, evite se possível)
- 'unsafe-eval' = permite eval() em JavaScript (NUNCA use, é perigoso!)
- https: = permite qualquer recurso HTTPS (use com cuidado)
- data: = permite imagens em base64 inline
Teste seu CSP: Use o DevTools do navegador (F12 → Console) para ver erros. Se algo estiver bloqueado, você verá uma mensagem clara.
Próximos Passos
- Escolha a opção que funciona melhor para seu site (header HTTP ou meta tag)
- Comece simples — não tente ser mega-restritivo de uma vez
- Teste no navegador (DevTools) para ver se algo quebrou
- Vá refinando conforme você adiciona ferramentas novas ao site
- Em caso de dúvida, entre em contato com nosso suporte — a gente ajuda! 😊
Parabéns! Você acabou de aprender CSP. Seu site agora tem uma camada extra de segurança. Bora lá colocar em prática! 🚀
