Lépésről lépésre szóló útmutató a biztonságos HTTP-fejlécek megvalósításához a Cloudflare által üzemeltetett webhelyeken a Cloudflare Workers segítségével.
Számos módja van a HTTP-válaszfejlécek implementálására, hogy megvédjék a webhelyeket a gyakori sebezhetőségektől, például az XSS-től, a Clickjacking-től, a MIMI-szippantástól, a helyek közötti adatbeviteltől és még sok mástól. Széles körben elfogadott gyakorlata és általa ajánlott OWASP.
Korábban írtam a fejlécek megvalósításáról olyan webszervereken, mint az Apache, Nginx és IIS. Ha azonban a Cloudflare-t használja webhelyei védelmére és feltöltésére, akkor kihasználhatja Cloudflare dolgozók a HTTP válaszfejlécek manipulálásához.
A Cloudflare Workers egy szerver nélküli platform, ahol JavaScript, C, C++, Rust kódot futtathat. Minden Cloudflare adatközpontban üzembe helyezik, amely világszerte több mint 200.
A megvalósítás nagyon egyszerű és rugalmas. Rugalmasságot biztosít a fejlécek alkalmazására a teljes webhelyen, beleértve az aldomaint vagy az adott URI-t egy hozzáillő mintázatn Regex használatával.
Ehhez a bemutatóhoz a kód írta: Scott Helme.
Kezdjük is…👨💻
- Jelentkezzen be a Cloudflare-be, és kattintson a Dolgozók (közvetlen link)
- Másolja ki a worker.js kódot innen GitHub és illessze be a Script szerkesztőbe
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)));
Még ne mentse; érdemes módosítani a következő fejléceket, hogy megfeleljenek a követelménynek.
Tartalom-biztonsági politika – ha alkalmaznia kell a jelentkezési szabályzatot, itt megteheti.
Például – ha több URL-en kell tartalmat beszereznie az iFrame-en keresztül, akkor az alábbiak szerint használhatja a keret-elődök előnyeit.
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev etoppc.com.com",
A fentiek lehetővé teszik a tartalom betöltését a gf.dev, etoppc.com.com és saját webhelyről.
X-Frame-Options – átválthat SAMEORIGIN-re, ha meg kívánja jeleníteni webhelye tartalmát ugyanazon a webhelyen az iframe használatával.
"X-Frame-Options": "SAMEORIGIN",
Szerver – itt megtisztíthatja a szerver fejlécét. Tegyél bele, ami tetszik.
"Server" : "etoppc.com Server",
RemoveHeaders – el kell távolítania néhány fejlécet a verziók elrejtéséhez, hogy csökkentse az információszivárgás okozta sebezhetőséget?
Itt megteheti.
let removeHeaders = [ "Public-Key-Pins", "X-Powered-By", "X-AspNet-Version", ]
Új fejlécek hozzáadása – ha egyéni fejléceket kell átadnia alkalmazásainak, hozzáadhatja azokat a securityHeaders szakaszban az alábbiak szerint.
let securityHeaders = {
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev etoppc.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",
}
Ha végzett az összes szükséges fejléc beállításával, nevezze el a dolgozót, majd kattintson a Mentés és telepítés gombra.
Nagy! a dolgozó készen áll, és ezután ezt hozzá kell adnunk ahhoz a webhelyhez, ahol alkalmazni szeretné a fejléceket. Alkalmazni fogom ezt a laboroldalamon.
- Nyissa meg a Cloudflare kezdőlapját/irányítópultját, és válassza ki a webhelyet.
- Lépjen a Dolgozók lapra >> Útvonal hozzáadása.
- Írja be az URL-t az Útvonal mezőbe; itt tudod alkalmazni a Regex-et.
- Válassza ki az újonnan létrehozott dolgozókat, és Mentse
Ez minden; egy másodpercen belül észreveszi, hogy az összes fejléc implementálva van a webhelyen.
Így néz ki a Chrome Dev Tools alkalmazásból. A fejlécet egy HTTP-fejléc eszközzel is tesztelheti.
Nem tudom, miért nem jelenik meg a Server fejléc. Azt hiszem, a Cloudflare felülírja ezt.
Látod, a teljes megvalósítás körülbelül 15 percet vesz igénybe, és nincs szükség leállásra vagy újraindításra, mint például az Apache vagy az Nginx. Ha ezt egy gyártóhelyen tervezi alkalmazni, akkor azt javaslom, hogy először teszteljen alacsonyabb környezetben, vagy egy útvonal segítségével, a tesztoldalakon jelentkezhet az eredmények ellenőrzésére. Ha elégedett, tolja oda, ahová csak akarja.
Ez marha jó!
Köszönet Scott a kódért.