🛡️ Política de segurança de conteúdo (CSP): um guia completo para desenvolvedores
A segurança é um dos aspectos mais críticos do desenvolvimento da web moderno. Mesmo que seu código esteja correto, os invasores podem explorar vulnerabilidades como scripts cross-sites (XSS) ou clickacking. É aí que entra a Política de Segurança de Conteúdo (CSP). Este blog aborda: ✅ O que é o CSP e como funciona-todas as principais diretivas (padrão-src, script-src, img-src etc.) explicadas em detalhes✅ Exemplos do mundo real. A Política de Segurança de Conteúdo (CSP) é um cabeçalho de resposta HTTP que define onde os navegadores podem carregar recursos (scripts, imagens, estilos, fontes, iframes, trabalhadores etc.) de. Seu principal objetivo: impedir os ataques XSS, restringindo a execução de scripts maliciosos. Sem o CSP, se um atacante injetar um script em sua página, o navegador o executarmos cegamente. Com o CSP, você pode apenas a lista de permissões confiáveis, bloqueando todo o resto. Exemplo de cabeçalho CSP: Content-Segurança-Política: Padrão-SRC ‘Self’; IMG-SRC Script-SRC ‘Self’ Digite o modo de saída de tela cheia de tela cheia, isso significa: Por padrão, carregue apenas os recursos da mesma origem (‘self’). Permitir imagens de cdn.example.com. Permita scripts de APIs de si e do Google. ⚠️ Importante: se falta padrão-src, tudo é permitido, enfraquecendo seu CSP. 📌 Diretivas importantes Aqui estão um detalhamento das diretivas CSP comumente usadas: 🔑 Padrão-SRC o fallback para todas as outras diretrizes (se elas não forem explicitamente definidas). Política de segurança de conteúdo: padrão-src ‘self’; Digite o modo de saída do modo de tela cheia se estiver faltando o script-src ou o estilo-src, os navegadores voltarem ao padrão-src. ✅ 📜 script-src define de onde o JavaScript pode ser carregado. Política de segurança de conteúdo: script-src ‘self’ insira o modo de tela cheia Sair do modo de tela cheia Valores especiais: ‘self’: permitir apenas domínio atual ‘inseguro-eval’: permitir avaliar () usar (⚠️ perigoso) ‘não-segue-inline’: permitir scripts inline (⚠️ não-nevol (não-steol). Com CSP: Content-Segurança-Policy: Script-Src ‘Self’ ‘Nonce-ABC123’; Hash → Permitir apenas script em linha exato: alerta (“hello”) com csp: conteúdo-security-policy: script-src ‘self’ ‘sha256-xyzhashhere …’; ✅ Nonce & Hash são mais seguros que ‘inseguros’. 🎨 Controles de estilo-SRC de onde os CSs podem ser carregados. Política de segurança de conteúdo: Style-src ‘self’ insira modo de tela cheia de saída de tela cheia ⚠️ usar ‘inseguro’ permite estilos embutidos → arriscado.🔑 em vez disso: use NONCE ou hashes para estilos dinâmicos. Exemplo: “ABC123”>. Btn {Color: Red; } Digite o modo de saída de tela cheia de tela cheia 🖼️ Img-src define fontes de imagem permitidas. Política de segurança de conteúdo: Dados de ‘self’ img-src:; Digite o modo de saída do modo de tela cheia 👉 Dados: Permite imagens codificadas por Base64. 📄 Os controles de fonte-SRC permitiram fontes de fonte. Política de segurança de conteúdo: Font-src ‘self’ Digite o modo de saída de tela cheia de tela cheia 🔗 Connect-src define onde as conexões Ajax/busca/websocket podem ser feitas. Política de segurança de conteúdo: Connect-src ‘self’ insira modo de tela cheia de saída de tela cheia 🎵 mídia-src especifica fontes permitidas para e. Política de segurança de conteúdo: mídia-src ‘self’ insira modo de tela cheia de saída de tela cheia 🏗️ quadro-src vs quadro-ancestores quadros-src: controla o que seu aplicativo pode incorporar em um. Política de segurança de conteúdo: Frame-src Digite o modo de tela completa Sair da tela completa MODO ANCESSO: Controla quem pode incorporar seu site. Política de segurança de conteúdo: Ancestores de quadros ‘nenhum’; Digite o modo de saída de tela cheia de tela cheia ✅ Use os ancestores de quadros para impedir o clickjacking. 🧩 O trabalhador-SRC define fontes permitidas para trabalhadores da web e trabalhadores de serviço. Trabalhadores da Web: Execute scripts em um encadeamento separado (tarefas de segundo plano). Trabalhadores de serviço: solicitações de proxy para suporte / cache offline. Política de segurança de conteúdo: trabalhador-src ‘self’ inserir modo de tela cheia de saída de tela cheia 📂 Object-src restringe os plugins como flash/Silverlight (legado). Melhor definir ‘nenhum’. Política de segurança de conteúdo: objeto-src ‘nenhum’; Digite o modo de saída do modo de tela cheia 📝 Relatórios com CSP em vez de aplicar, você pode testar apenas com relatórios: conteúdo-segurança-policy-relation-somente: padrão-src ‘self’; Relatório-URI /CSP-Report-EndPoint; Digite o modo de saída do modo de tela cheia dessa maneira, as violações são registradas, mas não bloqueadas. Útil antes do lançamento. 💡 Exemplo do mundo real Imagine suas cargas de WebApp: scripts do seu domínio + Estilos de APIs do Google a partir de seu domínio + Google Fontes Imagens do CDN CSP podem parecer: Content-Security-Policy: Default-Src ‘Self’; script-src ‘self’ style-src ‘self’ img-src ‘self’ connect-src ‘self’ object-src ‘nenhum’; O Modo Full-Onceestors ‘NONE’ ONCESTORS Digite o modo de saída de tela cheia Isso protege você de atacantes injetando scripts/imagens maliciosas de domínios não confiáveis. 🚨 Questões comuns de CSP Os desenvolvedores enfrentam ❌ imagens que não carregam → Esqueceram o domínio IMG-SRC. ❌ Fontes Breaking → FONTE-SRC FALTA. ❌ Vídeos que não estão sendo reproduzidos → Mídia-src ausente. ❌ Chamadas de API Falha → Falta Connect-Src. ❌ App não incorporável → Avestores de quadros rigorosos. 👉 Se o seu front -end/back -end parecer bem, mas ainda assim quebrar, verifique o CSP primeiro. ✅ As melhores práticas sempre definem um rigoroso padrão-src. Evite ‘inseguro’ e ‘inseguro’, a menos que seja absolutamente necessário-use inconche ou hashes. Use ‘self’ sempre que possível. Teste com o conteúdo-segurança-policy-relatou apenas antes de cumprir. 📌 Conclusão O CSP não é apenas mais um cabeçalho – é um poderoso escudo de segurança 🛡️ para seus aplicativos. 👉 LINHA LINHA: CSP = CONTROL + SEGURANÇA + PAZ DO METING.
Fonte
