[[oktatas:web|< Web]]

====== Cross-Origin ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu


===== Cross-Origin kérések =====

A böngészők biztonsági okokból nem engedik meg más forrásból
származó HTTP kéréseket. Ez megkötés megköveteli, hogy a
azonos tartományba helyezzük a webhelyünk részeit. 

Példa a blokkolásra:
<code>
Access to fetch at 
'http://localhost:8000/list.php' 
from origin 'http://localhost:3000' 
has been blocked by CORS policy
</code>

A böngészők akkor állítanak be CORS irányelv blokkolást,
ha például egy API tartományneve (domain, gépnév cím)
nem egyezik meg a lekérő nevével. Ez a viselkedés 
biztonsági okokból elvárható. 


Szerveroldalon engedélyezhető a hozzáférés CORS irányelvek
beállításával. Nyilvánossá is tehetjük az API-t, de
megadhatjuk, hogy csak egy tartománynévre működjön.

===== Hozzáférés vezérlés =====
A következő szabályokat szokás beállítani:
<code>
Access-Control-Allow-Origin: http://engedett.domain.lan
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type
</code>


  * Access-Control-Allow-Origin
    * null vagy *, ami az összes forrást jelenti
  * Access-Control-Allow-Methods
    * HTTP metódusok.
  * Access-Control-Allow-Headers
    * A kérelemben szereplő fejlécek listája.
    * Hitelesítést itt kell feltüntetni.





===== Beállítás .htaccess fájlban =====

  Header Set Access-Control-Allow-Origin "https://kulso-eroforrascim"

Ha csak egy (*) karakter állítunk be, a CORS le van tiltva,
és mindenhonnan elérhető az erőforrás.

  Header Set Access-Control-Allow-Origin "*"


===== Beállítás PHP-ból =====

A következő példa egy nyilvános REST API számára lehetséges beállítás.

Elég egyetlen sor:
<code php cors.php>
<?php
header('Access-Control-Allow-Origin: *');
</code>

De minden mást is szabályozhatunk:
<code php cors.php>
<?php

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header('Access-Control-Allow-Headers: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
</code>

A cors.php fájl egy require() függvénnyel beemelve, a szabályok érvénybe lépnek.

===== Proxy =====

Ha a célszerveren CORS blokkolás van, beállíthatunk egy proxyt is.
Proxynak megfelel egy másik szerver (akár PHP szerver), amin mi 
vagyunk a rendszergazdák, vagy be engedélyezve van a Cross-Origin kérés.

Ez azért lehetséges, mert a blokkolás a böngészőkben van beállítva.


===== Linkek =====
  * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin (2021)
  * https://jeremyliberman.com/2019/02/11/fetch-has-been-blocked-by-cors-policy.html (2021)
  * https://portswigger.net/web-security/cors/access-control-allow-origin (2021)