CSP PARA SITES ESTÁTICOS
As diretivas que realmente importam para sites estáticos em 2026, mais o playbook FAL + Supabase + Pagefind de gautamkhorana.com.
Para que serve CSP
Content Security Policy é um cabeçalho HTTP que diz ao navegador quais origens são permitidas carregar recursos para sua página. Feito corretamente, previne a maioria dos ataques XSS, clickjacking e de cadeia de suprimentos. Feito incorretamente, quebra funcionalidades silenciosamente de formas que levam dias para diagnosticar.
Sites estáticos tendem a sub-documentar seu CSP porque o risco percebido é menor. A realidade é que um site estático com uma diretiva CSP faltante pode quebrar reprodução de vídeo, carregamento de imagens, funcionalidade de busca ou renderização de fontes, e a mensagem do console do navegador é o único sinal que você recebe.
Mapeamento por tipo de recurso
A diretiva que controla cada tipo de recurso:
img-src para tags img. media-src para video, audio, elementos source. frame-src para iframe. connect-src para fetch e WebSocket. script-src para tags script. style-src para tags style e link rel=stylesheet. font-src para @font-face.
Crítico: default-src "self" NÃO cobre vídeo de um host third-party. Um vídeo do Supabase Storage vai falhar silenciosamente em reproduzir mostrando apenas o poster se você esquecer de media-src. O console do navegador mostra a diretiva que bloqueou; verifique isso primeiro quando o vídeo misteriosamente não quiser reproduzir.
O incidente de maio de 2026
Em gautamkhorana.com em maio de 2026, um MP4 do Kling hospedado no Supabase Storage renderizou o HTML corretamente mas nunca reproduziu. A imagem do poster aparecia; o vídeo não iniciaria. Vinte minutos de debug depois, a resposta foi que a CSP não tinha nenhuma diretiva media-src e o navegador estava silenciosamente bloqueando o elemento video.
O fix foi uma adição de uma linha ao netlify.toml: media-src "self" https://*.supabase.co. O sintoma de poster-mas-sem-reprodução é o padrão revelador: significa que a CSP permite a imagem mas não o vídeo.
Bibliotecas de static-search precisam de permissões wasm e worker
Pagefind, Stork, Tinysearch e outras bibliotecas de busca para static-site usam WebAssembly mais Web Workers. A CSP deve incluir script-src "wasm-unsafe-eval" E worker-src "self" blob: ou a busca trava para sempre em "Searching..." sem nenhum erro no console.
Segundo incidente em gautamkhorana.com em maio de 2026: gaveta de busca travada em "Searching..." porque pagefind.init() falhou silenciosamente quando wasm foi bloqueado. O fix foi adicionar "wasm-unsafe-eval" a script-src e "self" blob: a worker-src.
A CSP mínima viável para sites FAL + Supabase + Pagefind
Obrigatório:
img-src self https://*.supabase.co https://*.fal.media, para imagens hero e assets gerados por FAL. media-src self https://*.supabase.co, para vídeo. connect-src self https://*.supabase.co, para chamadas de API do Supabase. script-src self "wasm-unsafe-eval", para Pagefind. worker-src self blob:, para workers do Pagefind. style-src self "unsafe-inline", para estilos com escopo do Astro. font-src self, para fontes auto-hospedadas.
Sempre que você adicionar um novo host de asset (Cloudinary, Bunny, R2, qualquer um), audite netlify.toml ou vercel.json e adicione o host a toda diretiva que esse tipo de recurso possa usar. O custo de errar isso é uma falha silenciosa que aparece em produção.
Testando mudanças de CSP
O modo CSP-Report-Only permite testar mudanças de política em produção sem quebrar nada. O navegador registra violações que ocorreriam em um endpoint de relatório em vez de bloquear a requisição. Execute qualquer diretiva nova em report-only por uma semana, revise as violações e então promova para enforcing.
A maioria das falhas de CSP é silenciosa em produção. Um endpoint de relatório é a única forma de saber o que você realmente quebrou. Configure um antes de enviar qualquer mudança não-trivial de CSP.