M

MLOG

Magyar

Ismerje meg a CORS (Cross-Origin Resource Sharing) működését, és tegye biztonságossá a domainek közötti kéréseket. Útmutatónk az alapoktól a haladó beállításokig segít.

A CORS rejtélyeinek megfejtése: Átfogó útmutató a Cross-Origin Resource Sharinghez

A mai összekapcsolt weben az alkalmazásoknak gyakran kell különböző eredetű erőforrásokhoz hozzáférniük. Itt lép a képbe a Cross-Origin Resource Sharing (CORS). A CORS egy kulcsfontosságú biztonsági mechanizmus, amely szabályozza, hogyan kezelik a webböngészők az egyik eredetből (domain, protokoll és port) egy másik eredetbe irányuló kéréseket. A CORS megértése minden webfejlesztő számára elengedhetetlen a biztonságos és funkcionális webalkalmazások készítéséhez.

Mi az azonos eredetű irányelv (Same-Origin Policy)?

Mielőtt belemerülnénk a CORS-ba, fontos megérteni az azonos eredetű irányelvet (Same-Origin Policy - SOP). Az SOP egy alapvető biztonsági mechanizmus, amelyet a webböngészők implementálnak. Célja, hogy megakadályozza, hogy az egyik webhelyen lévő rosszindulatú szkriptek hozzáférjenek egy másik webhely érzékeny adataihoz. Egy eredetet a protokoll (pl. HTTP vagy HTTPS), a domain (pl. example.com) és a portszám (pl. 80 vagy 443) kombinációja határoz meg. Két URL akkor tekinthető azonos eredetűnek, ha ugyanazt a protokollt, domaint és portot használják.

Példa:

Az SOP korlátozza a szkriptek hozzáférését egy másik eredetű erőforráshoz, hacsak nincsenek érvényben olyan specifikus intézkedések, mint a CORS, amelyek ezt lehetővé teszik.

Miért szükséges a CORS?

Bár az azonos eredetű irányelv létfontosságú a biztonság szempontjából, korlátozó is lehet. Sok modern webalkalmazás különböző szerverekről, például API-król vagy tartalomkézbesítő hálózatokról (CDN) történő adatlekérésre támaszkodik. A CORS szabályozott módon teszi lehetővé az SOP enyhítését és a jogos, eltérő eredetű kérések engedélyezését, miközben fenntartja a biztonságot.

Vegyünk egy olyan forgatókönyvet, ahol egy http://example.com címen hosztolt webalkalmazásnak egy http://api.example.net címen hosztolt API-szerverről kell adatokat lekérnie. CORS nélkül a böngésző az SOP miatt letiltaná ezt a kérést. A CORS lehetővé teszi az API-szerver számára, hogy explicit módon meghatározza, mely eredetek férhetnek hozzá az erőforrásaihoz, így a webalkalmazás megfelelően működhet.

Hogyan működik a CORS: Az alapok

A CORS a kliens (böngésző) és a szerver között cserélt HTTP fejlécek sorozatán keresztül működik. A szerver ezeket a fejléceket használja arra, hogy tájékoztassa a böngészőt, hogy hozzáférhet-e a kért erőforráshoz. A kulcsfontosságú HTTP fejléc az Access-Control-Allow-Origin.

1. forgatókönyv: Egyszerű kérés

Az "egyszerű kérés" egy GET, HEAD vagy POST kérés, amely megfelel bizonyos kritériumoknak (pl. a Content-Type fejléc az alábbiak egyike: application/x-www-form-urlencoded, multipart/form-data vagy text/plain). Ebben az esetben a böngésző közvetlenül elküldi a kérést a szervernek, és a szerver az Access-Control-Allow-Origin fejléccel válaszol.

Kliens kérés (a http://example.com oldalról):

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

Szerver válasz (a http://api.example.net szerverről):

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

{
  "data": "Some data from the server"
}

Ebben a példában a szerver az Access-Control-Allow-Origin: http://example.com fejléccel válaszol, jelezve, hogy a http://example.com oldalról érkező kérések engedélyezettek. Ha a kérésben szereplő eredet nem egyezik meg az Access-Control-Allow-Origin fejléc értékével (vagy ha a fejléc hiányzik), a böngésző letiltja a választ, és megakadályozza, hogy a kliensoldali szkript hozzáférjen az adatokhoz.

2. forgatókönyv: Előzetes kérés (komplex kérésekhez)

Bonyolultabb kérések esetén, mint például a PUT, DELETE HTTP-metódusokat használó vagy egyéni fejlécekkel rendelkező kérések, a böngésző egy "előzetes" (preflight) kérést hajt végre az HTTP OPTIONS metódussal. Ez az előzetes kérés engedélyt kér a szervertől a tényleges kérés elküldése előtt. A szerver olyan fejlécekkel válaszol, amelyek meghatározzák, mely metódusok, fejlécek és eredetek engedélyezettek.

Kliens előzetes kérés (a http://example.com oldalról):

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

Szerver válasz (a http://api.example.net szerverről):

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

Fejlécek magyarázata:

Ha a szerver előzetes válasza azt jelzi, hogy a kérés engedélyezett, a böngésző folytatja a tényleges kéréssel. Ellenkező esetben a böngésző letiltja a kérést.

Kliens tényleges kérés (a http://example.com oldalról):

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

{
  "data": "Some data to be updated"
}

Szerver válasz (a http://api.example.net szerverről):

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

{
  "status": "Data updated successfully"
}

Gyakori CORS fejlécek

Itt található a legfontosabb CORS fejlécek részletezése, amelyeket meg kell értenie:

CORS különböző szerveroldali nyelveken

A CORS implementálása általában azt jelenti, hogy a szerveroldali alkalmazást úgy konfigurálja, hogy a megfelelő CORS fejléceket küldje el. Íme néhány példa arra, hogyan lehet ezt megtenni különböző nyelveken és keretrendszerekben:

Node.js Express-szel

Használhatja a cors middleware csomagot:

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

const app = express();

// CORS engedélyezése minden eredetre (ÉLES KÖRNYEZETBEN ÓVATOSAN HASZNÁLJA)
app.use(cors());

// Alternatívaként, CORS konfigurálása specifikus eredetekre
// app.use(cors({
//   origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Python Flask-kel

Használhatja a Flask-CORS kiterjesztést:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

// Alternatívaként, CORS konfigurálása specifikus eredetekre
// CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})

@app.route("/data")
def hello():
    return {"message": "This is CORS-enabled for all origins!"}

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

Java Spring Boot-tal

A CORS-t a Spring Boot alkalmazásában annotációkkal vagy konfigurációs osztályokkal is beállíthatja:

Annotációk használata:

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") // Kérések engedélyezése a http://example.com oldalról
public class DataController {

    @GetMapping("/data")
    public String getData() {
        return "This is CORS-enabled for http://example.com!";
    }
}

Konfiguráció használata:

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") // Kérések engedélyezése a http://example.com oldalról
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}

PHP

 "This is CORS-enabled for http://example.com!");
echo json_encode($data);
?>

CORS és biztonsági megfontolások

Bár a CORS lehetővé teszi az eltérő eredetű kéréseket, kulcsfontosságú a biztonságos implementálása. Íme néhány fontos szempont:

CORS problémák hibaelhárítása

A CORS problémák hibakeresése frusztráló lehet. Íme néhány gyakori probléma és megoldásuk:

Hibakereső eszközök:

Haladó CORS forgatókönyvek

Bár az alapvető CORS fogalmak viszonylag egyszerűek, van néhány haladóbb forgatókönyv, amit érdemes figyelembe venni:

CORS bevált gyakorlatok

A biztonságos és hatékony CORS implementáció érdekében kövesse az alábbi bevált gyakorlatokat:

Következtetés

A CORS egy kritikus biztonsági mechanizmus, amely lehetővé teszi a szabályozott, eltérő eredetű kéréseket a webalkalmazásokban. A CORS működésének és megfelelő konfigurálásának megértése minden webfejlesztő számára elengedhetetlen. Az ebben az átfogó útmutatóban vázolt irányelvek és legjobb gyakorlatok követésével biztonságos és funkcionális webalkalmazásokat hozhat létre, amelyek zökkenőmentesen kommunikálnak különböző eredetű erőforrásokkal.

Ne feledje, hogy mindig a biztonságot kell előtérbe helyeznie, és kerülnie kell a túlságosan megengedő CORS konfigurációkat. A CORS beállítások biztonsági következményeinek gondos mérlegelésével megvédheti alkalmazásait és adatait az illetéktelen hozzáféréstől.

Reméljük, ez az útmutató segített megfejteni a CORS rejtélyeit. Jó kódolást!

A CORS rejtélyeinek megfejtése: Átfogó útmutató a Cross-Origin Resource Sharinghez | MLOG