Segurança HTTP com Cloudflare Workers: Guia Completo!

Implementando Cabeçalhos HTTP Seguros com Cloudflare Workers: Um Guia Detalhado

Este artigo apresenta um método passo a passo para configurar cabeçalhos HTTP de segurança em sites que utilizam a plataforma Cloudflare, através dos Cloudflare Workers. Essa prática, recomendada por OWASP, é fundamental para proteger seu site contra ameaças comuns, como ataques XSS, Clickjacking e injeção de código.

Já abordamos anteriormente a implementação de cabeçalhos em servidores web tradicionais como Apache, Nginx e IIS. No entanto, se você usa o Cloudflare para proteger e otimizar seu site, os Cloudflare Workers oferecem uma solução prática para gerenciar os cabeçalhos de resposta HTTP.

Cloudflare Workers é uma plataforma serverless, onde você pode executar códigos em JavaScript, C, C++ e Rust. O código é executado em todos os datacenters da Cloudflare, espalhados em mais de 200 locais globalmente.

A implementação é simples e flexível, permitindo aplicar os cabeçalhos em todo o site, incluindo subdomínios e URIs específicos, usando correspondência de padrões via Regex.

Para este guia, utilizaremos o código desenvolvido por Scott Helme.

Vamos começar! 👨‍💻

• Acesse o Cloudflare e clique em “Workers” (link direto).

• Copie o conteúdo do arquivo worker.js do GitHub e cole no editor de scripts.

const securityHeaders = {
        "Content-Security-Policy": "upgrade-insecure-requests",
        "Strict-Transport-Security": "max-age=1000",
        "X-Xss-Protection": "1; mode=block",
        "X-Frame-Options": "DENY",
        "X-Content-Type-Options": "nosniff",
        "Referrer-Policy": "strict-origin-when-cross-origin"
    },
    sanitiseHeaders = {
        Server: ""
    },
    removeHeaders = [
        "Public-Key-Pins",
        "X-Powered-By",
        "X-AspNet-Version"
    ];

async function addHeaders(req) {
    const response = await fetch(req),
        newHeaders = new Headers(response.headers),
        setHeaders = Object.assign({}, securityHeaders, sanitiseHeaders);

    if (newHeaders.has("Content-Type") && !newHeaders.get("Content-Type").includes("text/html")) {
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: newHeaders
        });
    }

    Object.keys(setHeaders).forEach(name => newHeaders.set(name, setHeaders[name]));

    removeHeaders.forEach(name => newHeaders.delete(name));

    return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders
    });
}

addEventListener("fetch", event => event.respondWith(addHeaders(event.request)));

Não salve ainda. Antes, ajuste os cabeçalhos conforme as necessidades do seu projeto.

Content-Security-Policy: Se você precisa definir uma política de segurança específica, este é o local.

Por exemplo, para permitir a exibição de conteúdo em iFrames a partir de domínios específicos, use o atributo “frame-ancestors”:

"Content-Security-Policy" : "frame-ancestors 'self' gf.dev etechpt.com.com",

O exemplo acima permite carregar o conteúdo dos domínios gf.dev, etechpt.com.com e do próprio site.

X-Frame-Options: Altere para “SAMEORIGIN” se seu site precisa ser exibido em iframes no mesmo domínio.

"X-Frame-Options": "SAMEORIGIN",

Server: Modifique o cabeçalho do servidor para informações personalizadas.

"Server" : "etechpt.com Server",

RemoveHeaders: Aqui você define quais cabeçalhos serão removidos para evitar a divulgação de informações.

let removeHeaders = [
	"Public-Key-Pins",
	"X-Powered-By",
	"X-AspNet-Version",
]

Adicionando Novos Cabeçalhos: Para incluir cabeçalhos personalizados, utilize a seção securityHeaders:

let securityHeaders = {
	"Content-Security-Policy" : "frame-ancestors 'self' gf.dev etechpt.com.com",
	"Strict-Transport-Security" : "max-age=1000",
	"X-Xss-Protection" : "1; mode=block",
	"X-Frame-Options" : "SAMEORIGIN",
	"X-Content-Type-Options" : "nosniff",
	"Referrer-Policy" : "strict-origin-when-cross-origin",
  "Custom-Header"  : "Success",
}

Após ajustar todos os cabeçalhos, nomeie o worker e clique em “Salvar e Implantar”.

O worker está pronto! Agora, associe-o ao seu site:

• Acesse o painel do Cloudflare e selecione seu site.
• Vá para a aba “Workers” e clique em “Adicionar Rota”.
• Defina a URL da Rota, usando Regex se necessário.
• Selecione o worker recém-criado e salve.

Em instantes, os cabeçalhos serão aplicados no seu site.

Veja como aparece no Chrome Dev Tools. Você também pode testar usando ferramentas HTTP de análise de cabeçalhos.

Note que o cabeçalho do servidor não é refletido, provavelmente substituído pelo Cloudflare.

A implementação é rápida, levando cerca de 15 minutos, sem necessidade de downtime ou reinicialização. Ao aplicar em produção, faça testes em ambientes de homologação ou em rotas específicas antes.

Isso é fantástico!

Agradecimentos a Scott pelo código.