CORS Introducere pentru începători

Întrebați-vă ce este CORS (partajarea resurselor încrucișate)?


În filmele de spion, agenții de securitate au o modalitate codificată de a transmite informații între ei. Întrucât transmit în mare parte informații care pot fi folosite împotriva lor, dacă acestea se încadrează în mâinile inamicilor lor, trebuie să se asigure că cei care primesc informațiile sunt părți de încredere. Același lucru se aplică și celor care trimit informațiile menționate. Când expeditorul și receptorul au încredere, credibilitatea și securitatea informațiilor pot fi garantate.

https://pt.slideshare.net/atirekgupta/selenium-workshop-34820044

O replică a acestui scenariu se întâmplă în comunicarea dintre browsere și serverele web și se numește ” aceeași origine de politică.

Conform MDN:

 aceeași origine de politică este un mecanism critic de securitate care restricționează modul în care un document sau script încărcat de la o origine poate interacționa cu o resursă de la o altă origine. Ajută la izolarea documentelor potențial dăunătoare, reducând posibilii vectori de atac.

Ce este CORS?

Într-un caz din viața reală, atunci când agenții de securitate dau o regulă conform căreia comunicarea ar trebui să se întâmple doar între agenții săi ca mijloc de securitate, aceasta este similară cu aceeași politică de aceeași origine. Cu toate acestea, pot exista cazuri în care vor trebui să interacționeze cu lumea exterioară. Sau cu operatori ai altor echipamente de securitate, pentru ca acest lucru să se întâmple, ei pot pune în aplicare o altă măsură de securitate verifica acei operatori. Această verificare poate fi realizată în diferite moduri, în funcție de operatorii implicați. În cazul comunicării pe internet, CORS este mecanismul care face posibilă utilizarea browserelor de acces la resurse pe care inițial nu le vor putea, deoarece resursa este de altă origine.

Împărțirea resurselor încrucișate (CORS) este un mecanism care folosește anteturi HTTP suplimentare pentru a spune browserelor să ofere unei aplicații web care rulează la o origine, acces la resurse selectate de la o altă origine.

Am vorbit despre origine de mai multe ori și probabil te întrebi ce înseamnă asta. O origine este definită prin protocol, domeniu și portul adresei URL. Când aveți API-ul dvs. la o origine, cum ar fi https://api.geekflare.com:3001, și frontend-ul dvs. la https://geekflare.com, se spune că originile sunt diferite. În această situație, veți avea nevoie de CORS pentru a putea accesa resurse pe ambele capete.

Când cererile sunt făcute către un server, browserele (clientul) și serverele trimit cereri și răspuns, anteturile HTTP sunt incluse. Printre aceste anteturi, sunt incluse și anteturi suplimentare pentru a împiedica browserul să blocheze comunicarea.

De ce browserul va bloca comunicarea?

Caracteristicile sale de securitate a browserului. O va face dacă cererea provine de la o origine diferită de cea a clientului. Anteturile suplimentare incluse în rezultatul CORS reprezintă o modalitate de a-i spune clientului că poate folosi utilizarea răspunsului pe care l-a primit.

Anteturile CORS

Unul dintre anteturile sigure care poate fi fie un antet de răspuns, fie o solicitare.

Anteturi de răspuns

Acestea sunt anteturile pe care serverul le trimite înapoi în răspunsul său.

  • Access-Control-Allow-Origin:: Aceasta este utilizată pentru a specifica originea permisă accesării resursei pe server. Este posibil să specificăm că sunt permise doar cereri de la o anumită origine – Acces-Control-Permite-Origine: https://geekflare.com sau că originea nu contează – Acces-Control-Permite-Origine: *.
  • Acces-Control-Expose-Headers:: După cum îi spune numele, acesta listează anteturile la care are acces browserul.
  • Access-Control-Max-Age:: indică durata pentru care poate fi pus în cache răspunsul unei solicitări preflight.
  • Acces-Control-Permite-Credențiale:: Aceasta indică faptul că browserul poate folosi răspunsul atunci când cererea inițială a fost făcută cu o acreditare.
  • Acces-Control-Allow-Methods:: Aceasta indică metoda (metodele) permise la încercarea de acces la o resursă.
  • Acces-Control-Allow-Headers: Acest lucru indică că anteturile HTTP pot fi utilizate într-o solicitare.

Iată un exemplu despre cum va arăta răspunsul

HTTP / 1.1 204 Fără conținut
Control de acces-Permite-origine: *
Metode de acces-control-Permite-acces: GET, HEAD, PUT, PATCH, POST, DELETE
Diverse: Acces-Control-Cerere-anteturi
Acces-Control-Permite-anteturi: Conținut-tip, Accept
Lungimea conținutului: 0
Data: Sat, 16 Nov 2019 11:41:08 GMT + 1
Conexiune: menține-te în viață

Cereți anteturi

Iată care sunt anteturile pe care trebuie să le conțină solicitarea unui client pentru a putea folosi mecanismul CORS.

  • Originea: Aceasta indică originea cererii clientului. Când lucrați cu un frontend și un backend, așa cum s-a menționat anterior, acesta va fi gazda aplicației dvs. de frontend.
  • Acces-Control-Method-Request-Method: Aceasta este utilizată într-o solicitare preflight pentru a indica metoda HTTP care va fi utilizată pentru a face solicitarea.
  • Acces-Control-Cerere-anteturi:: Acesta este utilizat într-o solicitare preflight pentru a indica anteturile HTTP care vor fi utilizate pentru a face solicitarea.

Iată un exemplu despre cum va arăta o solicitare

curl -i -X ​​OPȚIUNI localhost: 3001 / api \
-H ‘Metodă de acces-control-solicitare: GET’ \
-H ‘Acces-Control-Cerere-anteturi: conținut-tip, accepta’ \
-H ‘Origine: http: // localhost: 3000’

Solicitări preflight

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

După ce am menționat cererile preflight aici și acolo, ce ar putea însemna?

Cererile de pre-zbor se produc atunci când clientul trebuie să trimită o cerere de pre-zbor înainte de cererea principală. Solicitarea în prealabil este mai mare de a sonda pentru a determina dacă serverul acceptă cererea principală care urmează să fie făcută. Când se obține confirmarea pozitivă, cererea principală este apoi trimisă.

Atunci când o solicitare nu este o solicitare preflight, se numește a cerere simplă.

Implementarea CORS

Cel mai mult veți dori să configurați lucrurile în spatele aplicației. Implementarea depinde de cadrul pe care îl utilizați. Pentru acest tutorial, vom analiza cum se face în NodeJS și Rails.

Șine

Îți recomand să folosești Rack-cori bijuterie. Apoi, va trebui să adăugați acest lucru în fișierul dvs. config / application.rb.

config.middleware.insert_before 0, Rack :: Cors do
permiteți să faceți
origini “*”
resursa “*”,
anteturi: oricare,
expose:% i (client uid de tip token de expirare acces-token),
metode:% i (primiți post put patch ștergere opțiuni cap),
acreditare: adevărat
Sfârșit
Sfârșit

NodeJS

În Node.js, acest lucru va arăta astfel.

app.all (‘*’, (req, res, următor) => {
res.header („Acces-Control-Permite-Origine”, „*”);
res.header („Metode de acces-control-Permite”, „PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD”);
res.header („Acces-Control-Permite-anteturi”, „*”);
res.header („Access-Control-Allow-Credentials”, adevărat);
Următor →();
});

În fragmentul de cod, setăm originea, metodele, anteturile și datele de acreditare care ar trebui să fie permise să acceseze resursele disponibile pe serverul nostru. Puteți, de asemenea, face plata Sqreen care furnizează un modul antet de securitate pentru a fi integrat cu aplicațiile Ruby, PHP, Python, Java, Go, Node.JS. Și pentru a implementa în Apache sau Nginx, consultați acest ghid.

Concluzie

CORS relaxează politica, astfel încât browserul dvs. să poată accesa resursele pe care le doriți. Înțelegerea a ceea ce este, de ce este esențial și modul de configurare, vă va ajuta să descoperiți problemele cu care vă puteți confrunta în timp ce creați aplicațiile dvs..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map