Vraagt u zich af wat CORS is (Cross-Origin Resource Sharing)?
In spionagefilms hebben beveiligingsmedewerkers een gecodeerde manier om onderling informatie uit te wisselen. Omdat ze meestal informatie verzenden die tegen hen kan worden gebruikt als het in de handen van hun vijanden valt, moeten ze ervoor zorgen dat degenen die de informatie ontvangen vertrouwde partijen zijn. Hetzelfde geldt voor degenen die de genoemde informatie verzenden. Wanneer de afzender en ontvanger worden vertrouwd, kan de geloofwaardigheid en veiligheid van de informatie worden gegarandeerd.
https://pt.slideshare.net/atirekgupta/selenium-workshop-34820044
Een replica van dit scenario vindt plaats in de communicatie tussen browsers en webservers en wordt de hetzelfde herkomstbeleid.
Volgens MDN:
De hetzelfde herkomstbeleid is een cruciaal beveiligingsmechanisme dat de manier beperkt waarop een document of script dat vanuit een bepaalde oorsprong is geladen, kan communiceren met een bron van een andere oorsprong. Het helpt potentieel schadelijke documenten te isoleren, waardoor mogelijke aanvalsvectoren worden verminderd.
Contents
Wat is CORS?
In een echt geval, wanneer beveiligingsmedewerkers een regel geven dat communicatie alleen tussen hun agenten mag plaatsvinden als een beveiligingsmiddel, is dat vergelijkbaar met hetzelfde beleid van dezelfde oorsprong. Toch kunnen er gevallen zijn waarin ze met de buitenwereld moeten communiceren. Of met medewerkers van andere beveiligingsoutfits, om dat te laten gebeuren, kunnen ze een andere beveiligingsmaatregel implementeren verifiëren die agenten. Deze verificatie kan op verschillende manieren plaatsvinden, afhankelijk van de betrokken medewerkers. Bij communicatie op internet, CORS is het mechanisme dat het voor browsers mogelijk maakt om toegang te krijgen tot bronnen die ze oorspronkelijk niet zouden kunnen gebruiken omdat de bron van een andere oorsprong is.
Cross-Origin Resource Sharing (CORS) is een mechanisme dat extra HTTP-headers gebruikt om browsers te vertellen dat een webtoepassing die op één oorsprong draait, toegang moet krijgen tot geselecteerde bronnen van een andere oorsprong.
Ik heb meer dan eens over oorsprong gesproken en je vraagt je waarschijnlijk af wat dat betekent. Een oorsprong wordt bepaald door het protocol, het domein en de poort van de URL. Wanneer je je API hebt op een oorsprong als https://api.geekflare.com:3001 en je frontend op https://geekflare.com, zou de oorsprong anders zijn. In deze situatie heeft u CORS nodig om aan beide kanten toegang te hebben tot bronnen.
Wanneer verzoeken worden gedaan aan een server, sturen de browsers (client) en servers verzoeken en reacties, worden HTTP-headers opgenomen. Onder deze headers zijn extra headers opgenomen om te voorkomen dat de browser de communicatie blokkeert.
Waarom blokkeert de browser de communicatie?
De browserbeveiligingsfuncties. Dit zal gebeuren als het verzoek afkomstig is van een andere oorsprong dan die van de klant. De extra headers die als resultaat van CORS zijn opgenomen, is een manier om de klant te vertellen dat hij gebruik kan maken van het antwoord dat hij heeft ontvangen.
CORS-kopteksten
Een van de beveiligde headers die een antwoord- of verzoekkop kan zijn.
Reactieheaders
Dit zijn de headers die de server terugstuurt in zijn antwoord.
- Access-Control-Allow-Origin:: Dit wordt gebruikt om de oorsprong op te geven die toegang heeft tot de bron op de server. Het is mogelijk om te specificeren dat alleen verzoeken van een specifieke oorsprong zijn toegestaan - Toegangsbeheer-Toestaan-oorsprong: https://geekflare.com, of dat de oorsprong er niet toe doet – Toegangsbeheer-Toestaan-oorsprong: *.
- Access-Control-Expose-Headers:: Zoals de naam al aangeeft, worden hier de headers weergegeven waartoe de browser toegang heeft.
- Access-Control-Max-Age:: Dit geeft de duur aan gedurende welke de reactie van een preflight-verzoek in de cache kan worden opgeslagen.
- Access-Control-Allow-Credentials:: Dit geeft aan dat de browser het antwoord kan gebruiken wanneer het eerste verzoek werd gedaan met een referentie.
- Access-Control-Allow-Methods:: Dit geeft de methode (s) aan die is toegestaan bij het proberen toegang te krijgen tot een bron.
- Access-Control-Allow-Headers:: Dit geeft aan dat de HTTP-headers in een verzoek kunnen worden gebruikt.
Hier is een voorbeeld van hoe het antwoord eruit zal zien
HTTP / 1.1 204 Geen inhoud
Toegangscontrole-Allow-Origin: *
Toegangscontrole-toestaan-methoden: GET, HEAD, PUT, PATCH, POST, DELETE
Variëren: Access-Control-Request-Headers
Access-Control-Allow-Headers: Content-Type, Accept
Inhoud lengte: 0
Datum: za, 16 nov 2019 11:41:08 GMT + 1
Verbinding: levend houden
Verzoek Headers
Dit zijn de headers die het verzoek van een klant moet bevatten om gebruik te maken van het CORS-mechanisme.
- Oorsprong:: dit geeft de oorsprong van het verzoek van de klant aan. Als u werkt met een frontend en backend, zoals eerder vermeld, is dit de host van uw frontend-applicatie.
- Access-Control-Request-Method:: Dit wordt gebruikt in een preflight-verzoek om de HTTP-methode aan te geven die zal worden gebruikt om het verzoek te doen.
- Access-Control-Request-Headers:: Dit wordt gebruikt in een preflight-verzoek om de HTTP-headers aan te geven die zullen worden gebruikt om het verzoek te doen.
Hier is een voorbeeld van hoe een verzoek eruit zal zien
curl -i -X OPTIES localhost: 3001 / api \
-H ‘Access-Control-Request-Method: GET’ \
-H ‘Access-Control-Request-Headers: Content-Type, Accept’ \
-H ‘Herkomst: http: // localhost: 3000’
Preflight-verzoeken
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Wat kan het, na hier en daar preflight-verzoeken te hebben genoemd, betekenen??
Preflight-verzoeken vinden plaats wanneer de klant vóór het hoofdverzoek een preflight-verzoek moet verzenden. Het preflight-verzoek is meer een sonde om te bepalen of de server het hoofdverzoek ondersteunt dat op het punt staat te worden gedaan. Wanneer een positieve bevestiging is verkregen, wordt het hoofdverzoek verzonden.
Als een verzoek geen preflight-verzoek is, wordt het een genoemd eenvoudig verzoek.
CORS implementeren
U zult meestal dingen aan de achterkant van uw applicatie willen instellen. De implementatie is afhankelijk van het framework dat u gebruikt. Voor deze zelfstudie zullen we bekijken hoe u dit moet doen in NodeJS en Rails.
Rails
Ik raad je aan gebruik te maken van de rack-cors edelsteen. Dan moet je dit toevoegen aan je config / application.rb-bestand.
config.middleware.insert_before 0, Rack :: Cors doen
toestaan doen
oorsprong ‘*’
bron ‘*’,
headers:: elk,
bloot:% i (toegangstoken verlopen token-type uid-client),
methoden:% i (haal post put patch verwijder opties op),
referenties: waar
einde
einde
NodeJS
In Node.js ziet dit er als volgt uit.
app.all (‘*’, (req, res, next) => {
res.header (‘Access-Control-Allow-Origin’, ‘*’);
res.header (‘Access-Control-Allow-Methods’, ‘PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD’);
res.header (‘Access-Control-Allow-Headers’, ‘*’);
res.header (‘Access-Control-Allow-Credentials’, waar);
De volgende();
});
In het codefragment stellen we de oorsprong, methoden, kopteksten en referenties in die toegang moeten hebben tot de bronnen die beschikbaar zijn op onze server. U kunt ook afrekenen Sqreen die een beveiliging headers module biedt die geïntegreerd kan worden met Ruby, PHP, Python, Java, Go, Node.JS applicaties. En om deze in Apache of Nginx te implementeren, raadpleeg deze gids.
Conclusie
CORS versoepelt het beleid zodat uw browser toegang heeft tot de bronnen die u wilt. Als u begrijpt wat het is, waarom het essentieel is en hoe u het instelt, kunt u beter uitzoeken welke problemen u tegenkomt bij het bouwen van uw webapplicaties.
