CORS: browsertoegang repareren zonder de API voor de wereld te openen

Het supportticket arriveert met een screenshot: “CORS blokkeert onze API”. De frontend-ontwikkelaar staat erop dat de backend "CORS opent als *". Tegelijkertijd werkt curl zonder Origin-header perfect. De verwarring kost dagen omdat we CORS behandelen als een serververgrendeling, terwijl het een browserbeleid is dat bepaalt wie het JavaScript-antwoord kan lezen.

CORS beschermt uw API niet tegen directe aanvallen: curl, Postman, serverscripts en native mobiele applicaties negeren CORS. Authenticatie (JWT, sessie, mTLS) blijft essentieel. CORS beantwoordt een specifieke vraag: heeft https://app.example.com het recht om het JSON-antwoord bloot te stellen aan zijn JavaScript?

Terugkerende incidenten komen van de OPTIONS-preflight die 401 retourneert, de * die niet compatibel is met cookies, of dubbele CORS-headers tussen nginx en het framework. Hier leest u hoe u een duidelijk beleid kunt structureren zonder de deur naar het hele internet te openen.

Preflight-OPTIES en -methoden

“Niet-eenvoudige” verzoeken (JSON POST, aangepaste headers, PUT/DELETE) activeren een preflight OPTIES. De browser verzendt 'Origin', 'Access-Control-Request-Method' en soms 'Access-Control-Request-Headers'. De server moet 204/200 reageren met CORS-headers vóór het echte verzoek.

Klassieke fout: Authenticatie-middleware behandelt OPTIONS als POST en retourneert 401. Browser toont ondoorzichtige CORS-fout - ontwikkelaar geeft CORS de schuld, oorzaak is auth.

Sluit OPTIONS uit van verificatiecontrole op openbare API-routes. Testen met:

curl -X OPTIES -H "Herkomst: https://app.example.com" \

  -H "Toegangscontrole-verzoekmethode: POST" \

  -i https://api.example.com/v1/resource

Oorsprong, inloggegevens en Vary

Met Access-Control-Allow-Credentials: true retourneert u de exacte oorsprong van het verzoek als het op uw witte lijst staat — nooit *.

Voeg 'Vary: Origin' toe aan dynamische CORS-reacties om te voorkomen dat een CDN de verkeerde oorsprong in de cache serveert.

Slechts één laag zendt de headers uit

nginx en Express (of Laravel, Django) die beide Access-Control-Allow-Origin toevoegen, produceren dubbele headers - sommige browsers falen af en toe, het ergste type productiebug.

Kies: CORS aan de rand (nginx/API-gateway) of in de applicatie – niet beide. Documenteer in de ADR-architectuur.

Jaarlijkse audit: grep config nginx + middlewarecode – één enkele bron van waarheid.

CORS ≠ API-beveiliging

Een aanvaller vervalst een verzoek van zijn server zonder Origin-browser – CORS is niet van toepassing. Snelheidsbeperking, authenticatie, validatie-invoer en WAF blijven noodzakelijk.

Kort intern document: “Native mobiele apps hebben geen CORS nodig” – vermindert fout-positieve tickets in de backend.

OpenAPI: lijst met geautoriseerde oorsprongen per omgeving en curl-preflight-kopieer-plakvoorbeeld voor partners.

Testen en waarneembaarheid

Partner Postman-verzameling onderhouden in CI: CORS-regressie gedetecteerd vóór samenvoeging.

Statistieken: OPTIONS-ratio 204 versus 401, onbekende oorsprong afgewezen (geaggregeerd logboek zonder PII).

In geval van een incident: eerst reproduceren in curl-preflight, daarna browser met cache uitgeschakeld - vermijdt valse leads Chrome-extensie.

Gateway-beoordeling

Jaarlijkse audit CORS-headers met één laag - dubbele nginx plus app breekt browsers.

OPTIES zouden snel moeten reageren: time-out lijkt op CORS, maar de server is traag.

Native mobiele apps hebben geen CORS nodig – intern document.

Operationeel toezicht

Gedocumenteerde CORS OpenAPI vermindert partnerondersteuningstickets - winstgevende investering. Voorbeeld krul preflight kopiëren en plakken per omgeving. Partner Postman-collectie handhaafde CI - CORS-regressie vastgelegd vóór de samenvoeging. Documenteer de kloof tussen de belofte van de hostingprovider en de veldmeting in de driemaandelijkse evaluatie.

Kwartaalvoortzetting

Gedocumenteerde CORS OpenAPI vermindert partnerondersteuningstickets - winstgevende investering. Voorbeeld krul preflight kopiëren en plakken per omgeving. Partner Postman-collectie handhaafde CI - CORS-regressie vastgelegd vóór de samenvoeging. Documenteer de kloof tussen de belofte van de hostingprovider en de veldmeting in de driemaandelijkse evaluatie.

Beslis en ga vooruit zonder blinde vlek

1. Reproduceer preflight-krul - OPTIES met Origin en Access-Control-Request-Method voordat u op nginx drukt.
2. Expliciete herkomst op de witte lijst – weerspiegel nooit willekeurig; Varieren: Oorsprong als CDN.
3. Authentificatie overslaan op OPTIES — speciale middleware; 401 op preflight = klassiek ticket.
4. Partnerintegratiekit: exacte oorsprong, inloggegevens, ophaalvoorbeeld, 401 versus CORS-browser.
5. Onafhankelijke API-authenticatie — JWT, snelheidslimiet, CSRF als cookies; CORS is niet het serverslot.

API voor meerdere domeinen: vergelijker, overzicht, blog backend.

Veelgestelde vragen

Beschermt CORS de API tegen aanvallen?

Nee: het informeert de browser welke oorsprong het antwoord kan lezen. curl, native mobiele en serverscripts negeren CORS – API-authenticatie blijft essentieel.

Waarom mislukt * met cookies?

De specificatie staat Access-Control-Allow-Origin: * niet toe wanneer Access-Control-Allow-Credentials: true. U moet de exacte oorsprong van een witte lijst retourneren.

Wat te doen als OPTIONS 401 retourneert?

Authenticatie-middleware blokkeert preflight. Sluit OPTIES uit van verificatiecontrole: een veelvoorkomende oorzaak van “Broken CORS”-tickets.

Hoe testen zonder de browser?

Reproduceer met curl -X OPTIONS -H Herkomst:https://app.example.com -H 'Access-Control-Request-Method: POST' op API-URL.

Documenteer de geautoriseerde oorsprong bij de onboarding van partners – minder noodimplementaties vrijdagavond.