CORS Introducció per a principiants

Es pregunta què és el CORS (compartir recursos entre origen)?


A les pel·lícules d’espies, els operatius de seguretat tenen una forma codificada de transmetre informació entre ells. Com que majoritàriament transmeten informació que es pot utilitzar contra ells si cau en mans dels seus enemics, han d’assegurar-se que els que reben la informació són parts de confiança. El mateix s’aplica als que envien la informació. Quan l’emissor i el receptor tenen confiança, es pot garantir la credibilitat i la seguretat de la informació.

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

Una rèplica d’aquest escenari ocorre en la comunicació entre navegadors i servidors web i s’anomena política del mateix origen.

Segons MDN:

El política del mateix origen és un mecanisme de seguretat crític que restringeix com un document o un script carregat d’un origen pot interaccionar amb un recurs d’un altre origen. Ajuda a aïllar documents potencialment maliciosos, reduint possibles vectors d’atac.

Què és el CORS?

En un cas de la vida real, quan els agents de seguretat donen una regla que la comunicació només s’ha de produir entre els seus operatius com a mitjà de seguretat, és similar a la mateixa política d’origen. No obstant això, pot haver-hi casos en què hauran de relacionar-se amb el món exterior. O, per exemple, amb altres operadors de seguretat poden implementar una altra mesura de seguretat verificar aquells operatius. Aquesta verificació es pot fer de diferents maneres, segons els operatius implicats. En el cas de la comunicació a Internet, CORS és el mecanisme que fa possible que els navegadors utilitzin l’accés a recursos que originalment no podran ser perquè el recurs és d’un origen diferent.

El recurs compartit de recursos creuats (CORS) és un mecanisme que utilitza capçaleres HTTP addicionals per indicar als navegadors que donin una aplicació web que tingui un origen i que tingui accés a recursos seleccionats d’un origen diferent.

He parlat d’origen més d’una vegada i probablement us preguntareu què significa això. Un origen està definit pel protocol, el domini i el port de l’URL. Quan teniu la vostra API en un origen com https://api.geekflare.com:3001 i el vostre frontend a https://geekflare.com, es diu que els orígens són diferents. En aquesta situació, caldrà que CORS pugui accedir als recursos en els dos extrems.

Quan es fan peticions a un servidor, els navegadors (client) i servidors envien sol·licituds i resposta, s’inclouen les capçaleres HTTP. Entre aquestes capçaleres, s’inclouen capçaleres addicionals per evitar que el navegador bloquegi la comunicació.

Per què el navegador bloquejarà la comunicació?

Les seves funcions de seguretat del navegador. Ho farà si la sol·licitud prové d’un origen diferent del del client. Les capçaleres addicionals incloses com a resultat de CORS són una manera d’informar al client que pot fer ús de la resposta que ha rebut.

Capçaleres CORS

Un dels encapçalaments segurs que poden ser un encapçalament de resposta o de sol·licitud.

Capçaleres de resposta

Aquests són els encapçalaments que el servidor envia de nou a la resposta.

  • Access-Control-Allow-Origin:: s’utilitza per especificar l’origen permès per accedir al recurs al servidor. És possible especificar que només s’admeten sol·licituds d’un origen específic: Access-Control-Allow-Origin: https://geekflare.com o que l’origen no té importància – Access-Control-Allow-Origin: *.
  • Control d’accés-Exposar-Capçaleres: com el seu nom indica, aquesta llista els capçaleres als quals té accés el navegador.
  • Access-Control-Max-Age: indica la durada per a la qual es pot posar en memòria cau la resposta d’una sol·licitud prèvia.
  • Control d’accés-Permetre credencials: Això indica que el navegador pot fer ús de la resposta quan es va fer la sol·licitud inicial amb una credencial.
  • Access-Control-Allow-Methods:: indica el mètode (s) que es permet al intentar accedir a un recurs.
  • Access-Control-Allow-Headers: Això indica que les capçaleres HTTP es poden utilitzar en una sol·licitud.

A continuació, es mostra un aspecte de com serà la resposta

HTTP / 1.1 204 Sense contingut
Control d’accés-Permetre origen: *
Control d’accés-Mètodes-permetre: GET, HEAD, PUT, PATCH, POST, DELETE
Varia: Capçaleres de control d’accés-sol·licitud
Control d’accés-Permetre-Capçaleres: Tipus de contingut, Accepta
Durada del contingut: 0
Data: dissabte, 16 de novembre de 2019 11:41:08 GMT + 1
Connexió: mantenir viva

Demana capçaleres

A continuació es mostren les capçaleres que hauria de contenir la sol·licitud d’un client per tal d’utilitzar el mecanisme CORS.

  • Origen: indica l’origen de la sol·licitud del client. Quan es treballi amb un frontend i un backend, com s’ha dit anteriorment, aquest serà l’amfitrió de la vostra aplicació de frontend.
  • Access-Method-Control-Request-Method:: s’utilitza en una sol·licitud previ per indicar el mètode HTTP que s’utilitzarà per realitzar la sol·licitud.
  • Control d’accés-Capítols-Sol·licitud:: s’utilitza en una sol·licitud previ per indicar les capçaleres HTTP que s’utilitzaran per realitzar la sol·licitud.

A continuació, es mostra un aspecte del que serà una sol·licitud

curl -i -X ​​OPCIONS localhost: 3001 / api \
-H ‘Mètode de control d’accés-sol·licitud: GET’ \
-H ‘Capçaleres de control d’accés-sol·licitud: tipus de contingut, accepta’ \
-Origen H: http: // localhost: 3000 ‘

Sol·licituds previ

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

Després d’haver esmentat les sol·licituds de prevenció d’avui aquí i allà, què podria significar?

Les sol·licituds de publicació anticipada es produeixen quan el client ha d’enviar una sol·licitud previ abans de la sol·licitud principal. La sol·licitud de lectura prèvia és superior a sonda per determinar si el servidor admet la sol·licitud principal que està a punt de realitzar-se. Quan s’obté la confirmació positiva, s’envia la sol·licitud principal.

Quan una sol·licitud no és una sol·licitud prèvia, s’anomena a petició senzilla.

Implantació de CORS

Majoritàriament voldreu configurar les coses al fons de la sol·licitud. La implementació depèn del marc que utilitzeu. Per a aquest tutorial, veurem com fer-ho en NodeJS i Rails.

Carrils

Us recomano que utilitzeu el document rack-cors joia. Després haureu d’afegir-ho al fitxer config / application.rb.

config.middleware.insert_before 0, Rack :: Cors do
permetre fer
orígens “*”
recurs ‘*’,
capçaleres:: qualsevol,
expose:% i (client uid de tipus de token de caducitat d’accés a token),
mètodes:% i (obtenir cap de les opcions de supressió de la supressió del missatge),
credencials: cert
final
final

NodeJS

A Node.js, semblarà així.

app.all (“*”, (req, res, següent) => {
res.header (“Access-Control-Allow-Origin”, “*”);
res.header (“Mètodes d’accés-control-permetre”, “PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD”);
res.header (“Control d’accés-permetre-capçaleres”, “*”);
res.header (“Control d’accés-Permetre credencials”, cert);
Pròxim();
});

Al fragment de codi, estem configurant l’origen, els mètodes, les capçaleres i les credencials que haurien de permetre accedir als recursos disponibles al nostre servidor. També podeu pagar Quadrat que proporciona un mòdul d’encapçalaments de seguretat per integrar-se amb les aplicacions Ruby, PHP, Python, Java, Go, Node.JS. I per implementar-ho en Apache o Nginx, consulteu aquesta guia.

Conclusió

CORS relaxa la política perquè el vostre navegador pugui accedir als recursos que desitgeu. Comprendre què és, per què és essencial i com configurar-lo us ajudarà a esbrinar els problemes que podríeu enfrontar a mesura que creeu les vostres aplicacions web.

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