Cum se utilizează CORS cu Nginx

Ce este CORS

CORS, cunoscut și sub denumirea de partajare a resurselor pe bază de origine, este o tehnică utilizată în browserele web moderne care controlează accesul la resursele găzduite pe un server web. CORS folosește antete suplimentare, cum ar fi origine, control-acces-origine și multe altele, pentru a determina dacă resursa solicitată are permisiunea de a fi trimisă browserului. Scopul principal al CORS este de a împiedica o aplicație web care rulează într-un browser web să acceseze resurse găzduite într-o altă origine atunci când nu există permisiune, ceea ce înseamnă că aplicația web nu poate descărca resurse, cum ar fi imagini, scripturi, css, cum ar fi orice conținut etc. atunci când nu sunt găzduite în aceeași origine (de obicei, toate ar trebui să fie în același domeniu) ca aplicația web, cu excepția cazului în care serverul este configurat pentru a permite acest comportament. Având această implementare într-un browser web, utilizatorii își pot proteja datele de părți neautorizate. Un hacker poate modifica în secret o pagină web în timp ce se află în mijlocul conexiunii pentru a întrerupe activitatea utilizatorului sau pentru a obține acces la date valoroase. Cu toate acestea, există și avantaje ale CORS, cum ar fi faptul că permite dezvoltatorilor să încarce resurse dintr-o altă origine datorită eficienței costurilor sau pur și simplu comodității. În acest caz, trebuie să își modifice serverul web pentru a permite astfel de solicitări. Acest articol demonstrează cum se realizează cu ușurință pe un server web Nginx.

Ce declanșează o cerere CORS

Nu toate cererile declanșează o cerere CORS, deoarece resursele sunt găzduite de obicei în aceeași origine cu aplicația web. Dacă este diferit, atunci CORS este declanșat. CORS are două tipuri de solicitări, cerere simplă și cerere CORS pre-zbor.

Cererea simplă funcționează ca o solicitare obișnuită, browserul web trimite o cerere către server pentru a descărca o anumită resursă atunci când utilizatorul a inițiat-o, apoi serverul web verifică originea cererii, o compară cu regulile din serverul web, dacă este potrivite, resursa este furnizată. Acest tip de solicitare folosește anteturi OIRIGN și ACCESS-CONTROL-ALLOW-ORIGIN pentru a determina dacă resursa trebuie furnizată sau nu. Solicitarea simplă este declanșată numai dacă sunt utilizate metode de solicitare precum GET, HEAD, POST și se utilizează anteturi precum Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width. Chiar și atunci, nu toate tipurile de conținut declanșează o cerere simplă. Aici numai tipurile de codificare a formularelor declanșează o cerere simplă.

Tipul de solicitare pre-zbor este destul de diferit, deoarece nu există acces direct la resurse în prima rundă. Când condițiile menționate anterior sunt modificate cumva, fie utilizând un antet de cerere diferit, fie un alt tip de conținut, se declanșează o cerere Pre-flighted. În solicitările efectuate în prealabil, browserul web se asigură mai întâi că poate accesa resursa comunicând cu browserul web, apoi când browserul web a răspuns cu un răspuns bine (HTTP 200), apoi trimite o altă solicitare de descărcare a resursei. Utilizează metoda de solicitare HTTP OPTION pentru a iniția prima solicitare, apoi folosește tipuri de solicitări GET, POST ca să descarce resursele.

Cum se configurează Nginx pentru a sprijini cererile CORS

Această secțiune arată cum să configurați un server web nginx pentru a permite partajarea resurselor de origine multiplă. Acest lucru se poate face numai dacă dezvoltatorul are acces la serverul web, deoarece implică modificarea fișierului de configurare al Nginx.

Utilizați următorul fragment de cod simplu pentru a permite solicitările CORS. Acest lucru trebuie copiat în fișierul implicit al serviciului nginx din Ubuntu sau orice altă platformă.

Locație \
if ($ request_method = 'OPȚIUNI')
add_header 'Access-Control-Allow-Origin' 'https: // localhost;
add_header 'Access-Control-Allow-Methods "POST, OPȚIUNI";
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type "text / plain; charset = utf-8';
retur 204;

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

Fragmentul de cod de bază merge ca mai sus. Conține directive precum request_method, add_header pentru identificarea tipului de solicitare și setarea antetului răspunsului pentru ca browserul să fie citit, respectiv. Antetul Access-control-allow-origin definește la ce origine are acces resursa, de exemplu dacă o aplicație web găzduită în github dorește să acceseze o imagine găzduită în myOwnServer.com, atunci adresa URL a github ar trebui folosită ca valoare a directivei Access-control-allow-origin în myOwnServer.com, atunci ori de câte ori aplicația web găzduită în github trimite solicitări către myOwnServer.com pentru a descărca fișierul imagine, tuturor acestor solicitări li se acordă permisiunea. Antetul metodei de control al accesului permite definirea tipurilor de solicitări pe care aplicația web care le trimite cererilor acceptă, apoi restul antetelor au vârsta maximă pentru a memora cererile în cache și tipul de conținut acceptat.

Așa cum s-a descris mai sus, odată ce cererea OPTION a fost finalizată, browserul trimite o altă cerere de descărcare a resurselor dacă prima cerere a avut succes, antetele acesteia sunt setate în prima request_method dacă paranteze.

În afară de directivele menționate anterior, există câteva alte directive importante în Nginx care pot fi utilizate în cererile CORS. Una dintre cele mai importante directive este access-control-allow-headers, ceea ce face este de a seta antetul de răspuns cu numele antetelor permise pentru verificarea browserului. O aplicație web poate avea propriile anteturi în diverse scopuri și dacă astfel de anteturi sunt prezente în cererile ulterioare după solicitarea inițială OPȚIUNI, atunci toate aceste anteturi ar trebui să fie permise de serverul web înainte ca resursa solicitată să fie partajată.

Este important ca acest fragment de cod să fie la locul potrivit în fișierul implicit Nginx, deoarece Nginx execută diferite blocuri de locație în funcție de adresa URL potrivită, dacă un astfel de bloc de locație nu conține acest fragment de cod, atunci nu este deloc executat, și, prin urmare, este important să utilizați acest lucru în toate blocurile de locație pentru partea sigură. Unele dintre blocurile de locație importante sunt Imagini, PHP (~ \.php $), CSS, etc ... blocuri.

Odată ce fragmentul de cod menționat anterior este salvat, salvați fișierul Nginx și reîncărcați serviciul Nginx la modificări pentru a intra în vigoare.

Concluzie

CORS, este cunoscut sub numele de partajare a resurselor de origine încrucișată și este o tehnică de control al accesului resurselor. Aceste resurse pot fi orice fișier de la imagine la un fișier javascript. Scopul principal al CORS este de a întări securitatea aplicațiilor web pentru a preveni atacurile omului din mijloc. Cu toate acestea, CORS poate avea și beneficii. În acest caz, CORS trebuie să fie pornit, deoarece nu este permis în mod implicit. Tipul de cerere CORS de bază este un tip de cerere simplu, folosește numai ORIGINĂ și directive ACCESS-CONTROL-ALLOW-ORIGIN și, cu acest ajutor, Nginx poate acorda permisiunea browserului web de a accesa resursa solicitată în funcție de origine. Oricum, CORS este destul de util și trebuie utilizat cu atenție.