Hogyan növeltem a Netlify által tárolt webhelyem biztonságát ezzel az egyetlen trükkel! A hackerek utálják!
A biztonság nagy dolog. Az internetről való azonnali elérhetőség kétélű fegyver, és emiatt a webalkalmazások a legsebezhetőbb programok közé tartoznak.
Oldalsáv: Hajlamos vagyok azonnal domain neveket vásárolni, ha egy késő éjszaka után egy projektre gondolok, és végül is így jön létre ez a történet.
A közelmúltban felrobbanó motiváció során úgy döntöttem, hogy létrehozok egy kis weboldalt azzal a céllal, hogy segítsek az embereknek regisztrálni a szavazásra (https://registertovote.how). Gyorsan megírtam a prototípus elrendezését és az alapvető funkciókat, de szükségem volt egy gazdagépre, és nem akartam végigmenni a DigitalOcean szerver beállításán (szokásos tárhely-fogalom). Így hát a Netlify-hoz fordultam, amely az új kedvencem, amiben bármit kezelhetek.
Minden szuperül ment! Beállítottam egyéni domainjeimet a Google Domains szolgáltatásból, hogy a Netlify DNS-ére mutassanak, hozzáadtam a github repót a projektemhez az automatikus telepítés beállításához, és már indultunk is a versenyeken! De várj, mi ez?
„D” minősítést kaptam a biztonság miatt?! Hűha, visszavisz a főiskolai időmbe: https://securityheaders.com. Javítsuk ki, jó?
Először is nézzük meg, mik is pontosan a biztonsági fejlécek. Az OWASP a következőképpen határozza meg őket:
“ Az OWASP Secure Headers Project HTTP válaszfejléceket ír le, amelyeket az alkalmazás felhasználhat az alkalmazás biztonságának növelésére. Ha beállították, ezek a HTTP-válaszfejlécek korlátozhatják a modern böngészőket abban, hogy könnyen megelőzhető sebezhetőségekbe ütközzenek. Az OWASP Secure Headers Project célja, hogy felhívja a figyelmet ezekre a fejlécekre és ezek használatára.”
Félelmetes, szóval ezek egyszerű HTTP válaszfejlécek, amelyeket beállíthatunk, amelyek növelik webhelyünk biztonságát. Ugyanaz a https://securityheaders.com webhely, amely az egómat ütötte ki, néhány ajánlott alapértelmezett értéket is tartalmaz néhány ilyen gyakori fejléchez. Használja ezeket az ajánlott értékeket (általában ezek a legbiztonságosabbak), hacsak nincs konkrét használati esete, amely megakadályozza ezt. Az ajánlott alapértelmezett értékek a következők:
X-Frame-Options: DENY X-XSS-Protection: 1; mode=block Referrer-Policy: no-referrer X-Content-Type-Options: nosniff
Tehát most van néhány biztonságos, ésszerű alapértelmezett értékünk a fejlécekhez, de hogyan telepíthetjük őket a Netlify-ba? Némi keresgélés után rájöttem, hogy a Netlify lehetővé teszi biztonsági fejlécek hozzáadását azáltal, hogy hozzáad egy _headers
fájlt a webhely telepített mappájának gyökeréhez. Ha statikus webhelyet használ, ennek a fájlnak közvetlenül a index.html
fájl mellett kell lennie. Ha olyan keretrendszert használ, mint a Vue.js, a fájlnak a /public
mappába kell kerülnie.
Illessze be a következő kódot a _headers
fájlba:
/* X-Frame-Options: DENY X-XSS-Protection: 1; mode=block Referrer-Policy: no-referrer X-Content-Type-Options: nosniff
A tetején található /*
jelzi a Netlify-nak, hogy alkalmazza ezeket a fejléceket webhelye összes lehetséges oldalára/útvonalára. Ha különböző oldalakra van szüksége a különböző biztonsági fejlécekhez, több útvonalat is megadhat a fájlban. További információt a Netlify fejlécoldalán találsz itt.
Megjegyzés:Ha valamilyen okból nem tud elhelyezni egy _headers
fájlt a webes gyökérkönyvtárban, ehelyett létrehozhat egy netlify.toml
fájlt a github-tárhely gyökérkönyvtárában. A fájl tartalmának kissé el kell térnie a fentitől:
[[headers]] for = "/*" [headers.values] X-Frame-Options = "DENY" X-XSS-Protection = "1; mode=block" Referrer-Policy = "no-referrer" X-Content-Type-Options = "nosniff"
Most, hogy a fejlécek a helyükön vannak, teszteljük újra webhelyeink biztonságát!
Woot! Egy „A”, ez most inkább hasonlít!
Remélem tetszett a cikk, ne felejts el likeolni, kommentelni és feliratkozni! Mármint pozitív szavazás. Várj, ez is rossz. Taps! Igen, tapsolj, ha tetszett a cikk.