Cum se implementează anteturi securizate folosind Cloudflare Workers?

de
Tweet
Share
Share
Pin

Acest articol oferă o metodă pas cu pas pentru a implementa antete HTTP de securitate pe site-urile web care folosesc platforma Cloudflare, prin intermediul funcționalității Cloudflare Workers.

Antetele HTTP joacă un rol crucial în protejarea site-urilor web împotriva unor amenințări comune, cum ar fi atacurile XSS (Cross-Site Scripting), clickjacking, sniffing MIME și injectarea de cod între site-uri. Această practică este intens recomandată și susținută de organizații precum OWASP.

În trecut, implementarea antetelor se făcea direct pe serverul web (Apache, Nginx, IIS). Însă, dacă folosiți Cloudflare pentru a vă proteja și îmbunătăți performanțele site-ului, puteți utiliza Cloudflare Workers pentru a gestiona antetele de răspuns HTTP.

Cloudflare Workers reprezintă o platformă serverless, unde puteți rula cod JavaScript, C, C++ sau Rust. Aceasta este distribuită în peste 200 de centre de date Cloudflare din întreaga lume, asigurând o performanță optimă și o implementare rapidă.

Procesul de implementare este simplu și flexibil, permițându-vă să aplicați antetele pe întregul site, pe subdomenii specifice sau pe anumite URI-uri, folosind rute personalizate cu expresii regulate (Regex).

În acest exemplu, vom folosi codul dezvoltat de Scott Helme, disponibil pe GitHub.

Pașii de implementare

  1. Accesați contul Cloudflare și selectați opțiunea „Workers” (link direct).
  2. Copiați codul din fișierul worker.js de pe GitHub și inserați-l în editorul de scripturi din Cloudflare Workers.
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)));

Înainte de a salva, este important să analizați și să ajustați antetele în funcție de nevoile specifice ale site-ului:

  • Content-Security-Policy (CSP): Dacă doriți să aplicați o politică CSP strictă, o puteți configura aici. De exemplu, puteți defini sursele autorizate pentru încărcarea resurselor iFrame.
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev tipstrick.ro.com",

Acest exemplu permite încărcarea iFrame-urilor de pe gf.dev, tipstrick.ro.com, dar și de pe domeniul curent.

  • X-Frame-Options: Dacă doriți să permiteți afișarea conținutului site-ului dvs. în iFrame-uri de pe același domeniu, modificați valoarea la SAMEORIGIN.
"X-Frame-Options": "SAMEORIGIN",
  • Server: Puteți personaliza sau chiar ascunde informațiile din antetul Server.
"Server" : "tipstrick.ro Server",
  • RemoveHeaders: Puteți elimina antetele nedorite, pentru a preveni divulgarea unor informații sensibile.
let removeHeaders = [
	"Public-Key-Pins",
	"X-Powered-By",
	"X-AspNet-Version",
]
  • Adăugarea antetelor noi: Puteți include antete personalizate, necesare aplicației dvs., în secțiunea securityHeaders.
let securityHeaders = {
	"Content-Security-Policy" : "frame-ancestors 'self' gf.dev tipstrick.ro.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",
}

După ce ați personalizat antetele, salvați scriptul și dați un nume worker-ului creat.

Următorul pas este să asociați acest worker cu site-ul dvs.:

  1. Mergeți la pagina principală a Cloudflare, selectați site-ul relevant.
  2. Navigați la secțiunea „Workers” și dați click pe „Adaugă rută”.
  3. Introduceți adresa URL unde doriți să aplicați antetele. Aveți posibilitatea să folosiți expresii regulare (Regex).
  4. Selectați worker-ul pe care tocmai l-ați creat și salvați modificările.

În scurt timp, antetele configurate vor fi aplicate site-ului. Puteți verifica acest lucru folosind instrumentele de dezvoltator din browserul web (Chrome Dev Tools), sau cu un instrument de analiză a antetelor HTTP.

Se pare că antetul Server nu este reflectat, posibil din cauza unor setări ale Cloudflare care trec peste acesta.

În concluzie, implementarea antetelor de securitate cu Cloudflare Workers este un proces rapid, care durează în jur de 15 minute și nu necesită întreruperi sau reporniri ale serverului. Dacă aplicați aceste setări pe un site de producție, vă recomandăm să testați întâi într-un mediu de testare sau pe anumite pagini, înainte de a le aplica la scară largă.

Mulțumim lui Scott pentru cod.