M

MLOG

Hrvatski

Otkrijte tajne CORS-a (Cross-Origin Resource Sharing) i naučite kako sigurno omogućiti zahtjeve s različitih domena u vašim web aplikacijama. Ovaj sveobuhvatni vodič pokriva sve od osnova do naprednih konfiguracija, osiguravajući besprijekornu i sigurnu komunikaciju između različitih izvora.

Demistificiranje CORS-a: Sveobuhvatan vodič za dijeljenje resursa s različitih izvora

U današnjem povezanom webu, aplikacije često trebaju pristupiti resursima s različitih izvora. Tu na scenu stupa dijeljenje resursa s različitih izvora (Cross-Origin Resource Sharing - CORS). CORS je ključni sigurnosni mehanizam koji upravlja načinom na koji web preglednici obrađuju zahtjeve s jednog izvora (domena, protokol i port) prema drugom izvoru. Razumijevanje CORS-a je neophodno za svakog web programera kako bi gradio sigurne i funkcionalne web aplikacije.

Što je pravilo istog izvora (Same-Origin Policy)?

Prije nego što zaronimo u CORS, važno je razumjeti pravilo istog izvora (Same-Origin Policy - SOP). SOP je temeljni sigurnosni mehanizam implementiran u web preglednicima. Njegova je svrha spriječiti zlonamjerne skripte na jednoj web stranici da pristupe osjetljivim podacima na drugoj web stranici. Izvor je definiran kombinacijom protokola (npr. HTTP ili HTTPS), domene (npr. example.com) i broja porta (npr. 80 ili 443). Smatra se da dva URL-a imaju isti izvor ako dijele isti protokol, domenu i port.

Primjer:

SOP ograničava skripte da pristupaju resursima s različitog izvora, osim ako su na snazi posebne mjere, poput CORS-a, koje to dopuštaju.

Zašto je CORS neophodan?

Iako je pravilo istog izvora ključno za sigurnost, može biti i restriktivno. Mnoge moderne web aplikacije ovise o dohvaćanju podataka s različitih poslužitelja, kao što su API-ji ili mreže za isporuku sadržaja (CDN). CORS pruža kontrolirani način za ublažavanje SOP-a i dopuštanje legitimnih zahtjeva s različitih izvora uz održavanje sigurnosti.

Razmotrimo scenarij u kojem web aplikacija smještena na http://example.com treba dohvatiti podatke s API poslužitelja smještenog na http://api.example.net. Bez CORS-a, preglednik bi blokirao ovaj zahtjev zbog SOP-a. CORS omogućuje API poslužitelju da eksplicitno odredi kojim je izvorima dopušten pristup njegovim resursima, omogućujući tako ispravno funkcioniranje web aplikacije.

Kako CORS funkcionira: Osnove

CORS funkcionira putem niza HTTP zaglavlja koja se razmjenjuju između klijenta (preglednika) i poslužitelja. Poslužitelj koristi ta zaglavlja kako bi obavijestio preglednik je li dopušten pristup traženom resursu. Ključno uključeno HTTP zaglavlje je Access-Control-Allow-Origin.

Scenarij 1: Jednostavan zahtjev

"Jednostavan zahtjev" je GET, HEAD ili POST zahtjev koji zadovoljava određene kriterije (npr. Content-Type zaglavlje je jedno od application/x-www-form-urlencoded, multipart/form-data ili text/plain). U tom slučaju, preglednik šalje zahtjev izravno poslužitelju, a poslužitelj odgovara s Access-Control-Allow-Origin zaglavljem.

Zahtjev klijenta (s http://example.com):

GET /data HTTP/1.1
Host: api.example.net
Origin: http://example.com

Odgovor poslužitelja (s http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "data": "Neki podaci s poslužitelja"
}

U ovom primjeru, poslužitelj odgovara s Access-Control-Allow-Origin: http://example.com, što ukazuje da su zahtjevi s http://example.com dopušteni. Ako se izvor u zahtjevu ne podudara s vrijednošću u Access-Control-Allow-Origin zaglavlju (ili ako zaglavlje nije prisutno), preglednik će blokirati odgovor i spriječiti klijentsku skriptu da pristupi podacima.

Scenarij 2: Preflight zahtjev (za složene zahtjeve)

Za složenije zahtjeve, kao što su oni koji koriste HTTP metode poput PUT, DELETE ili oni s prilagođenim zaglavljima, preglednik izvodi "preflight" zahtjev koristeći HTTP metodu OPTIONS. Ovaj preflight zahtjev pita poslužitelj za dopuštenje prije slanja stvarnog zahtjeva. Poslužitelj odgovara sa zaglavljima koja specificiraju koje su metode, zaglavlja i izvori dopušteni.

Preflight zahtjev klijenta (s http://example.com):

OPTIONS /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header

Odgovor poslužitelja (s http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 3600

Objašnjenje zaglavlja:

Ako preflight odgovor poslužitelja ukazuje da je zahtjev dopušten, preglednik nastavlja sa stvarnim zahtjevom. U suprotnom, preglednik blokira zahtjev.

Stvarni zahtjev klijenta (s http://example.com):

PUT /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
X-Custom-Header: some-value
Content-Type: application/json

{
  "data": "Neki podaci za ažuriranje"
}

Odgovor poslužitelja (s http://api.example.net):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "status": "Podaci uspješno ažurirani"
}

Uobičajena CORS zaglavlja

Ovdje je pregled ključnih CORS zaglavlja koja trebate razumjeti:

CORS u različitim poslužiteljskim jezicima

Implementacija CORS-a obično uključuje konfiguriranje vaše poslužiteljske aplikacije za slanje odgovarajućih CORS zaglavlja. Evo primjera kako to učiniti u različitim jezicima i okvirima:

Node.js s Expressom

Možete koristiti cors middleware paket:

const express = require('express');
const cors = require('cors');

const app = express();

// Omogući CORS za sve izvore (KORISTITI S OPREZOM U PRODUKCIJI)
app.use(cors());

// Alternativno, konfigurirajte CORS za specifične izvore
// app.use(cors({
//   origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
  res.json({ message: 'Ovo je CORS-omogućeno za sve izvore!' });
});

app.listen(3000, () => {
  console.log('Poslužitelj radi na portu 3000');
});

Python s Flaskom

Možete koristiti ekstenziju Flask-CORS:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# Alternativno, konfigurirajte CORS za specifične izvore
# CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})

@app.route("/data")
def hello():
    return {"message": "Ovo je CORS-omogućeno za sve izvore!"}

if __name__ == '__main__':
    app.run(debug=True)

Java sa Spring Bootom

Možete konfigurirati CORS u vašoj Spring Boot aplikaciji koristeći anotacije ili konfiguracijske klase:

Korištenje anotacija:

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://example.com") // Dopusti zahtjeve s http://example.com
public class DataController {

    @GetMapping("/data")
    public String getData() {
        return "Ovo je CORS-omogućeno za http://example.com!";
    }
}

Korištenje konfiguracije:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/data")
                .allowedOrigins("http://example.com") // Dopusti zahtjeve s http://example.com
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

PHP

 "Ovo je CORS-omogućeno za http://example.com!");
echo json_encode($data);
?>

CORS i sigurnosna razmatranja

Iako CORS omogućuje zahtjeve s različitih izvora, ključno je implementirati ga sigurno. Evo nekoliko važnih razmatranja:

Rješavanje problema s CORS-om

Problemi s CORS-om mogu biti frustrirajući za otklanjanje. Evo nekih uobičajenih problema i kako ih riješiti:

Alati za otklanjanje pogrešaka:

Napredni CORS scenariji

Iako su osnovni koncepti CORS-a relativno jednostavni, postoje i neki napredniji scenariji koje treba razmotriti:

Najbolje prakse za CORS

Kako biste osigurali sigurnu i učinkovitu implementaciju CORS-a, slijedite ove najbolje prakse:

Zaključak

CORS je ključni sigurnosni mehanizam koji omogućuje kontrolirane zahtjeve s različitih izvora u web aplikacijama. Razumijevanje kako CORS funkcionira i kako ga pravilno konfigurirati ključno je za svakog web programera. Slijedeći smjernice i najbolje prakse navedene u ovom sveobuhvatnom vodiču, možete graditi sigurne i funkcionalne web aplikacije koje besprijekorno komuniciraju s resursima s različitih izvora.

Zapamtite da uvijek dajete prednost sigurnosti i izbjegavate korištenje previše permisivnih CORS konfiguracija. Pažljivim razmatranjem sigurnosnih implikacija vaših CORS postavki, možete zaštititi svoje aplikacije i podatke od neovlaštenog pristupa.

Nadamo se da vam je ovaj vodič pomogao demistificirati CORS. Sretno kodiranje!

Demistificiranje CORS-a: Sveobuhvatan vodič za dijeljenje resursa s različitih izvora | MLOG