Použití Azure CDN s CORSUsing Azure CDN with CORS

Co je CORS?What is CORS?

CORS (sdílení prostředků mezi zdroji) je funkce HTTP, která umožňuje webové aplikaci spuštěné v jedné doméně přistupovat k prostředkům v jiné doméně.CORS (Cross Origin Resource Sharing) is an HTTP feature that enables a web application running under one domain to access resources in another domain. Aby se snížila pravděpodobnost útoků prostřednictvím skriptování mezi weby, všechny moderní webové prohlížeče implementují omezení zabezpečení označované jako zásady stejného původu.In order to reduce the possibility of cross-site scripting attacks, all modern web browsers implement a security restriction known as same-origin policy. To brání webové stránce v volání rozhraní API v jiné doméně.This prevents a web page from calling APIs in a different domain. CORS poskytuje zabezpečený způsob, jak umožníte jednomu zdroji (zdrojové doméně) volat rozhraní API v jiném zdroji.CORS provides a secure way to allow one origin (the origin domain) to call APIs in another origin.

Jak to fungujeHow it works

Existují dva typy požadavků CORS, jednoduchých požadavků a složitých požadavků.There are two types of CORS requests, simple requests and complex requests.

Pro jednoduché požadavky:For simple requests:

  1. Prohlížeč odešle požadavek CORS s další hlavičkou původní žádosti protokolu HTTP.The browser sends the CORS request with an additional Origin HTTP request header. Hodnota tohoto záhlaví je zdrojem, který sloužil nadřazenou stránku, která je definována jako kombinace protokolu, domény a portu.The value of this header is the origin that served the parent page, which is defined as the combination of protocol, domain, and port. Když se stránka z https://www.contoso.com pokusí získat přístup k datům uživatele v fabrikam.com původu, pošle se následující Hlavička požadavku na fabrikam.com:When a page from https://www.contoso.com attempts to access a user's data in the fabrikam.com origin, the following request header would be sent to fabrikam.com:

    Origin: https://www.contoso.com

  2. Server může reagovat s některým z následujících způsobů:The server may respond with any of the following:

    • Hlavička Access-Control-Allow-Origin v odpovědi, která označuje, který zdrojový web je povolen.An Access-Control-Allow-Origin header in its response indicating which origin site is allowed. Příklad:For example:

      Access-Control-Allow-Origin: https://www.contoso.com

    • Kód chyby HTTP, například 403, pokud Server nepovoluje požadavek na více zdrojů po kontrole původní hlavičkyAn HTTP error code such as 403 if the server does not allow the cross-origin request after checking the Origin header

    • Hlavička Access-Control-Allow-Origin , která má zástupný znak, který umožňuje všechny zdroje:An Access-Control-Allow-Origin header with a wildcard that allows all origins:

      Access-Control-Allow-Origin: *

Pro komplexní požadavky:For complex requests:

Komplexní požadavek je požadavek CORS, ve kterém se před odesláním skutečné žádosti CORS vyžaduje, aby se v prohlížeči poslal požadavek na kontrolu před výstupem (tj. Předběžný test).A complex request is a CORS request where the browser is required to send a preflight request (that is, a preliminary probe) before sending the actual CORS request. Požadavek na kontrolu před výstupem vyžaduje oprávnění serveru, pokud může pokračovat původní žádost CORS a je OPTIONS požadavek na stejnou adresu URL.The preflight request asks the server permission if the original CORS request can proceed and is an OPTIONS request to the same URL.

Tip

Další podrobnosti o tocích CORS a běžných nástrah najdete v Průvodci CORS pro rozhraní REST API.For more details on CORS flows and common pitfalls, view the Guide to CORS for REST APIs.

Scénáře se zástupnými znaky nebo jedním zdrojemWildcard or single origin scenarios

CORS v Azure CDN bude fungovat automaticky bez další konfigurace, pokud je hlavička Access-Control-Allow-Origin nastavená na zástupný znak (*) nebo na jeden počátek.CORS on Azure CDN will work automatically with no additional configuration when the Access-Control-Allow-Origin header is set to wildcard (*) or a single origin. CDN bude ukládat první odpověď do mezipaměti a následné požadavky budou používat stejnou hlavičku.The CDN will cache the first response and subsequent requests will use the same header.

Pokud se už požadavky na síť CDN nastavily na svém zdroji, budete muset vyprázdnit obsah v obsahu koncového bodu, aby se obsah znovu načítat pomocí hlavičky Access-Control-Allow-Origin .If requests have already been made to the CDN prior to CORS being set on your origin, you will need to purge content on your endpoint content to reload the content with the Access-Control-Allow-Origin header.

Scénáře s více zdrojiMultiple origin scenarios

Pokud potřebujete povolit, aby určitý seznam zdrojů byl pro CORS povolený, věci budou mít trochu složitější.If you need to allow a specific list of origins to be allowed for CORS, things get a little more complicated. K tomuto problému dochází, když CDN ukládá do mezipaměti hlavičku Access-Control-Allow-Origin pro první původ CORS.The problem occurs when the CDN caches the Access-Control-Allow-Origin header for the first CORS origin. Když jiný původ CORS vytvoří následnou žádost, bude CDN používat hlavičku Access-Control-Allow-Origin v mezipaměti, která se neshoduje.When a different CORS origin makes a subsequent request, the CDN will serve the cached Access-Control-Allow-Origin header, which won't match. Existuje několik způsobů, jak to opravit.There are several ways to correct this.

Profily Azure CDN StandardAzure CDN standard profiles

Na Azure CDN Standard od Microsoftu můžete vytvořit pravidlo v modulu Standard Rules pro kontrolu původní hlavičky v žádosti.On Azure CDN Standard from Microsoft, you can create a rule in the Standard rules engine to check the Origin header on the request. Pokud se jedná o platný zdroj, vaše pravidlo nastaví hlavičku Access-Control-Allow-Origin s požadovanou hodnotou.If it's a valid origin, your rule will set the Access-Control-Allow-Origin header with the desired value. V tomto případě se hlavička Access-Control-Allow-Origin ze zdrojového serveru souboru ignoruje a modul pravidel CDN plně spravuje povolené zdroje CORS.In this case, the Access-Control-Allow-Origin header from the file's origin server is ignored and the CDN's rules engine completely manages the allowed CORS origins.

Příklad pravidel se strojem standardních pravidel

Tip

Do pravidla můžete přidat další akce, které upraví další hlavičky odpovědí, jako je například Access-Control-Allow-Methods.You can add additional actions to your rule to modify additional response headers, such as Access-Control-Allow-Methods.

V Azure CDN Standard od Akamaije jediným mechanismem, který umožňuje více míst původu bez použití zástupného znaku, použít ukládání řetězců dotazu do mezipaměti.On Azure CDN Standard from Akamai, the only mechanism to allow for multiple origins without the use of the wildcard origin is to use query string caching. Povolte nastavení řetězce dotazu pro koncový bod CDN a pak pro žádosti z každé povolené domény použijte jedinečný řetězec dotazu.Enable the query string setting for the CDN endpoint and then use a unique query string for requests from each allowed domain. Výsledkem je, že CDN ukládá do mezipaměti samostatný objekt pro každý řetězec jedinečného dotazu.Doing so will result in the CDN caching a separate object for each unique query string. Tento přístup není ideální, ale v takovém případě bude výsledkem více kopií stejného souboru v mezipaměti CDN.This approach is not ideal, however, as it will result in multiple copies of the same file cached on the CDN.

Azure CDN Premium od VerizonuAzure CDN Premium from Verizon

Pomocí modulu pravidel Verizon Premium budete muset vytvořit pravidlo pro kontrolu počáteční hlavičky v žádosti.Using the Verizon Premium rules engine, You'll need to create a rule to check the Origin header on the request. Pokud se jedná o platný zdroj, vaše pravidlo nastaví hlavičku Access-Control-Allow-Origin s počátkem uvedeným v žádosti.If it's a valid origin, your rule will set the Access-Control-Allow-Origin header with the origin provided in the request. Pokud se počátek zadaný v záhlaví původu nepovoluje, vaše pravidlo by mělo vynechat hlavičku Access-Control-Allow-Origin , která způsobí odmítnutí žádosti v prohlížeči.If the origin specified in the Origin header is not allowed, your rule should omit the Access-Control-Allow-Origin header, which will cause the browser to reject the request.

Existují dva způsoby, jak to provést s modulem pravidel Premium.There are two ways to do this with the Premium rules engine. V obou případech se hlavička Access-Control-Allow-Origin ze zdrojového serveru souboru ignoruje a modul pravidel pro CDN plně spravuje povolené zdroje CORS.In both cases, the Access-Control-Allow-Origin header from the file's origin server is ignored and the CDN's rules engine completely manages the allowed CORS origins.

Jeden regulární výraz se všemi platnými zdrojiOne regular expression with all valid origins

V tomto případě vytvoříte regulární výraz, který bude obsahovat všechny zdroje, které chcete dovolit:In this case, you'll create a regular expression that includes all of the origins you want to allow:

https?:\/\/(www\.contoso\.com|contoso\.com|www\.microsoft\.com|microsoft.com\.com)$

Tip

Azure CDN Premium od Verizon využívá jako svůj modul regulární výrazy kompatibilní s Perl jako jeho modul pro regulární výrazy.Azure CDN Premium from Verizon uses Perl Compatible Regular Expressions as its engine for regular expressions. Můžete použít nástroj jako regulární výrazy 101 k ověření regulárního výrazu.You can use a tool like Regular Expressions 101 to validate your regular expression. Všimněte si, že znak "/" je platný v regulárních výrazech a nemusí být uvozen řídicím znakem, ale označení je považováno za osvědčený postup a je očekáváno některými validátory regulárního výrazu.Note that the "/" character is valid in regular expressions and doesn't need to be escaped, however, escaping that character is considered a best practice and is expected by some regex validators.

Pokud regulární výraz odpovídá, vaše pravidlo nahradí hlavičku Access-Control-Allow-Origin (pokud existuje) od počátku s počátkem, který odeslal požadavek.If the regular expression matches, your rule will replace the Access-Control-Allow-Origin header (if any) from the origin with the origin that sent the request. Můžete také přidat další hlavičky CORS, například Access-Control-Allow-Methods.You can also add additional CORS headers, such as Access-Control-Allow-Methods.

Příklad pravidel s regulárním výrazem

Pravidlo pro záhlaví žádosti pro každý počátek.Request header rule for each origin.

Místo regulárních výrazů můžete místo toho vytvořit samostatné pravidlo pro každý zdroj, který chcete použít, pomocí podmínky shodyse zástupnými znaky v hlavičce požadavku .Rather than regular expressions, you can instead create a separate rule for each origin you wish to allow using the Request Header Wildcard match condition. Stejně jako u metody regulárních výrazů nastavuje modul pravidel pouze hlavičky CORS.As with the regular expression method, the rules engine alone sets the CORS headers.

Příklad pravidel bez regulárního výrazu

Tip

V předchozím příkladu použití zástupného znaku * instruuje modul pravidel, aby odpovídal HTTP i HTTPS.In the example above, the use of the wildcard character * tells the rules engine to match both HTTP and HTTPS.