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.