HTTP Access-Control-Allow-Origin (CORS)

    cors

    Cross-Origin Bron delen (CORS) - HTTP

    Access-Control-Allow-Origin resource sharing (of CORS) kan worden gebruikt om AJAX-verzoeken naar een ander domein te maken. We zullen kijken hoe CORS op de server in PHP kan worden ingesteld, hoe de aanvraag in JavaScript en enkele overwegingen moet worden gemaakt. CORS als concept is breder dan alleen AJAX-verzoeken, maar dit is het belangrijkste gebruik. 

    Voordat wij dit helemaal uit gaan leggen, laten we eerst eens beginnen met de basis

    Zinsbouw Access-Control-Allow-Origin

    Access-Control-Allow-Origin: *
    Access-Control-Allow-Origin: <origin>
    Access-Control-Allow-Origin: null

    Richtlijnen Access-Control-Allow-Origin

    *

    Voor verzoeken zonder inloggegevens kan de letterlijke waarde "*" worden opgegeven als wildcard; de waarde geeft browsers de opdracht om code van elke herkomst toe te staan voor toegang tot de resource. Als u probeert het wildcard met credentials te gebruiken, resulteert dit in een fout.

    <origin>

    Een antwoord dat de browser vertelt om code van elke resource toe te staan om toegang te krijgen tot een resource, omvat de  following:


    Access-Control-Allow-Origin kan men dus gebruiken in de .htaccess bestand

    Header Alway set Access-Control-Allow-Origin: "*"

    Een antwoord dat de browser vertelt om allow requesting code van de oorsprong https://jouwdomeinnaam.nl om toegang tot een resource te krijgen, omvat het following

    Header Alway set Access-Control-Allow-Origin: https://jouwdomeinnaam.nl

    Het beperken van de mogelijke Access-Control-Allow-Origin waarden voor een reeks toegestane oorsprongen vereist code aan de serverzijde om de waarde van de header van de allowed origins te controleren, die te vergelijken met een lijst met toegestane originelen en vervolgens als de waarde van Origin in de lijst, om de waarde Access-Control-Allow-Origin in te stellen op dezelfde waarde als de waarde Origin


    CORS en caching

    Als de server een antwoord verzendt met een Access-Control-Allow-Origin waarde die een expliciete oorsprong is (in plaats van het wildcard*), moet het antwoord ook een Vary response bevatten met de value Origin - om aan browsers aan te geven dat serverreacties kunnen verschillen op basis van de waarde van de Origin request header

    Header Alway set Access-Control-Allow-Origin: https://jouwdomeinnaam.nl
    Header Alway set Vary: "Origin"

    Een CORS policy  opstellen

    Standaard is het niet toegestaan om AJAX-verzoeken naar een ander domein te maken. Uw browser past het Same-origin policy toe als onderdeel van het web beveiligingsmodel.

    Om de browser in staat te stellen een cross domein verzoek te doen van foo.app.jouwdomeinnam.nl naar sso.jouwdomeinnam.nl, moeten we een CORS policy voor het doeldomein instellen. Het CORS policy wordt door de browser afgedwongen. Als u het doeldomein niet beheert, kunt u geen CORS policy instellen, maar alternatieven voor CORS bekijken.

    Een CORS policy is een set HTTP response headers. Een basispolicy van CORS kan er als volgt uitzien:

    Header Alway set Access-Control-Allow-Origin: https://foo.app.eendomeinnam.com
    Header Alway set Access-Control-Allow-Credentials: true
    Header Alway set Access-Control-Allow-Methods: POST
    Header Alway set Access-Control-Allow-Headers: Content-Type
     

    Dit policy geeft aan dat de oorsprong https://foo.app.eendomein.com een POST request mag doen, dat cookies kunnen worden opgenomen en we de Content-Type header. mogen verzenden.

    Het request in JavaScript

    Hier ziet u hoe u een aanvraag in JavaScript kunt doen die door dit policy is toegestaan.

    var http_request;
    http_request =
    new XMLHTTPRequest();
    http_request.onreadystatechange =
    function () { /* .. */ };
    http_request.
    open("POST","https://sso.eendomeinnam.com"); http_request.withCredentials = true;
    http_request.
    setRequestHeader("Content-Type","application/json"); http_request.send({ 'request':"authentication token" });

    We sturen een POST request met JSON en we nemen onze cookies op. Het produceert een verzoek met deze headers:

    Header Alway set Origin: https://foo.app.eendomeinnam.com
    Header Alway set Access-Control-Request-Method
    : POST
    Header Alway set Access-Control-Request-Headers: Content-Type
    Verzoek om preflight

    Voordat het AJAX-verzoek wordt gedaan, voert de browser een Preflight-aanvraag uit. Dit is een OPTIONS request dat de browser zal gebruiken om het policy te controleren. Dus wanneer u het CORS-policy op de server implementeert, vergeet dan niet om ook het policy voor OPTIONS requests.te verzenden.

    Het request ontvangen in PHP

    Hier is een voorbeeld implementatie voor de server in PHP:

    if (isset($_SERVER["HTTP_ORIGIN"]) === true) {
    $origin = $_SERVER["
    HTTP_ORIGIN"];
    $allowed_origins =
    array(
    "http://public.app.moxio.com",
    "https://foo.app.moxio.com",
    "https://lorem.app.moxio.com"
    );
    if
    (in_array($origin, $allowed_origins, true) === true) {
    header
    ('Access-Control-Allow-Origin: ' . $origin);
    header('Access-Control-Allow-Credentials: true');
    header
    ('Access-Control-Allow-Methods: POST');
    header('Access-Control-Allow-Headers: Content-Type');
    }
    if ($_SERVER["REQUEST_METHOD"] === "OPTIONS") {
    exit; // OPTIONS request wil alleen het policy, we kunnen hier stoppen
    }
    }
    Er zijn verschillende belangrijke dingen die in dit voorbeeld worden getoond:
    1. http en https zijn verschillende bronnen.
    2. We staan ​​niet alle afkomst toe. Je kunt Allow-Origin instellen op '*' om alle herkomst toe te staan. Dit kan handig zijn als u een open API hebt.
    3. We stellen de lijst met toegestane bronnen niet bloot. U kunt Allow-Origin instellen op een door komma's gescheiden lijst met domeinen, maar dit is meer informatie dan de aanvraag nodig heeft. Omdat CORS in de eerste plaats een beveiligingsfunctie is, is het logisch om deze zo restrictief mogelijk in te stellen.
    4. Voor het preflight-verzoek hoeven we alleen het CORS policy in te leveren, het is niet nodig om het verzoek volledig te verwerken.
    5. Voor de ACA-headers kunt u een dynamische whitelist implementeren (zoals we doen voor de domeinen). Dat doen we niet omdat we altijd dezelfde headers verzenden.
    Alternatieven voor CORS

    Browserondersteuning voor CORS is tegenwoordig goed. In het verleden had u mogelijk ActiveXObject of XDomainRequest moeten gebruiken in Internet Explorer - die beperkte functionaliteit bood.

    JSONP kan worden gebruikt om CORS-beperkingen te omzeilen, maar het heeft zijn eigen beperkingen.

    Een andere manier om CORS te gebruiken, is door het verzoek via de server in uw domein te versturen. Dit is niet altijd een slechte oplossing, vooral als u wilt profiteren van caching of als u de API wilt aanpassen.

    U kunt CORS policyscontrole ook uitschakelen in sommige browsers, dit kan handig zijn bij de ontwikkeling.

     

    © Nieuwsberichten.eu. Alle rechten voorbehouden.
    Free Joomla! templates by Engine Templates