Como configurar CSP (Content Security Policy) sem quebrar scripts do site — Guia para iniciantes
Olá, querido(a) cliente da GeHost! 👋
Se você está aqui, é porque quer deixar seu site mais seguro — e isso é ótimo! Um dos melhores aliados da segurança na web é o Content Security Policy (CSP). Ele é como um "guarda-chuva digital" que diz ao navegador: "Só carregue recursos de certos lugares, por favor". Mas aqui vem a pergunta do dia:Como colocar esse guarda-chuva sem quebrar os scripts do seu site?Não se preocupe — você não precisa ser especialista em segurança para fazer isso. Vamos juntos, passo a passo, com calma, como um bom Sensei ensina seu aluno. 🌿 ---
Passo 1: Entenda o que é CSP
O CSP é uma regra de segurança que você coloca no seu site para dizer ao navegador: "Só carregue scripts, imagens, estilos e outros recursos de certos lugares". Por exemplo:
- Permitir scripts apenas do seu próprio domínio;
- Permitir imagens de um site específico (como o Google Fotos);
- Proibir o carregamento de scripts de domínios desconhecidos.
Se você colocar o CSP errado, o navegador bloqueia recursos — e seu site pode parar de funcionar. Por isso, o segredo é ser específico, mas flexível.
---Passo 2: Descubra onde seus scripts estão
Antes de criar a política, você precisa saber de onde vêm os scripts do seu site. Isso inclui:
- Scripts do seu próprio site (ex:
https://seudominio.com/js/main.js); - Scripts de serviços externos (como Google Analytics, Facebook Pixel, Chat ao vivo, etc.);
- Recursos de CDN (como o Cloudflare ou Google Fonts).
💡 Dica: Abra o console do navegador (F12 → aba "Console" ou "Network") enquanto navega no seu site. Veja se aparecem mensagens como:
Content Security Policy: directive 'script-src' has been violated...
Essas mensagens mostram exatamente quais recursos estão sendo bloqueados — um presente do Google! 🎁
---Passo 3: Crie uma política CSP segura (mas flexível)
Uma política CSP básica e segura para sites comuns pode ser assim:
Content-Security-Policy: default-src 'self'; script-src 'self' https://www.google-analytics.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; img-src 'self' https://*.googleapis.com data:; font-src 'self' https://fonts.googleapis.com; frame-ancestors 'none';
Explicando por partes:
default-src 'self'— todos os recursos só podem vir do seu próprio domínio.script-src 'self' https://www.google-analytics.com https://cdn.jsdelivr.net— permite scripts do seu site, do Google Analytics e do JSDelivr (um CDN comum).style-src 'self' 'unsafe-inline'— permite estilos do seu site e, por enquanto, inline (para não quebrar CSS).img-src 'self' https://*.googleapis.com data:— imagens do seu site, do Google, e imagens em base64.font-src 'self' https://fonts.googleapis.com— fontes do seu site e do Google Fonts.frame-ancestors 'none'— evita que seu site seja embeddado em outros sites (proteção contra clickjacking).
⚠️ Atenção: Evite usar 'unsafe-inline' em scripts ou estilos se possível. Se precisar, use nonce ou hash — mas isso é para quem já domina. Para iniciantes, 'unsafe-inline' é aceitável por enquanto.
Passo 4: Adicione o CSP no seu site
Existem duas formas de aplicar o CSP:
Opção A: No cabeçalho HTTP (recomendado)
Se você tem acesso ao arquivo .htaccess (no diretório public_html), adicione esta linha:
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google-analytics.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; img-src 'self' https://*.googleapis.com data:; font-src 'self' https://fonts.googleapis.com; frame-ancestors 'none';"
💡 Dica: Use o Gerenciador de Arquivos do cPanel para editar esse arquivo com cuidado.
Opção B: Via meta tag (para testes)
Se você só quer testar, pode colocar no head do seu HTML:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://www.google-analytics.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline'; img-src 'self' https://*.googleapis.com data:; font-src 'self' https://fonts.googleapis.com; frame-ancestors 'none';">
⚠️ Atenção: Isso só funciona se o site for acessado por um navegador — não é confiável para produção. Use só para testes.
---Passo 5: Teste e ajuste
Depois de aplicar o CSP:
- Abra seu site em um navegador novo (ou em modo anônimo).
- Abra o console (F12) e veja se há erros de CSP.
- Se algo parou de funcionar (ex: formulário, chat, slider), volte ao CSP e veja qual domínio está sendo bloqueado.
- Adicione esse domínio no
script-srcouimg-src, conforme necessário.
💡 Dica: Comece com uma política mais permissiva e vá tornando-a mais rígida com o tempo. Segurança é um processo, não um evento!
---Passo 6: Mantenha o site funcionando
Se você não tiver certeza de onde vêm os scripts, use o console do navegador para descobrir. Se precisar de ajuda, o suporte da GeHost está aqui para te ajudar — e ele é grátis por 30 dias após a entrega.
Seu site é seu lar digital. Protegê-lo com CSP é um gesto de amor — e com este guia, você está no caminho certo. 💚
---Quer ajuda extra?
Se estiver com dúvidas, entre em contato com o suporte da GeHost pelo painel do cliente:
- Endereço: painel.gehost.com.br
- Seu plano, histórico de pagamento e dados fiscais (como CNPJ) estão lá — consulte sempre antes de pedir suporte.
Se precisar de um CNPJ para nota fiscal, use apenas:
46.647.904/0001-04 — razão social: G e Soluções e Eventos LTDA — marca: Entexp
Seu site está seguro, seu cliente está feliz, e você está um passo mais perto de ser um verdadeiro webmaster. 🌟
Com carinho,
Sensei da GeHost
Equipe G e Soluções