Ovaj blog vodič detaljno obrađuje Cross-Origin Resource Sharing (CORS), ključni segment sigurnosti modernih web aplikacija. Objašnjava što je CORS, zašto je nužan za web projekte, kako se razvijao, koje su njegove prednosti i kako ga pravilno konfigurirati. Donosi tehničke detalje, analizira najčešće CORS greške i rješenja, predlaže strategije za jačanje sigurnosti kroz CORS politike i primjere implementacije. Razjašnjava česte zablude oko CORS-a te sažima najvažnije stvari koje svaki web developer treba znati. Sve je prilagođeno hrvatskim IT stručnjacima i developerima koji žele graditi sigurne, moderne i skalabilne web aplikacije.
Što je CORS i zašto je važan za web aplikacije
Cross-Origin Resource Sharing (CORS) je sigurnosni mehanizam koji preglednicima omogućuje da web stranica pristupa resursima s drugog domena – ili ju u tome sprječava. CORS daje aplikacijama preciznu kontrolu nad pristupom podacima s vanjskih izvora (API-jevi, fontovi, slike itd.). Danas je temelj web sigurnosti, jer sprječava krađu i manipulaciju korisničkim podacima putem JavaScripta s neovlaštenih stranica.
CORS je izuzetno važan za moderne pristupe razvoju – primjerice, single page aplikacije (SPA) i mikroservisi često ovise o API-jevima s različitih domena. CORS omogućuje sigurno dijeljenje tih resursa i blokira pokušaje krađe podataka od strane zlonamjernih stranica. Bez CORS-a, svaki web sajt mogao bi dohvatiti podatke vaših korisnika s drugih stranica i zloupotrijebiti ih.
- Prednosti CORS-a
- Omogućuje siguran prijenos podataka između domena.
- Štiti korisničke podatke od pristupa zlonamjernih stranica.
- Podiže razinu sigurnosti API-jeva i web servisa.
- Podupire moderne razvojne paradigme (SPA, mikroservisi) bez kompromisa sigurnosti.
- Minimizira probleme kompatibilnosti među preglednicima.
- Developerima daje detaljnu kontrolu nad pristupom resursima po domenama.
CORS radi u tandemu s politikom istog izvora (Same-Origin Policy – SOP). SOP dopušta pristup samo resursima s iste domene, protokola i porta. CORS tu politiku ublažava – dopušta pristup s drugih domena, ali pod strogo definiranim uvjetima. Time aplikacije postaju fleksibilnije i funkcionalnije, a sigurnost ostaje na visokoj razini.
Ispravna konfiguracija CORS-a je kritična za sigurnost web aplikacija. Pogrešna postavka otvara vrata brojnim sigurnosnim propustima. Svaki web developer treba razumjeti kako CORS radi i kako ga pravilno konfigurirati.
Povijest i razvoj CORS-a
Cross-Origin Resource Sharing (CORS) danas je neizostavan dio web developmenta, no njegova evolucija pomaže nam shvatiti zašto je toliko bitan. Prvi preglednici primjenjivali su strogu politiku istog izvora (Same-Origin Policy), što je značilo da web stranica može dohvatiti samo resurse s vlastite domene. To je ozbiljno ograničavalo razvoj dinamičnih aplikacija koje trebaju podatke s više domena.
CORS je nastao kao odgovor na praktične izazove developera: potreba za povezivanjem s raznim API-jevima i servisima. World Wide Web Consortium (W3C) je standardizirao postupke i definiralo kako preglednici i serveri komuniciraju oko CORS-a – uz stalni balans fleksibilnosti i sigurnosti.
| Godina | Ključna promjena | Opis |
|---|---|---|
| Početak 2000-ih | Prvi zahtjevi | Developeri uočavaju potrebu za dohvaćanjem podataka s drugih domena. |
| 2004 | Privremena rješenja | Popularizacija JSONP-a, koji ima ozbiljne sigurnosne nedostatke. |
| 2009 | W3C standardizacija | W3C započinje izradu CORS standarda. |
| 2010+ | Masovna primjena | CORS postaje standard i podržan je u svim modernim preglednicima. |
Od prvih, jednostavnih implementacija CORS-a do uvođenja naprednih mehanizama poput "preflight requesta" (prethodne provjere), tehnologija je stalno dobivala nove sigurnosne slojeve. Preflight request omogućuje serveru da provjeri je li zahtjev s drugog izvora siguran, prije nego što dopusti pristup. Zahvaljujući ovim poboljšanjima, CORS je danas temelj sigurnog i učinkovitog razvoja web aplikacija.
Razvoj CORS-a kroz faze:
- Strogi SOP – ograničenja pristupa resursima.
- JSONP i slične privremene metode (uz rizike).
- Standardizacija od strane W3C-a.
- Uvođenje preflight provjera (OPTIONS zahtjevi).
- Raširena podrška u preglednicima.
CORS je danas neizbježan u sigurnom razvoju weba, ali pravilna konfiguracija ostaje presudna. Kriva postavka može omogućiti napadačima pristup osjetljivim podacima. Zato svaki developer mora znati osnovne principe i najbolje prakse oko CORS-a.
Zašto koristiti CORS? Ključne prednosti
Cross-Origin Resource Sharing (CORS) je nezamjenjiv alat za sigurnost i funkcionalnost web aplikacija. Omogućuje sigurne zahtjeve između domena te developerima daje fleksibilnost za integraciju raznih servisa i API-jeva.
CORS prevladava ograničenja koja nameće politika istog izvora (Same-Origin Policy). SOP dopušta pristup samo resursima s istog protokola, porta i domene. CORS omogućuje serverima da precizno odrede tko smije pristupiti – što je temelj za sigurnu i modularnu arhitekturu.
Ključne prednosti CORS-a:
- Siguran pristup API-jevima na raznim domenama.
- Omogućuje modularni i skalabilni razvoj aplikacija.
- Developerima daje veću fleksibilnost i kontrolu.
- Bolja integracija, bogatije korisničko iskustvo.
- Smanjuje rizik od sigurnosnih propusta u web aplikacijama.
Pregled glavnih značajki CORS-a:
| Značajka | Opis | Prednost |
|---|---|---|
| Zahtjevi između domena | HTTP zahtjevi s različitih domena. | Omogućuje dijeljenje podataka i povezivanje servisa. |
| Preflight provjere | OPTIONS metoda provjerava CORS politiku servera. | Sprječava sigurnosne propuste i omogućuje siguran prijenos podataka. |
| Dozvoljeni izvori | Server precizno određuje koji izvori smiju pristupiti. | Omogućuje kontroliran i siguran pristup. |
| Podrška za autentifikaciju | Podaci poput kolačića i autorizacijskih zaglavlja. | Podržava personalizaciju i korisničke sesije. |
Ispravna konfiguracija CORS-a je ključna za sigurnost. Pogrešna postavka može omogućiti napadačima pristup osjetljivim podacima ili pokretanje malicioznog koda. Stoga, CORS treba pažljivo planirati i redovito provjeravati.
Kako konfigurirati CORS? Jednostavne smjernice
Konfiguracija CORS-a je ključna za sigurnost aplikacija i uredan prijenos podataka među domenama. Pravilno postavljena CORS politika omogućuje pristup samo pouzdanim izvorima i sprječava zloupotrebu.
Prije početka konfiguracije, analizirajte potrebe aplikacije: na koje resurse treba pristupiti, koji izvori su pouzdani, koji HTTP metode (GET, POST, PUT, DELETE itd.) su potrebni. Ova analiza olakšava kasnije korake.
- Smjernice za konfiguraciju CORS-a
- Analizirajte koje resurse vaša aplikacija treba.
- Na serveru postavite odgovarajuće HTTP zaglavlja.
- Precizno odredite dopuštene izvore (Origin header).
- Definirajte dopuštene HTTP metode.
- Postavite postavke kolačića i autentifikacije.
- Pravilno upravljajte CORS greškama.
Ključna CORS zaglavlja na serveru:
| Zaglavlje | Opis | Primjer vrijednosti |
|---|---|---|
| Access-Control-Allow-Origin | Dopušteni izvori | https://example.com |
| Access-Control-Allow-Methods | Dopuštene HTTP metode | GET, POST, PUT |
| Access-Control-Allow-Headers | Dopuštena custom zaglavlja | Content-Type, Authorization |
| Access-Control-Allow-Credentials | Dopušta prijenos kolačića | true |
Upravljanje CORS greškama je važno. Većina grešaka nastaje zbog nepravilne konfiguracije zaglavlja – provjerite ih na serveru i ispravljajte prema potrebi. Redovito ažurirajte CORS politiku kako bi ostala sigurna i relevantna.
Tehnički detalji CORS-a
CORS omogućuje web stranicama da dohvaćaju resurse s domena, protokola ili portova različitih od vlastitih. Svaki zahtjev koji "preskače" ove granice zahtijeva CORS.
Izvor (origin) je kombinacija protokola (http/https), domene (example.com) i porta (80/443). Ako se bilo što od toga razlikuje, zahtjev je cross-origin i CORS je potreban.
| Scenarij | Izvor zahtjeva | Meta izvor | Treba CORS? |
|---|---|---|---|
| Ista domena | http://example.com | http://example.com/api | Ne |
| Drugi port | http://example.com:8080 | http://example.com:3000/api | Da |
| Drugi protokol | http://example.com | https://example.com/api | Da |
| Druga domena | http://example.com | http://api.example.com/api | Da |
CORS se upravlja HTTP zaglavljima. Najvažnije je Access-Control-Allow-Origin, koje određuje tko smije pristupiti. Vrijednost može biti jedna domena, više njih ili * (sve) – ali * treba izbjegavati zbog sigurnosti.
- Tehničke značajke CORS-a
- Access-Control-Allow-Origin: Dozvoljeni izvori.
- Access-Control-Allow-Methods: Dozvoljene HTTP metode.
- Access-Control-Allow-Headers: Custom zaglavlja.
- Access-Control-Expose-Headers: Zaglavlja dostupna klijentu.
- Access-Control-Allow-Credentials: Dopušta prijenos kolačića i autentifikacije.
CORS razlikuje "simple requests" (obični zahtjevi, npr. GET, POST bez custom headera) od "preflight requests" (OPTIONS provjera prije složenih zahtjeva). Preflight provjera pita server je li dozvoljeno – server odgovara s odgovarajućim zaglavljima.
CORS i sigurnost
CORS je dizajniran za jačanje sigurnosti, ali pogrešna konfiguracija može biti opasna. Primjerice, Access-Control-Allow-Origin: * dopušta pristup svima – to je rizik! Dopuštajte samo pouzdane izvore.
Još jedan rizik: Access-Control-Allow-Credentials: true dopušta prijenos kolačića i autentifikacije. Ako se kombinira s * u originu, napadači lakše zloupotrebljavaju podatke. Budite precizni u dozvolama.
CORS i performanse
CORS može utjecati na brzinu aplikacije. Preflight zahtjevi šalju dodatni OPTIONS request, što kod učestalih cross-origin zahtjeva usporava rad. Optimizirajte tako da koristite "simple requests" kad god je moguće, te implementirajte caching na serveru.
CORS konfiguraciju testirajte i nadgledajte uz developer alate (browser, ekstenzije, online CORS testere). Redovito provjeravajte zaglavlja i prilagodite ih sigurnosnim zahtjevima.
Najčešće CORS greške i rješenja
CORS greške su svakodnevica hrvatskih developera. Nastaju kada web stranica pokušava pristupiti resursima s druge domene, a server nije pravilno postavio CORS zaglavlja. Preglednici po defaultu blokiraju takve zahtjeve radi zaštite korisnika.
| Greška | Opis | Rješenje |
|---|---|---|
| No 'Access-Control-Allow-Origin' header is present on the requested resource. | Server nije poslao CORS zaglavlje za dopuštenje pristupa. | Dodajte odgovarajuće CORS zaglavlje na serveru. |
| The 'Access-Control-Allow-Origin' header contains the invalid value 'null'. | CORS zaglavlje s pogrešnom vrijednosti ("null"). | Postavite ispravnu domenu ili * (s oprezom). |
| Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource. | SOP sprječava pristup resursima s drugih domena. | Provjerite CORS konfiguraciju i dodajte dozvolu za domenu. |
| CORS preflight channel did not succeed. | Preflight OPTIONS zahtjev nije uspio. | Dodajte odgovarajuća CORS zaglavlja za OPTIONS request. |
Većina CORS grešaka rješava se na serveru, dodavanjem ili ispravljanjem zaglavlja. Neki problemi mogu se zaobići korištenjem proxy servera ili, u rijetkim slučajevima, JSONP-a (ali to je manje sigurno i koristi se samo za GET zahtjeve).
- Rješenja za CORS greške
- Pravilno postavite
Access-Control-Allow-Origin. - Odgovarajte na preflight (OPTIONS) zahtjeve.
- Po potrebi koristite proxy server za preusmjeravanje zahtjeva.
- Za GET zahtjeve, moguće je koristiti JSONP – ali uz oprez!
- Detaljno analizirajte greške u browser konzoli.
- Koristite ekstenzije i online alate za dijagnostiku.
CORS je sigurnosni mehanizam, ali pogrešno postavljen može biti otvoren za napade. * dozvola omogućuje pristup svima – izbjegavajte je kod osjetljivih podataka. Pravilno konfigurirajte i redovito pratite CORS zaglavlja!
Strategije za jaču sigurnost CORS-a
CORS je temelj sigurnosti web aplikacija, ali samo ako je dobro konfiguriran. Pogrešna postavka dopušta neovlašten pristup i ugrožava podatke. Evo kako dodatno osigurati CORS:
Prvo pravilo – precizno definirajte dopuštene izvore. Izbjegavajte * – umjesto toga, navedite konkretne domene koje smiju pristupati.
- Strategije za siguran CORS
- Precizno odredite dopuštene izvore (origin).
- Preflight (OPTIONS) zahtjeve pažljivo obrađujte.
- Pravilno postavite
Access-Control-Allow-Headers. - Pojačajte autentifikaciju i zaštitu kolačića.
- Uvedite nadzor i automatsko otkrivanje CORS grešaka.
- Redovito testirajte i ažurirajte CORS postavke.
| Zaglavlje | Opis | Primjer vrijednosti |
|---|---|---|
| Access-Control-Allow-Origin | Dopušteni izvori | https://example.com |
| Access-Control-Allow-Methods | Dopuštene metode | GET, POST, PUT, DELETE |
| Access-Control-Allow-Headers | Dopuštena custom zaglavlja | Content-Type, Authorization |
| Access-Control-Allow-Credentials | Dopušta prijenos kolačića i autentifikacije | true |
Redovito provjeravajte CORS politiku – nove prijetnje i ranjivosti se pojavljuju, pa je važno ažurirati postavke. Također, testirajte sve vanjske biblioteke i servise koje koristite – njihova CORS politika može utjecati na sigurnost vaše aplikacije.
Politike i primjeri implementacije CORS-a
CORS politike definiraju tko smije pristupiti resursima s vaše domene. Osnovna pravila postavljaju se HTTP zaglavljima na serveru; preglednik ih provjerava i blokira zahtjev ako izvor nije dozvoljen.
| Zaglavlje | Opis | Primjer |
|---|---|---|
| Access-Control-Allow-Origin | Dopušteni izvori | https://example.com |
| Access-Control-Allow-Methods | Dopuštene metode | GET, POST, PUT |
| Access-Control-Allow-Headers | Dopuštena custom zaglavlja | X-Custom-Header, Content-Type |
| Access-Control-Allow-Credentials | Dopušta prijenos kolačića | true |
Pogrešna konfiguracija (npr. Access-Control-Allow-Origin: *) može biti pogubna za sigurnost. Dopuštajte pristup samo pouzdanim domenama!
CORS na različitim preglednicima
Većina modernih preglednika podržava CORS standard, ali postoje sitne razlike u implementaciji. Preglednici analiziraju serverova zaglavlja i blokiraju zahtjev ako izvor nije dozvoljen. Greška je jasno vidljiva u JavaScript konzoli.
Praktični primjeri implementacije:
- Na serveru postavite CORS zaglavlja – precizno odredite dopuštene izvore.
- Odgovarajte na preflight (OPTIONS) zahtjeve – time dozvoljavate složene cross-origin zahtjeve.
- Kontrolirajte prijenos kolačića –
Access-Control-Allow-Credentials. - Koristite developer alate za debugging – browser, ekstenzije.
- Testirajte sigurnost CORS-a – redovno provodite sigurnosne provjere.
- Primijenite najbolje prakse – pratite preporuke stručnjaka.
CORS je temelj za sigurnost i funkcionalnost web aplikacija – ali samo ako je ispravno konfiguriran!
CORS je neizostavan za sigurnost i integraciju u modernim web aplikacijama. Dobro postavljena politika sprječava neovlašten pristup i štiti korisničke podatke.
Najčešće zablude oko CORS-a
CORS je često pogrešno shvaćen među developerima. Zablude mogu dovesti do nepotrebnih strahova ili pogrešnih konfiguracija. Ključno je razumjeti što CORS radi – a što ne.
Mnogi misle da je CORS "firewall" – ali nije. CORS je browser-side mehanizam koji omogućuje serveru da precizno odredi dozvoljene izvore. CORS ne sprječava sve vrste napada, već ograničava pristup resursima s neovlaštenih domena.
- Zablude i istine o CORS-u
- Zabluda: CORS štiti od svih cross-origin napada.
Istina: CORS ograničava pristup resursima u pregledniku – nije univerzalni security layer. - Zabluda: Isključivanje CORS-a čini aplikaciju sigurnijom.
Istina: Isključivanje CORS-a otvara vrata XSS napadima. - Zabluda: CORS se odnosi samo na GET zahtjeve.
Istina: Primjenjuje se i na POST, PUT, DELETE i druge metode. - Zabluda: CORS greške su uvijek server-side problem.
Istina: Greške mogu biti i na klijent strani (neispravne konfiguracije). - Zabluda: CORS ne utječe na zahtjeve unutar iste domene.
Istina: Utječe kad je razlika u protokolu, portu ili domeni.
Pogledajte najčešće scenarije i ispravne konfiguracije:
| Scenarij | Opis | Potrebno zaglavlje |
|---|---|---|
| Jednostavni zahtjev (GET, HEAD) | Cross-origin GET ili HEAD. | Access-Control-Allow-Origin: * ili specificirajte domenu. |
| Preflight zahtjev (OPTIONS) | Složenije metode (PUT, DELETE) i custom zaglavlja. | Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers |
| Zahtjev s autentifikacijom | Kolačići ili autorizacija. | Access-Control-Allow-Origin (precizno), Access-Control-Allow-Credentials: true |
| Dopuštanje svih izvora | Pristup s bilo koje domene. | Access-Control-Allow-Origin: * (oprez – sigurnosni rizik!) |
Razumijevanje CORS-a je ključno za sigurnost i funkcionalnost vaše aplikacije. CORS je dodatni zaštitni sloj, ali nije jedina sigurnosna mjera – kombinirajte ga s ostalim tehnikama!
Najvažnije stvari o CORS-u
CORS je mehanizam koji kontrolira pristup resursima s drugih domena – ključno za sigurnost i fleksibilnost modernih web aplikacija. Preglednici po defaultu primjenjuju politiku istog izvora (Same-Origin Policy), a CORS omogućuje sigurno proširenje tih pravila.
Server određuje koje domene smiju pristupiti resursima putem HTTP zaglavlja, primjerice Access-Control-Allow-Origin. Ako je zaglavlje precizno postavljeno (ili je korišten *), preglednik dopušta pristup. No, * je rizik za osjetljive podatke!
| Zaglavlje | Opis | Primjer |
|---|---|---|
| Access-Control-Allow-Origin | Dopušta pristup odabranim domenama | https://example.com, * |
| Access-Control-Allow-Methods | Dopuštene metode | GET, POST, PUT |
| Access-Control-Allow-Headers | Dopuštena zaglavlja | Content-Type, Authorization |
| Access-Control-Expose-Headers | Zaglavlja vidljiva klijentu | X-Custom-Header |
CORS greške su česte – razlog je obično krivo zaglavlje na serveru. Grešku ćete vidjeti u browser konzoli; rješavajte je prilagođavanjem zaglavlja.
- Ključne smjernice za CORS
- Precizno postavite
Access-Control-Allow-Origin. - Izbjegavajte
*kod osjetljivih podataka. - Definirajte dopuštene metode (
Access-Control-Allow-Methods). - Postavite dopuštena custom zaglavlja (
Access-Control-Allow-Headers). - Obradite preflight zahtjeve (OPTIONS) ispravno.
- Proučite greške u konzoli – uvijek sadrže korisne informacije.
- Po potrebi koristite proxy server za zaobilaženje problema.
CORS je i sigurnosni alat i način za povećanje funkcionalnosti aplikacije. Omogućuje bogatije korisničko iskustvo, ali samo uz pravilnu konfiguraciju i redovita sigurnosna testiranja.
Česta pitanja
Zašto je CORS ključan za sigurnost web aplikacija?
CORS kontrolira tko može dohvatiti podatke s drugih domena, čime sprječava krađu i zloupotrebu korisničkih podataka. Praktički, djeluje kao sigurnosni filter između web aplikacije i vanjskih izvora.
Kako je CORS nastao i koji problem je rješavao?
CORS je nastao kao odgovor na rastuću potrebu za sigurno dohvaćanje podataka s API-jeva i drugih servisa na raznim domenama. Same-Origin Policy je bila previše ograničavajuća, pa je W3C razvio standard koji je prihvaćen u svim preglednicima.
Koje su alternative CORS-u i što ih razlikuje?
Alternativa je JSONP, ali podržava samo GET zahtjeve i nije sigurna. CORS podržava sve HTTP metode i omogućuje detaljnije konfiguracije na serveru – sigurnije je i fleksibilnije.
Kako pravilno postaviti CORS, a na što treba paziti?
Ključno je precizno definirati Access-Control-Allow-Origin – nikad ne koristiti * osim ako nije nužno. Dopuštajte pristup samo pouzdanim domenama.
Što je preflight zahtjev i zašto je važan?
Preflight (OPTIONS) je prethodna provjera koju preglednik šalje serveru prije stvarnog zahtjeva –