CORS gebruiken met Nginx

Wat is CORS

CORS, ook bekend als het delen van bronnen via verschillende bronnen, is een techniek die in moderne webbrowsers wordt gebruikt en waarmee de toegang tot bronnen die op een webserver worden gehost, wordt beheerd. CORS gebruikt extra headers zoals oorsprong, toegangscontrole-oorsprong en nog veel meer om te bepalen of de gevraagde bron toestemming heeft om naar de browser te worden verzonden. Het primaire doel van CORS is om te voorkomen dat een webtoepassing die in een webbrowser wordt uitgevoerd, toegang krijgt tot bronnen die in een andere oorsprong worden gehost wanneer er geen toestemming is, wat het betekent dat de webtoepassing geen bronnen kan downloaden, zoals afbeeldingen, scripts, CSS zoals enige inhoud enz. wanneer ze niet in dezelfde oorsprong worden gehost (meestal moeten ze zich allemaal in hetzelfde domein bevinden) als de webtoepassing, tenzij de server is geconfigureerd om dit gedrag toe te staan. Door deze implementatie in een webbrowser te hebben, kunnen gebruikers hun gegevens beschermen tegen onbevoegde partijen. Een hacker kan in het geheim een ​​webpagina wijzigen terwijl hij midden in de verbinding zit om de zaken van de gebruiker te verstoren of toegang te krijgen tot waardevolle gegevens. Er zijn echter ook voordelen van CORS, zoals het ontwikkelaars in staat stelt om bronnen van een andere oorsprong te laden vanwege kosteneffectiviteit of gewoon gemak. In dat geval moeten ze hun webserver aanpassen om dergelijke verzoeken toe te staan. Dit artikel laat zien hoe u dit eenvoudig op een Nginx-webserver kunt doen.

Wat triggert een CORS-verzoek?

Niet alle verzoeken leiden tot een CORS-verzoek, omdat de bronnen meestal worden gehost in dezelfde oorsprong als de webtoepassing. Als het anders is, wordt CORS geactiveerd. CORS heeft twee soorten verzoeken, eenvoudig verzoek en CORS preflight-verzoek.

Simple Request werkt als een regulier verzoek, de webbrowser stuurt een verzoek naar de server om een ​​bepaalde bron te downloaden wanneer de gebruiker het heeft gestart, vervolgens controleert de webserver de oorsprong van het verzoek, vergelijkt het met de regels in de webserver, als het overeenkomen, wordt de bron geleverd. Dit aanvraagtype gebruikt OIRIGN- en ACCESS-CONTROL-ALLOW-ORIGIN-headers om te bepalen of de bron moet worden geleverd of niet. Eenvoudig verzoek wordt alleen geactiveerd als verzoekmethoden zoals GET, HEAD, POST worden gebruikt en headers zoals Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width worden gebruikt. Zelfs dan activeren niet alle inhoudstypes een eenvoudig verzoek. Hier activeren alleen formuliercoderingstypen een eenvoudig verzoek.

Het type preflight-verzoek is nogal anders, omdat er geen directe toegang is tot de bronnen in de eerste ronde. Wanneer de bovengenoemde voorwaarden op de een of andere manier worden gewijzigd, hetzij door een andere verzoekheader of een ander inhoudstype te gebruiken, wordt een Pre-flighted-verzoek geactiveerd. In Pre-flighted-verzoeken zorgt de webbrowser er eerst voor dat deze toegang heeft tot de bron door te communiceren met de webbrowser, en wanneer de webbrowser antwoordde met oke (HTTP 200) antwoord, dan stuurt hij een ander verzoek om de bron te downloaden. Het maakt gebruik van de HTTP OPTION-verzoekmethode om het eerste verzoek te initiëren, vervolgens gebruikt het GET, POST-achtige verzoektypen om de bronnen te downloaden.

Nginx configureren om CORS-verzoeken te ondersteunen

Dit gedeelte laat zien hoe u een nginx-webserver configureert om het delen van bronnen tussen verschillende bronnen mogelijk te maken. Dit kan alleen worden gedaan als de ontwikkelaar toegang heeft tot de webserver, omdat het gaat om het wijzigen van het configuratiebestand van Nginx.

Gebruik het volgende eenvoudige codefragment om CORS-verzoeken toe te staan:. Dit moet worden gekopieerd naar het standaardbestand van de nginx-service in Ubuntu of een ander platform.

plaats \
if ($request_method = 'OPTIES')
add_header 'Access-Control-Allow-Origin' 'https://localhost;
add_header 'Access-Control-Allow-Methods'POST, OPTIES';
add_header 'Toegangscontrole-Max-Age' 1728000;
add_header 'Content-Type'text/plain; charset=utf-8';
retour 204;

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

Het basiscodefragment gaat zoals hierboven. Het bevat richtlijnen zoals request_method, add_header om het verzoektype te identificeren, en stel de header van het antwoord in voor de browser om respectievelijk te lezen. De header Access-control-allow-origin definieert tot welke oorsprong de bron toegang heeft, bijvoorbeeld als een webtoepassing die wordt gehost in github toegang wil tot een afbeelding die wordt gehost in myOwnServer.com, dan moet de URL van github worden gebruikt als de waarde van Access-control-allow-origin-richtlijn in myOwnServer.com, dan wanneer de webtoepassing die wordt gehost in github verzoeken naar myOwnServer stuurt.com om het afbeeldingsbestand te downloaden, krijgen al deze gevraagde toestemming. Access-control-allow-method-header definieert welke verzoektypen de webtoepassing die de verzoeken verzendt ondersteunt, en de rest van de headers zijn voor de maximale leeftijd om de verzoeken in de cache te plaatsen en het ondersteunde inhoudstype.

Zoals hierboven beschreven, stuurt de browser, zodra het OPTION-verzoek is voltooid, een ander verzoek om de bronnen te downloaden als het eerste verzoek succesvol was, de headers worden ingesteld in de eerste request_method als haakjes.

Afgezien van de bovengenoemde richtlijnen, zijn er enkele andere belangrijke richtlijnen in Nginx die kunnen worden gebruikt in CORS-verzoeken. Een van de belangrijkste richtlijnen is access-control-allow-headers, wat het doet is om de antwoordheader in te stellen met toegestane headernamen voor browser om te verifiëren. Een webtoepassing kan zijn eigen headers hebben voor verschillende doeleinden, en als dergelijke headers aanwezig zijn in de volgende verzoeken na het initiële OPTIONS-verzoek, dan moeten al deze headers door de webserver worden toegestaan ​​voordat de aangevraagde bron wordt gedeeld.

Het is belangrijk dat dit codefragment op de juiste plaats in het standaardbestand van Nginx staat, omdat Nginx verschillende locatieblokken uitvoert, afhankelijk van de overeenkomende URL. Als een dergelijk locatieblok dit codefragment niet bevat, wordt het helemaal niet uitgevoerd, en daarom is het belangrijk om dit voor de zekerheid in alle locatieblokken te gebruiken. Enkele van de belangrijke locatieblokken zijn Afbeeldingen, PHP (~ \.php$), CSS, enz... blokken.

Nadat het bovengenoemde codefragment is opgeslagen, slaat u het Nginx-bestand op en laadt u de Nginx-service opnieuw om de wijzigingen door te voeren.

Conclusie

CORS, staat bekend als het delen van bronnen tussen verschillende bronnen en is een techniek om de toegang tot bronnen te controleren. Deze bronnen kunnen elk bestand zijn, van afbeelding tot javascript-bestand. Het primaire doel van CORS is om de beveiliging van webapplicaties aan te scherpen om man-in-the-middle-aanvallen te voorkomen. CORS kan echter ook voordelen hebben. In dat geval moet de CORS worden ingeschakeld, omdat dit standaard niet is toegestaan. Het standaard CORS-verzoektype is een eenvoudig verzoektype, het gebruikt alleen ORIGIN- en ACCESS-CONTROL-ALLOW-ORIGIN-richtlijnen, en met die hulp kan de Nginx toestemming verlenen aan de webbrowser om toegang te krijgen tot de gevraagde bron, afhankelijk van de oorsprong. Hoe dan ook, CORS is best handig en moet zorgvuldig worden gebruikt.