Um guia passo a passo para implementar cabeçalhos HTTP seguros em sites desenvolvidos pela Cloudflare usando Cloudflare Workers.
Há muitas maneiras de implementar cabeçalhos de resposta HTTP para proteger sites de vulnerabilidades comuns, como XSS, Clickjacking, detecção de MIMI, injeção entre sites e muito mais. Sua prática amplamente adotada e recomendada por OWASP.
Anteriormente, escrevi sobre a implementação de cabeçalhos em um servidor web como Apache, Nginx e IIS. No entanto, se você estiver usando Cloudflare para proteger e sobrecarregar seus sites, você pode aproveitar Cloudflare Trabalhadores para manipular os cabeçalhos de resposta HTTP.
O Cloudflare Workers é uma plataforma sem servidor na qual você pode executar códigos JavaScript, C, C++ e Rust. Ele é implantado em todos os datacenters da Cloudflare, que são mais de 200 em todo o mundo.
A implementação é muito simples e flexível. Ele oferece flexibilidade para aplicar os cabeçalhos em todo o site, incluindo o subdomínio ou URI específico com um padrão correspondenten usando Regex.
Para esta demonstração, usarei o código por Scott Helme.
Vamos começar…👨💻
- Faça login na Cloudflare e clique em Trabalhadores (link direto)
- Copie o código worker.js de 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; você pode querer ajustar os cabeçalhos a seguir para atender ao requisito.
Content-Security-Policy – se você precisar aplicar sua política de aplicativo, poderá fazê-lo aqui.
Ex – se você precisar obter conteúdo por meio de iFrame em vários URLs, poderá aproveitar os ancestrais do quadro conforme abaixo.
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev etechpt.com.com",
O acima permitirá carregar o conteúdo de gf.dev, etechpt.com.com e self site.
X-Frame-Options – você pode mudar para SAMEORIGIN se pretende mostrar o conteúdo do seu site em alguma página dentro do mesmo site usando iframe.
"X-Frame-Options": "SAMEORIGIN",
Servidor – você pode limpar o cabeçalho do servidor aqui. Coloque o que quiser.
"Server" : "etechpt.com Server",
RemoveHeaders – você precisa remover alguns cabeçalhos para ocultar as versões para mitigar a vulnerabilidade de vazamento de informações?
Você pode fazer isso aqui.
let removeHeaders = [ "Public-Key-Pins", "X-Powered-By", "X-AspNet-Version", ]
Adicionando novos cabeçalhos – se você precisar passar alguns cabeçalhos personalizados para seus aplicativos, poderá adicioná-los na seção securityHeaders conforme abaixo.
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",
}
Assim que terminar de ajustar todos os cabeçalhos necessários, nomeie o trabalhador e clique em Salvar e implantar.
Excelente! o trabalhador está pronto e, a seguir, precisamos adicioná-lo ao site onde você deseja aplicar os cabeçalhos. Vou aplicar isso no meu laboratório.
- Acesse a página inicial/painel do Cloudflare e selecione o site.
- Navegue até a guia Trabalhadores >> Adicionar rota.
- Insira a URL em Rota; você pode aplicar o Regex aqui.
- Selecione os trabalhadores recém-criados e salve
Isso é tudo; em um segundo, você notará que todos os cabeçalhos foram implementados no site.
Aqui está a aparência do Chrome Dev Tools. Você também pode testar o cabeçalho por meio de uma ferramenta de cabeçalho HTTP.
Não sei por que o cabeçalho do servidor não é refletido. Acho que Cloudflare está substituindo isso.
Veja bem, a implementação geral leva cerca de 15 minutos e nenhum tempo de inatividade ou reinicialização é necessário, como Apache ou Nginx. Se você planeja aplicar isso em um site de produção, sugiro primeiro testar em um ambiente inferior ou, com a ajuda de uma rota, aplicar nas páginas de teste para verificar os resultados. Uma vez satisfeito, empurre para onde quiser.
Isso é incrível!
Graças a Scott para o código.