Entrega segura de sites estáticos com Cloudflare Pages

Cloudflare Pages é a plataforma ideal para hospedagem de sites estáticos. Neste artigo, apresentamos a configuração real de deploy e as configurações de segurança usando o arquivo _headers.

Configuração de deploy: Por que saímos do Worker e voltamos ao Pages

Inicialmente, planejávamos processar o backend do formulário de contato com Cloudflare Worker. Com Worker, é possível enviar e-mails e fazer validação no server-side.

No entanto, ao configurar na prática, encontramos os seguintes desafios:

• Complexificação do build: Configurações adicionais necessárias para servir a saída do build do Astro via Worker
• Trabalho de debug: Diferenças de comportamento entre wrangler dev local e produção
• Controle de cache: Pages tem integração mais natural com o CDN Cloudflare

Finalmente, utilizando um serviço externo chamado ssgform.com para o formulário de contato, eliminamos completamente o processamento server-side. Com isso, não havia mais necessidade do Worker e pudemos fazer deploy no Pages como um site puramente estático.

Configuração de segurança via _headers

No Cloudflare Pages, os cabeçalhos de resposta HTTP podem ser escritos no arquivo public/_headers. A seguir, um trecho das configurações realmente utilizadas.

Content-Security-Policy (CSP)

CSP é um cabeçalho importante para prevenir ataques de Cross-Site Scripting (XSS). Especifica em formato de whitelist as origens permitidas para busca de recursos.

Content-Security-Policy: default-src 'self';
  script-src 'self' 'unsafe-inline' https://challenges.cloudflare.com https://pagead2.googlesyndication.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' https://wsrv.nl https://images.unsplash.com data:;
  connect-src 'self' https://challenges.cloudflare.com https://pagead2.googlesyndication.com;
  frame-src https://challenges.cloudflare.com https://googleads.g.doubleclick.net;
  form-action https://ssgform.com;

Os pontos principais são:

• script-src: Permite Cloudflare Turnstile (challenges.cloudflare.com) e AdSense
• img-src: Permite o proxy de imagens wsrv.nl e Unsplash
• form-action: Restringe envio de formulário apenas para ssgform.com
• frame-src: Permite iframe do Turnstile e frame de anúncios do AdSense

Outros cabeçalhos de segurança

X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

• X-Content-Type-Options: Previne MIME sniffing
• X-Frame-Options: Proíbe embedding em iframe como medida contra clickjacking
• Referrer-Policy: Envia apenas a origem em requisições cross-origin
• Permissions-Policy: Desabilita APIs do navegador desnecessárias (câmera, microfone, geolocalização)

Controle de cache

Assets estáticos recebem cache de longa duração, enquanto HTML recebe cache curto.

/_astro/*
  Cache-Control: public, max-age=31536000, immutable

/*.html
  Cache-Control: public, max-age=3600

Os arquivos no diretório _astro/ gerado pelo Astro contêm hash de conteúdo no nome, então cache immutable de 1 ano é seguro. HTML tem alguma frequência de atualização, então mantém cache de 1 hora.

Configuração de deploy do Pages

A configuração do projeto Cloudflare Pages é simples:

Conectando o repositório GitHub, o deploy automático é feito a cada push para o branch main. Deploy de preview também é gerado automaticamente para cada PR, facilitando o review.

Conclusão

O importante é avaliar se “o processamento server-side é realmente necessário”. Com o uso de serviços externos, foi possível eliminar o Worker, resultando em deploy e gerenciamento de segurança mais simples. A configuração de CSP via _headers dá trabalho no início, mas uma vez escrita, se aplica a todas as páginas, sendo uma medida de segurança com excelente custo-benefício.