Nicht schnarchen bei CORS

Egal, ich brauchte nur einen Titel. Das beliebteste Web-Sicherheitsfeature aller Zeiten ist mir in letzter Zeit mehrmals untergekommen, und ich habe immer das Gefühl, dass das ein Zeichen ist, dass ich etwas schreiben sollte, denn dafür ist Bloggen da.

Das Hauptproblem bei CORS ist, dass Entwickler CORS nicht verstehen. Das Grundkonzept soll einfach sein: Führen Sie keinen Code über Ursprünge hinweg aus. Das bedeutet, wenn ich unter css-tricks.com versuche, JavaScript von einer externen URL wie any-other-website.com zu fetchen, stoppt der Browser es standardmäßig. Sie sehen einen Fehler in der Konsole. Nicht erlaubt.

Es sei denn, die andere Website sendet einen Header, der dies ausdrücklich erlaubt. Meine Domain kann auf der Whitelist stehen oder es kann ein Platzhalter geben, der es erlaubt. Hier gibt es viel mehr Details (wie Preflighting und Anmeldedaten) und wie immer macht der MDN-Artikel hier gute Arbeit.

Was für mich traditionell zu Haarausfall-Momenten geführt hat, ist, wenn CORS inkonsistent zu funktionieren scheint. Zwei Anfragen gehen durch und eine dritte schlägt fehl, was unerklärlich erscheint, aber reproduzierbar war. (Vielleicht war ein Load Balancer mit teilweise gecachten Headern beteiligt? Wer weiß.) Oder ich versuche, einen Proxy zu verwenden, und der Proxy funktioniert nicht mehr. Ich kann mich nicht einmal an alle Beispiele erinnern, aber ich wette, ich war schon über 100 Mal in Besprechungen, um CORS-Probleme zu debuggen.

Jedenfalls sind das die Zeiten, in denen CORS in letzter Zeit auf meinem Schreibtisch gelandet ist

• Dieses Video, Learn CORS In 6 Minutes, hat 10.000 Likes und scheint einen Nerv getroffen zu haben. Eine nicht-ironische Lösung war npm install cors.
• Man muss Servern buchstäblich sagen, dass sie die richtigen Header haben sollen. Also, ähnlich wie im obigen Video, musste ich das in einem Video über Cloudflare Workers tun, wo ich Cross-Origin verwendet habe (aber man muss es nicht, was tatsächlich ein sehr cooles Feature von Cloudflare Workers ist).
• Jakes Artikel „How to win at CORS“, der ein Playground enthält.
• Es gibt Browser-Erweiterungen (wie für Firefox und Chrome), die CORS-Header für Sie abrufen, was eine fragwürdige Notlösung zu sein scheint, aber ich würde niemandem verübeln, sie in der Entwicklung zu verwenden.
• Ich habe darüber geschrieben, wie einfach es ist, ... alles zu proxen, einschließlich einer JavaScript-Datei von Drittanbietern, und sie zu einer First-Party-Datei zu machen. Viele Leute wiesen in den Kommentaren darauf hin, dass dies den Schutz durch CORS vollständig aufhebt, was eine Gefahr darstellt. Zustimmend, es sei denn, Sie kontrollieren diesen Drittanbieter zu 100%, ist es ziemlich gefährlich.