Zkratka proCross-Origin Resource SharingkorsTakéCross-Origin Resource Sharing, CORS policyPokročilý
Definice
CORS je mechanismus prohlížečů a HTTP hlaviček, který říká, zda skript z jednoho originu smí číst odpověď z jiného originu. Chrání uživatele před nechtěným přístupem webů k datům dostupným v jeho prohlížeči, ale není náhradou autentizace, autorizace ani serverové kontroly požadavků.
Proč CORS řeší čtení odpovědi, ne samotný požadavek
CORS navazuje na same-origin policy, základní omezení webového prohlížeče. Origin tvoří schéma, host a port, například https://app.example:443. Skript načtený z jednoho originu normálně nemá volně číst odpovědi z jiného originu, protože uživatelův prohlížeč může u požadavku automaticky přidat cookies, klientské certifikáty nebo jiné přihlašovací údaje.
Server pomocí CORS hlaviček oznamuje, kterým originům povoluje číst odpověď. Důležité je slovo číst: některé požadavky se k serveru mohou fyzicky dostat i tehdy, když je prohlížeč následně zablokuje pro JavaScript. Backend proto nesmí spoléhat na CORS jako na autorizaci. Každá operace měnící data musí mít vlastní kontrolu identity, oprávnění a ochranu proti CSRF, pokud používá cookies.
Kdy prohlížeč posílá preflight
Preflight je předběžný požadavek metodou OPTIONS, kterým se prohlížeč zeptá serveru, zda je zamýšlené cross-origin volání přijatelné. Preflight typicky vzniká u metod jako PUT nebo DELETE, u vlastních hlaviček typu Authorization, nebo u některých hodnot Content-Type. Server odpoví sadou hlaviček Access-Control-Allow-Methods, Access-Control-Allow-Headers a případně Access-Control-Max-Age.
Chyba v preflightu často vypadá, jako by API „nefungovalo“, ale problém bývá pouze v tom, že odpověď na OPTIONS neobsahuje očekávané hlavičky, má špatný status, nebo ji zastaví middleware, proxy či firewall. Vývojářské nástroje v prohlížeči obvykle ukážou přesnou hlavičku, která chybí.
Které hlavičky rozhodují
Nejznámější hlavička je Access-Control-Allow-Origin. Hodnota může být konkrétní origin, například https://app.example, nebo hvězdička pro veřejně čitelné odpovědi bez přihlašovacích údajů. Pokud se posílají cookies nebo jiné credentials, musí server vrátit konkrétní origin a také Access-Control-Allow-Credentials: true. Kombinace credentials a * je pro prohlížeč neplatná.
Hlavička Vary: Origin je důležitá při cachování odpovědí, které se liší podle originu. Bez ní může CDN nebo proxy omylem použít odpověď připravenou pro jiný web. CORS konfigurace proto není jen záležitost backendového frameworku, ale i reverzní proxy, CDN a edge vrstvy.
Příklady z praxe
Frontend volá oddělené API
Single-page aplikace běží na https://app.example a API na https://api.example. Prohlížeč pošle preflight, protože požadavek obsahuje Authorization. API povolí jen konkrétní frontend a dovolí hlavičku s tokenem.
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.example
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Authorization, Content-Type
Access-Control-Max-Age: 600Cookies a špatně použitá hvězdička
E-shop chce volat zákaznické API s cookies z domény API. Server vrátí Access-Control-Allow-Origin: * a zároveň Access-Control-Allow-Credentials: true. Prohlížeč odpověď zablokuje, protože u přihlašovacích údajů musí být uveden přesný origin.
Access-Control-Allow-Origin: https://shop.example
Access-Control-Allow-Credentials: true
Vary: OriginPříklady z praxe
Frontend volá oddělené API
Single-page aplikace běží na https://app.example a API na https://api.example. Prohlížeč pošle preflight, protože požadavek obsahuje hlavičku Authorization. API odpoví, že konkrétní frontend smí číst odpověď a smí poslat token.
HTTP/1.1 204 No Content Access-Control-Allow-Origin: https://app.example Access-Control-Allow-Methods: GET, POST Access-Control-Allow-Headers: Authorization, Content-Type Access-Control-Max-Age: 600Cookies a špatně použitá hvězdička
E-shop volá zákaznické API s cookies. Server nejdřív vrací hvězdičku v Access-Control-Allow-Origin a prohlížeč odpověď zablokuje. Po nastavení přesného originu a Vary: Origin může prohlížeč odpověď předat JavaScriptu.
Access-Control-Allow-Origin: https://shop.example Access-Control-Allow-Credentials: true Vary: Origin
Časté omyly
- MýtusCORS chrání API před tím, aby na něj někdo poslal požadavek.
- Ve skutečnostiCORS primárně omezuje čtení odpovědi JavaScriptem v prohlížeči. Neprohlížečové klienty, servery nebo útočníkovy nástroje tím API obecně nezastavíte.
- MýtusCORS chyba znamená, že backend je nedostupný.
- Ve skutečnostiCORS chyba často znamená, že backend odpověděl bez správných hlaviček, nebo že selhal preflight. Síťové spojení a samotná aplikační logika mohou být v pořádku.
- MýtusVypnutí CORS v prohlížeči je normální řešení pro produkci.
- Ve skutečnostiVypnutí ochrany v prohlížeči je jen lokální vývojářská berlička a neřeší chování uživatelů. Produkční řešení patří do konfigurace serveru, proxy, CDN nebo aplikačního frameworku.
Časté dotazy
- Proč volání API projde v Postmanu, ale prohlížeč hlásí CORS?
- Postman, curl nebo serverový backend nepodléhají stejnému CORS omezení jako JavaScript běžící ve webovém prohlížeči. CORS vynucuje hlavně prohlížeč, protože chrání uživatele před stránkami, které by chtěly číst odpovědi z jiných webů jeho jménem. API může být z pohledu sítě dostupné a přesto ho prohlížeč pro frontend zablokuje kvůli chybějícím nebo neodpovídajícím hlavičkám.
- Proč nestačí u CORS nastavit Access-Control-Allow-Origin na hvězdičku?
- CORS s hodnotou Access-Control-Allow-Origin: * se hodí jen pro veřejné odpovědi, u kterých nevadí čtení z libovolného webu. CORS s hvězdičkou nelze použít pro požadavky s cookies, HTTP autentizací nebo jinými credentials. Citlivá API by měla vracet jen ověřený seznam originů a zároveň stále kontrolovat přihlášení a oprávnění uživatele.
- Musí API kontrolovat oprávnění, když má správně nastavený CORS?
- CORS nenahrazuje autorizaci, protože nebrání všem klientům v odeslání požadavku na server. CORS hlavně rozhoduje, zda prohlížeč zpřístupní odpověď JavaScriptu na stránce z jiného originu. Backend musí samostatně ověřit identitu uživatele, jeho oprávnění, platnost tokenu a u cookie autentizace také rizika spojená s CSRF.
- Co znamená preflight request u CORS?
- Preflight request v CORS je automatický dotaz prohlížeče metodou OPTIONS před skutečným požadavkem. Prohlížeč se jím ptá serveru, zda dovolí konkrétní metodu, hlavičky a origin. Preflight se objevuje například u PUT, DELETE, Authorization nebo nestandardních hlaviček. Selhání preflightu znamená, že skutečný požadavek nemusí být vůbec odeslán.
Zdroje
- Cross-Origin Resource Sharing (CORS)(otevře se v novém okně)
- Fetch Standard(otevře se v novém okně)
- Cross-Origin Resource Sharing(otevře se v novém okně)
- The Web Origin Concept(otevře se v novém okně)
Související pojmy
