Hogyan kell használni a CORS-t az Nginx-szel

Mi a CORS

A CORS, más néven kereszt eredetű erőforrás-megosztás a modern webböngészőkben használt technika, amely ellenőrzi a webszerveren tárolt erőforrásokhoz való hozzáférést. A CORS további fejléceket, például eredetet, hozzáférés-vezérlés-eredetet és még sok mást használ annak meghatározásához, hogy a kért erőforrás rendelkezik-e engedéllyel a böngészőhöz való elküldéshez. A CORS elsődleges célja annak megakadályozása, hogy a webböngészőben futó webalkalmazások hozzáférjenek egy másik eredetű hosztolt erőforrásokhoz, ha nincs engedély. Ez azt jelenti, hogy a webalkalmazás nem tud letölteni erőforrásokat, például képeket, szkripteket, cs-ket bármilyen tartalom stb. amikor nem ugyanabban az eredetben hosztolják őket (általában az összesnek ugyanabban a tartományban kell lenniük), mint a webalkalmazás, hacsak a kiszolgáló nincs konfigurálva erre a viselkedésre. Azáltal, hogy ezt a webböngészőben megvalósítja, a felhasználók megvédhetik adataikat illetéktelen felektől. Egy hacker titokban módosíthat egy weboldalt, miközben a kapcsolat közepén van, hogy megzavarja a felhasználó üzleti tevékenységét, vagy hozzáférjen értékes adatokhoz. Vannak azonban a CORS előnyei is, például lehetővé teszi a fejlesztők számára, hogy más eredetű erőforrásokat töltsenek be a költséghatékonyság vagy egyszerűen a kényelem miatt. Ebben az esetben módosítaniuk kell webszerverüket, hogy engedélyezzék az ilyen kéréseket. Ez a cikk bemutatja, hogyan lehet ezt könnyedén elvégezni egy Nginx webszerveren.

Mi váltja ki a CORS kérését

Nem minden kérés vált ki CORS-kérést, mivel az erőforrások általában ugyanabban a származási helyen vannak tárolva, mint a webalkalmazás. Ha ez eltér, akkor a CORS aktiválódik. A CORS-nak kétféle kérése van, az egyszerű kérés és a CORS előre repült kérések.

Az egyszerű kérés rendszeres kérésként működik, a webböngésző kérést küld a szervernek egy adott erőforrás letöltésére, amikor a felhasználó elindította, majd a webszerver ellenőrzi a kérés eredetét, összehasonlítja a webszerver szabályaival, ha ez az erőforrás megadva. Ez a kéréstípus az OIRIGN és az ACCESS-CONTROL-ALLOW-ORIGIN fejléceket használja annak meghatározásához, hogy az erőforrást meg kell-e adni vagy sem. Az egyszerű kérés csak akkor aktiválódik, ha olyan kérési módszereket használnak, mint a GET, a HEAD, a POST, és az olyan fejléceket használják, mint az Accept, az Accept-Language, a Content-Language, a Content-Type, DPR, a Downlink, az adatok mentése, a Viewport-Width, a Width. Akkor sem minden tartalomtípus vált ki egyszerű kérést. Itt csak az űrlapkódolási típusok indítanak egyszerű kérést.

Az előre repült kérés típusa meglehetősen eltérő, mivel az első körben nincs közvetlen hozzáférés az erőforrásokhoz. Amikor a fent említett feltételeket valamilyen módon megváltoztatják, akár egy másik kérésfejléc, akár más tartalomtípus használatával, egy előre repült kérés vált ki. Előre repült kérések esetén a webböngésző először győződjön meg arról, hogy hozzáférhet az erőforráshoz a webböngészővel való kommunikációval, majd amikor a webböngésző rendben (HTTP 200) választ adott, akkor újabb kérést küld az erőforrás letöltésére. A HTTP OPTION kérési módszert használja az első kérés kezdeményezéséhez, majd a GET, POST-szerű kéréstípusokat használja az erőforrások letöltésére.

Az Nginx beállítása a CORS kérések támogatására

Ez a szakasz bemutatja, hogyan kell konfigurálni az nginx webkiszolgálót az eredetközi keresztmegosztás engedélyezéséhez. Ezt csak akkor lehet megtenni, ha a fejlesztőnek hozzáférése van a webszerverhez, mivel ez magában foglalja az Nginx konfigurációs fájljának módosítását.

Használja a következő egyszerű kódrészletet a CORS kérések engedélyezéséhez. Ezt át kell másolni az nginx szolgáltatás alapértelmezett fájljába az Ubuntuban vagy bármely más platformon.

hely \
if ($ request_method = 'OPCIÓK')
add_header 'Access-Control-Allow-Origin' https: // localhost;
add_header 'Access-Control-Allow-Methods "POST, OPTIONS";
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type "text / plain; charset = utf-8';
visszatérés 204;

if ($ request_method = 'POST')
add_header 'Access-Control-Allow-Origin "https: // localhost;
add_header 'Access-Control-Allow-Methods' 'POST';

Az alapvető kódrészlet a fentiek szerint működik. Olyan irányelveket tartalmaz, mint a request_method, az add_header a kérés típusának azonosításához, és a válasz fejlécét állítja be a böngésző számára. Az Access-control-allow-origin fejléc meghatározza, hogy az erőforrás milyen eredethez fér hozzá, például ha a githubban tárolt webalkalmazás egy myOwnServerben tárolt képhez akar hozzáférni.com, akkor a github URL-jét kell használni a MyOwnServer Access-control-allow-origin direktívájának értékeként.com, majd amikor a githubban tárolt webalkalmazás kéréseket küld a myOwnServer-hez.com letölteni a képfájlt, ezek mindegyike engedélyt kap. Az Access-control-allow-method fejléc meghatározza, hogy a kérelmeket küldő webalkalmazás milyen kéréstípusokat támogat, majd a többi fejléc maximális életkorának megfelelő, hogy a gyorsítótárba helyezze a kéréseket, és a támogatott tartalomtípus.

A fent leírtak szerint az OPTION kérelem befejezése után a böngésző újabb kérést küld az erőforrások letöltésére, ha az első kérelem sikeres volt, a fejléceket pedig az első request_method adja meg zárójelben.

A fent említett irányelveken kívül vannak más fontos irányelvek az Nginx-ben, amelyek felhasználhatók a CORS kérésekben. Az egyik legfontosabb irányelv a hozzáférés-vezérlés-engedély-fejlécek, amit a válasz fejlécének engedélyezett fejlécnevekkel történő beállítása állít be a böngésző számára az ellenőrzéshez. Egy webalkalmazásnak különféle célokra lehetnek saját fejlécei, és ha az ilyen fejlécek az eredeti OPTIONS kérés után szerepelnek a következő kérésekben, akkor a webszervernek engedélyeznie kell ezeket a fejléceket a kért erőforrás megosztása előtt.

Fontos, hogy ez a kódrészlet a megfelelő helyen legyen az Nginx alapértelmezett fájljában, mert az Nginx különböző helyblokkokat hajt végre az egyező URL-től függően, ha egy ilyen helyblokk nem tartalmazza ezt a kódrészletet, akkor egyáltalán nem hajtódik végre, és ezért fontos, hogy ezt az összes hely blokkban használják a biztonságos oldal érdekében. Néhány fontos helyblokk a Képek, PHP (~ \.php $), CSS stb. blokkok.

A fent említett kódrészlet mentése után mentse el az Nginx fájlt, és a hatálybalépéshez töltse be újra az Nginx szolgáltatást.

Következtetés

A CORS, kereszt eredetű erőforrás-megosztás néven ismert, és az erőforrásokhoz való hozzáférés ellenőrzésének technikája. Ezek az erőforrások lehetnek bármilyen fájlok képektől javascript fájlokig. A CORS elsődleges célja a webalkalmazások biztonságának szigorítása, hogy megakadályozzák az embereket a középső támadásokban. A CORS-nak azonban lehetnek előnyei is. Ebben az esetben a CORS-ot be kell kapcsolni, mivel alapértelmezés szerint nem engedélyezett. Az alapvető CORS kéréstípus egyszerű kéréstípus, csak az ORIGIN és az ACCESS-CONTROL-ALLOW-ORIGIN direktívákat használja, és ezzel a segítséggel az Nginx az eredettől függően engedélyt adhat a webböngészőnek a kért erőforrásokhoz való hozzáférésre. Akárhogy is, a CORS nagyon hasznos, és körültekintően kell használni.