CORS problemi i rješenja: Sigurna razmjena resursa među domenama

Q: Kako preglednici provode CORS pravila i koja HTTP zaglavlja se koriste?

Preglednici automatski dodaju 'Origin' zaglavlje prilikom cross-origin zahtjeva. Server odgovara s 'Access-Control-Allow-Origin'. Preglednik uspoređuje zaglavlja i odlučuje je li zahtjev siguran. Dodatno, koristi se 'Access-Control-Allow-Methods', 'Access-Control-Allow-Headers' i 'Access-Control-Allow-Credentials' za definiranje metoda, headera i credentialsa.

Q: Koji su najčešći uzroci CORS grešaka i kako ih otkriti?

Najčešći uzroci su loša konfiguracija 'Access-Control-Allow-Origin', zahtjevi s drugih portova ili protokola, problemi s preflight zahtjevima i credentialsima. U konzoli preglednika (Developer Tools) pronaći ćete detaljne poruke greške. U Network tab-u analizirajte HTTP zaglavlja servera.

Q: Koje su najčešće sigurnosne rupe kod CORS-a i kako ih spriječiti?

Najveći rizik je postavljanje 'Access-Control-Allow-Origin: *' (dopušta svima) i kombiniranje s credentialsima. Spriječite to ograničavanjem domene, pažljivom upotrebom credentialsa i dodatnom zaštitom (npr. CSRF).

Ovaj blog vodič fokusira se na probleme Cross-Origin Resource Sharing (CORS) s kojima se web developeri često susreću. Pojašnjava što je CORS, osnovne principe i zašto je ključan za moderne web aplikacije. Detaljno obrađuje kako nastaju CORS greške i metode za njihovo otklanjanje. Naglašava najbolje prakse i kritične sigurnosne točke za implementaciju CORS-a. Cilj ovog vodiča je pomoći vam da razumijete i riješite CORS izazove u svojim web projektima.

Što je CORS? Osnovne informacije i važnost

Mapa sadržaja

Cross-Origin Resource Sharing (CORS) je sigurnosni mehanizam koji web preglednicima omogućuje pristup resursima s drugih domena. Ukratko, regulira kako web aplikacija pristupa API-jima, fontovima, slikama i ostalim podacima koji nisu na njenoj domeni. Preglednici po defaultu blokiraju zahtjeve prema drugim domenama zbog politike istog izvora (Same-Origin Policy). CORS je način da se ta ograničenja zaobiđu, ali na siguran način.

Važnost CORS-a proizlazi iz složenosti modernih web aplikacija – one često povlače podatke s raznih servera, API servisa ili CDN-ova. Bez CORS-a, takva komunikacija bi bila onemogućena, što bi funkcionalnost weba drastično smanjilo. CORS omogućuje developerima da aplikacija ostane sigurna, ali istovremeno fleksibilna po pitanju izvora podataka.

U tablici su sažeti osnovni CORS pojmovi i način rada:

Pojam	Objašnjenje	Važnost
Politika istog izvora (Same-Origin Policy)	Sprječava skriptama s jedne domene da pristupaju resursima s druge.	Štiti podatke od zlonamjernih skripti i osigurava sigurnost korisnika.
Cross-Origin zahtjev	HTTP zahtjev iz jedne domene prema drugoj.	Omogućuje pristup različitim API-ima i resursima.
CORS zaglavlja	Posebna HTTP zaglavlja koja server dodaje u odgovor, dopuštajući pristup odabranim domenama.	Definira tko smije pristupiti podacima.
Preflight zahtjev	OPTIONS zahtjev koji preglednik šalje prije složenih cross-origin zahtjeva.	Provjerava hoće li server dopustiti određeni zahtjev.

Osnovni princip CORS-a je da server kroz HTTP zaglavlja javlja pregledniku tko smije pristupiti njegovim resursima. Ključno je zaglavlje Access-Control-Allow-Origin. Ako je tražena domena navedena ili je vrijednost * (svaka domena), zahtjev prolazi. U suprotnom, preglednik ga blokira i javlja CORS grešku.

Ključni CORS elementi

Access-Control-Allow-Origin: Dopušta pristup odabranim domenama.

Access-Control-Allow-Methods: Definira dopuštene HTTP metode (GET, POST, PUT, DELETE...)

Access-Control-Allow-Headers: Navodi koje custom zaglavlja smiju biti u zahtjevu.

Access-Control-Allow-Credentials: Dopušta slanje autentifikacijskih podataka (cookies, auth headers).

Access-Control-Max-Age: Koliko dugo se rezultat preflight zahtjeva može cacheirati.

CORS greške najčešće nastaju zbog nepravilne server konfiguracije. Važno je dozvoliti pristup samo pouzdanim domenama i pratiti najbolje sigurnosne prakse. Dobro postavljen CORS povećava funkcionalnost i sigurnost web aplikacije te poboljšava korisničko iskustvo.

Princip rada Cross-Origin Resource Sharinga

Cross-Origin Resource Sharing (CORS) je mehanizam koji preglednicima omogućuje da web stranice pristupaju resursima s drugih domena, pod određenim uvjetima. Politika istog izvora (same-origin policy) standardno zabranjuje cross-origin zahtjeve, osim ako server ne dozvoli iznimke putem CORS zaglavlja.

Glavni cilj CORS-a je zaštita korisničkih podataka od zlonamjernih web stranica. U nekim slučajevima, potrebno je omogućiti razmjenu podataka između aplikacije i API-a na drugoj domeni. CORS je sigurno rješenje za ovakve scenarije.

Područje	Objašnjenje	Primjer
Origin	Adresa izvora zahtjeva.	http://primjer.com
Access-Control-Allow-Origin	Domena koju server dopušta.	http://primjer.com, *
Access-Control-Request-Method	Koju HTTP metodu klijent želi koristiti.	POST, GET
Access-Control-Allow-Methods	Server navodi koje metode dopušta.	POST, GET, OPTIONS

CORS funkcionira razmjenom HTTP zaglavlja između klijenta (preglednika) i servera. Preglednik automatski šalje Origin zaglavlje pri cross-origin zahtjevu. Server procjenjuje to zaglavlje i odgovara s Access-Control-Allow-Origin. Ako je domena dopuštena, preglednik izvršava zahtjev.

CORS proces

Preglednik traži resurs s druge domene.

Dodaje Origin zaglavlje u zahtjev.

Server procjenjuje izvor zahtjeva.

Server odgovara s Access-Control-Allow-Origin.

Preglednik odlučuje hoće li izvršiti zahtjev ili ga blokirati.

Razumijevanje CORS-a je ključno za developere. Pogrešno konfiguriran CORS može otvoriti sigurnosne rupe, zato je važno znati kako funkcionira i kako ga pravilno postaviti.

Procesi dopuštanja

U CORS-u, server odlučuje tko smije pristupiti resursima putem Access-Control-Allow-Origin. Dopuštanje pristupa svim domenama s * je nesigurno i preporučuje se samo za javne podatke. Za osjetljive podatke, dozvolite samo odabrane domene.

Greške i rješenja

CORS greške nastaju najčešće zbog loše konfiguracije servera, npr. kad Access-Control-Allow-Origin nedostaje ili je pogrešno postavljen. Tada preglednik blokira zahtjev. Za rješenje, provjerite CORS zaglavlja i obavezno pravilno obradite OPTIONS (preflight) zahtjeve.

Razumijevanje i otklanjanje CORS grešaka

CORS greške su svakodnevica za web developere – nastaju kad web stranica želi dohvatiti resurs s domene, protokola ili porta koji nije dopušten. Preglednik iz sigurnosnih razloga blokira zahtjev. Razumijevanje i otklanjanje tih grešaka ključ je stabilnih aplikacija.

Prvi korak je dijagnostika – pogledajte poruke u Developer Tools konzoli preglednika. Poruke često daju trag, npr. „No ‘Access-Control-Allow-Origin’ header is present on the requested resource” znači da server nije poslao potrebno zaglavlje.

Šifra greške	Objašnjenje	Moguća rješenja
403 Forbidden	Server je odbio zahtjev.	Provjerite CORS konfiguraciju, dozvolite ispravne izvore.
500 Internal Server Error	Neplanirana greška na serveru.	Provjerite logove, moguće je da je CORS pogrešno konfiguriran.
CORS greška (Konzola preglednika)	Preglednik je blokirao zahtjev zbog CORS pravila.	Postavite ‘Access-Control-Allow-Origin’ zaglavlje na serveru.
ERR_CORS_REQUEST_NOT_HTTP	Zahtjev nije poslan putem HTTP/HTTPS protokola.	Provjerite protokol zahtjeva.

Najčešće rješenje je dodati potrebna CORS zaglavlja na server. ‘Access-Control-Allow-Origin’ definira tko smije pristupiti – * dopušta svima, ali je nesigurno; bolje je navesti točno domene, npr. Access-Control-Allow-Origin: https://mojadomena.hr.

Ostali česti CORS problemi:

Vrste grešaka

Nedostaju ili su pogrešno postavljena CORS zaglavlja: Server ne šalje ispravna zaglavlja.

Problemi s preflight zahtjevima: OPTIONS zahtjevi nisu ispravno obrađeni.

Smetnje s credentials: Cookies ili auth zaglavlja nisu podržani.

Problemi kod preusmjeravanja: Redirectovi ne poštuju CORS pravila.

Proxy greške: Proxy serveri ne prosljeđuju CORS zaglavlja.

Obavezna HTTPS veza: Zahtjevi moraju biti preko HTTPS-a zbog sigurnosti.

Ponekad možete koristiti proxy servere ili JSONP za zaobilaženje CORS-a, ali to nosi sigurnosne rizike. Najbolje je CORS konfiguraciju rješavati na serveru.

Najbolje prakse za CORS

Ispravno postavljen CORS ključan je za sigurnost i funkcionalnost web aplikacija. Loša konfiguracija može otvoriti vrata napadima i neautoriziranom pristupu. Pratite najbolje prakse!

Praksa	Objašnjenje	Važnost
Ograničite dopuštene domene	U `Access-Control-Allow-Origin` navodite samo pouzdane domene; izbjegavajte `*`.	Povećava sigurnost, sprječava neautoriziran pristup.
Koristite credentials kad je potrebno	Za autentifikaciju koristite `Access-Control-Allow-Credentials: true`.	Omogućuje pristup resursima koji zahtijevaju autentifikaciju.
Ispravno obrađujte preflight zahtjeve	Obavezno odgovorite na `OPTIONS` zahtjeve s `Access-Control-Allow-Methods` i `Access-Control-Allow-Headers`.	Omogućuje sigurnu razmjenu složenih podataka.
Pažljivo prikazujte greške	Korisniku prikazujte jasne poruke, ali izbjegavajte izlaganje sigurnosnih detalja.	Poboljšava iskustvo i smanjuje rizik od napada.

Izbjegavajte * u Access-Control-Allow-Origin – to dopušta pristup svima, što može rezultirati krađom podataka. Umjesto toga, navedite samo domene kojima stvarno vjerujete.

Koraci implementacije

Odredite koje domene trebaju pristup vašim resursima.

Konfigurirajte Access-Control-Allow-Origin samo za te domene.

Postavite Access-Control-Allow-Credentials ako trebate autentifikaciju.

Odgovarajte na OPTIONS preflight zahtjeve.

Implementirajte jasne poruke za CORS greške.

Redovito testirajte i nadgledajte CORS konfiguraciju.

Ispravno obrađujte preflight zahtjeve – preglednik šalje OPTIONS prije složenih zahtjeva (npr. PUT, DELETE). Server mora odgovoriti s Access-Control-Allow-Methods i Access-Control-Allow-Headers. Tako preglednik zna je li zahtjev dopušten.

Testirajte CORS postavke u raznim scenarijima i pratite logove. Sigurnost web aplikacije je kontinuirani proces – redovito unapređujte konfiguraciju. Pridržavanjem ovih praksi, značajno podižete sigurnost svojih aplikacija.

Na što paziti kod CORS-a

Kod korištenja CORS-a, ključno je osigurati sigurnost i pravilnu funkcionalnost aplikacije. Loša konfiguracija može omogućiti neautoriziran pristup ili napade. Politike treba pažljivo postaviti i stalno ih nadgledati.

Greške u CORS-u mogu omogućiti da osjetljivi podaci budu dostupni svima ili da zlonamjerni korisnici manipuliraju aplikacijom. Primjerice, pogrešno postavljen Access-Control-Allow-Origin može dopustiti pristup svim domenama, što je izuzetno nesigurno. U tablici su navedeni česti problemi i posljedice:

Greška	Objašnjenje	Posljedica
*`Access-Control-Allow-Origin: `**	Dopušta pristup sa svih domena.	Sigurnosna rupa, zlonamjerni pristup podacima.
Kombinacija `Access-Control-Allow-Credentials: true` i *`Access-Control-Allow-Origin: `**	Dopušta slanje credentials sa svih domena (preglednici to blokiraju).	Nepravilna autentifikacija i neočekivano ponašanje.
Dozvoljene nepravilne HTTP metode	Treba dozvoliti samo potrebne metode (GET, POST), ne sve.	Mogućnost napada, manipulacije podacima.
Dozvoljeni nepotrebni headeri	Dozvolite samo nužne zaglavlja.	Sigurnosni rizici, nepotrebni prijenos podataka.

Još jedna važna stvar je ispravno postavljanje preflight (OPTIONS) zahtjeva. Ako server ne odgovori ispravno, glavni zahtjev neće proći. Obavezno provjerite kako vaša aplikacija obrađuje OPTIONS zahtjeve.

Na što treba paziti:

Konfigurirajte Access-Control-Allow-Origin samo za pouzdane domene.
Koristite Access-Control-Allow-Credentials samo kad je nužno.
Ispravno postavite preflight mehanizam – odgovorite na OPTIONS.
Dozvolite samo potrebne HTTP metode i zaglavlja.
Redovito provjeravajte i ažurirajte CORS konfiguraciju.
Koristite developer alate za dijagnostiku CORS grešaka.

Za dijagnostiku koristite konzolu preglednika (Developer Tools) – prikazuje CORS greške i pomaže u lociranju problema. Na serveru pratite logove – tako ćete znati primjenjuju li se pravila ispravno. Pravilno postavljen CORS ključan je za sigurnost i iskustvo korisnika.

Česta pitanja

Zašto je CORS važan i kako utječe na razvoj web aplikacija?

CORS povećava sigurnost i štiti podatke od zlonamjernih izvora. Omogućuje sigurno dijeljenje resursa među domenama i doprinosi stabilnosti aplikacije. Razumijevanje CORS-a pomaže developerima da izbjegnu sigurnosne rupe i grade pouzdane aplikacije.

Kako preglednici provode CORS pravila i koja HTTP zaglavlja se koriste?

Preglednici automatski dodaju Origin zaglavlje prilikom cross-origin zahtjeva. Server odgovara s Access-Control-Allow-Origin. Preglednik uspoređuje zaglavlja i odlučuje je li zahtjev siguran. Dodatno, koristi se Access-Control-Allow-Methods, Access-Control-Allow-Headers i Access-Control-Allow-Credentials za definiranje metoda, headera i credentialsa.

Koji su najčešći uzroci CORS grešaka i kako ih otkriti?

Najčešći uzroci su loša konfiguracija Access-Control-Allow-Origin, zahtjevi s drugih portova ili protokola, problemi s preflight zahtjevima i credentialsima. U konzoli preglednika (Developer Tools) pronaći ćete detaljne poruke greške. U Network tab-u analizirajte HTTP zaglavlja servera.

Što je 'preflight request' i kada se šalje?

Preflight request je OPTIONS zahtjev koji preglednik šalje prije glavnog zahtjeva, kako bi provjerio dozvoljene metode i zaglavlja. Najčešće se šalje kod PUT, DELETE i custom headera.

Može li se CORS isključiti ili zaobići i koji su rizici?

CORS provodi sigurnosnu kontrolu na strani preglednika. Na serveru određujete tko može pristupiti. Isključivanje CORS-a je rizično, jer otvara aplikaciju napadima. U razvoju možete privremeno zaobići CORS (ekstenzijama ili proxyjem), ali nikada u produkciji.

Koje su najčešće sigurnosne rupe kod CORS-a i kako ih spriječiti?

Najveći rizik je postavljanje Access-Control-Allow-Origin: * (dopušta svima) i kombiniranje s credentialsima. Spriječite to ograničavanjem domene, pažljivom upotrebom credentialsa i dodatnom zaštitom (npr. CSRF).

Koje server strategije postoje za CORS konfiguraciju i kako odabrati najbolju?

Možete ručno postaviti HTTP zaglavlja, koristiti CORS middleware ili konfigurirati web server (Apache, Nginx). Izbor ovisi o tehnologiji i potrebama aplikacije. Middleware je fleksibilan za napredne aplikacije; za jednostavne projekte dovoljan je ručni pristup.

Kako upravljati CORS postavkama u razvoju, testiranju i produkciji?

Koristite konfiguracijske datoteke ili varijable okruženja. U razvoju možete postaviti labavije pravila (Access-Control-Allow-Origin: *), ali u produkciji uvijek ograničite domene. Test okruženje treba imitirati produkciju. Odvojite konfiguraciju za svako okruženje radi sigurnosti.