Un ghid pas cu pas pentru implementarea antetelor HTTP securizate pe site-urile web alimentate de Cloudflare folosind Cloudflare Workers.
Există multe modalități de implementare a antetelor de răspuns HTTP pentru a securiza site-urile de vulnerabilități comune, cum ar fi XSS, Clickjacking, MIMI sniffing, injectare între site-uri și multe altele. Practica sa larg adoptată și recomandată de OWASP.
Anterior, am scris despre implementarea antetelor într-un server web precum Apache, Nginx și IIS. Cu toate acestea, dacă utilizați Cloudflare pentru a vă proteja și a supraalimenta site-urile, puteți profita de aceasta Lucrătorii Cloudflare pentru a manipula anteturile de răspuns HTTP.
Cloudflare Workers este o platformă fără server unde puteți rula JavaScript, C, C++, cod Rust. Este implementat în fiecare centru de date Cloudflare, care este mai mult de 200 în întreaga lume.
Implementarea este foarte simplă și flexibilă. Vă oferă flexibilitatea de a aplica anteturile pe întregul site, inclusiv subdomeniul sau URI specific cu un bătaie potrivităn folosind Regex.
Pentru această demonstrație, voi folosi cod de Scott Helme.
Să începem…👨💻
- Conectați-vă la Cloudflare și faceți clic pe Lucrători (Link direct)
- Copiați codul worker.js din GitHub și inserați în editorul de scripturi
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)));
Nu salvați încă; poate doriți să ajustați următoarele antete pentru a îndeplini cerințele.
Politica de securitate a conținutului – dacă trebuie să aplicați politica de aplicare, o puteți face aici.
De exemplu, dacă aveți nevoie să obțineți conținut prin iFrame pe mai multe adrese URL, atunci puteți profita de strămoșii cadru ca mai jos.
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev tipstrick.ro.com",
Cele de mai sus vor permite încărcarea conținutului de pe gf.dev, tipstrick.ro.com și site-ul propriu.
X-Frame-Options – puteți schimba la SAMEORIGIN dacă intenționați să afișați conținutul site-ului dvs. pe o anumită pagină din același site folosind iframe.
"X-Frame-Options": "SAMEORIGIN",
Server – puteți dezinfecta antetul serverului aici. Pune ce vrei.
"Server" : "tipstrick.ro Server",
RemoveHeaders – trebuie să eliminați unele anteturi pentru a ascunde versiunile pentru a atenua vulnerabilitatea de scurgere de informații?
O poți face aici.
let removeHeaders = [ "Public-Key-Pins", "X-Powered-By", "X-AspNet-Version", ]
Adăugarea antetelor noi – dacă trebuie să transmiteți niște anteturi personalizate aplicațiilor dvs., le puteți adăuga în secțiunea SecurityHeaders, ca mai jos.
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 terminat de ajustat toate anteturile de care aveți nevoie, numiți lucrătorul și faceți clic pe Salvare și implementare.
Grozav! lucrătorul este gata și, în continuare, trebuie să adăugăm acest lucru pe site-ul unde doriți să aplicați anteturile. Voi aplica acest lucru pe site-ul meu de laborator.
- Accesați pagina principală/tabloul de bord Cloudflare și selectați site-ul.
- Navigați la fila Lucrători >> Adăugați rută.
- Introduceți adresa URL în Rută; puteți aplica Regex aici.
- Selectați lucrătorii nou creați și Salvați
Asta e tot; într-o secundă, veți observa că toate anteturile sunt implementate pe site.
Iată cum arată din Chrome Dev Tools. De asemenea, puteți testa antetul printr-un instrument de antet HTTP.
Nu știu de ce antetul Server nu este reflectat. Cred că Cloudflare trece peste asta.
Vedeți, implementarea generală durează aproximativ 15 minute și nu este necesară nicio perioadă de nefuncționare sau repornire, cum ar fi Apache sau Nginx. Dacă intenționați să aplicați acest lucru pe un site de producție, aș sugera mai întâi testarea într-un mediu inferior, sau cu ajutorul unui traseu, puteți aplica pe paginile de testare pentru a verifica rezultatele. Odată mulțumit, împingeți unde doriți.
Asta e grozav!
Mulțumită Scott pentru cod.