Uso della rete CDN di Azure con CORSUsing Azure CDN with CORS

Informazioni su CORSWhat is CORS?

CORS (Cross Origin Resource Sharing) è una funzionalità HTTP che consente a un'applicazione Web in esecuzione in un dominio di accedere alle risorse in un altro dominio.CORS (Cross Origin Resource Sharing) is an HTTP feature that enables a web application running under one domain to access resources in another domain. Per ridurre il rischio di attacchi tramite script da altri siti, tutti i Web browser moderni implementano una restrizione di sicurezza nota come regola della stessa origine.In order to reduce the possibility of cross-site scripting attacks, all modern web browsers implement a security restriction known as same-origin policy. Questo impedisce a una pagina Web di chiamare le API in un dominio diverso.This prevents a web page from calling APIs in a different domain. CORS offre un modo sicuro per consentire a una origine, ovvero il dominio di origine, di chiamare le API in un'altra origine.CORS provides a secure way to allow one origin (the origin domain) to call APIs in another origin.

FunzionamentoHow it works

Esistono due tipi di richieste CORS, le richieste semplici e le richieste complesse.There are two types of CORS requests, simple requests and complex requests.

Per le richieste semplici:For simple requests:

  1. Il browser invia la richiesta CORS con un'ulteriore intestazione della richiesta HTTP Origin.The browser sends the CORS request with an additional Origin HTTP request header. Il valore di questa intestazione è l'origine che ha gestito la pagina padre, definita come la combinazione di protocollo, dominio e porta.The value of this header is the origin that served the parent page, which is defined as the combination of protocol, domain, and port. Quando una pagina prova ad accedere da https://www.contoso.com ai dati di un utente nell'origine fabrikam.com, a tale sito viene inviata l'intestazione di richiesta seguente: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. Il server può rispondere con uno degli elementi seguenti:The server may respond with any of the following:

    • Un'intestazione Access-Control-Allow-Origin presente nella risposta, per indicare il sito di origine consentito.An Access-Control-Allow-Origin header in its response indicating which origin site is allowed. ad esempio:For example:

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

    • Un codice di errore HTTP, ad esempio 403, se il server non consente la richiesta multiorigine dopo il controllo dell'intestazione Origin.An HTTP error code such as 403 if the server does not allow the cross-origin request after checking the Origin header

    • Un'intestazione Access-Control-Allow-Origin con un carattere jolly che consente tutte le origini:An Access-Control-Allow-Origin header with a wildcard that allows all origins:

      Access-Control-Allow-Origin: *

Per le richieste complesse:For complex requests:

Una richiesta complessa è una richiesta CORS in cui il browser deve inviare una richiesta preliminare, ovvero un probe preliminare, prima di inviare la richiesta CORS effettiva.A complex request is a CORS request where the browser is required to send a preflight request (i.e. a preliminary probe) before sending the actual CORS request. La richiesta preliminare chiede l'autorizzazione del server perché la richiesta CORS originale possa procedere e si tratta di una richiesta OPTIONS allo stesso URL.The preflight request asks the server permission if the original CORS request can proceed and is an OPTIONS request to the same URL.

Suggerimento

Per altre informazioni sui flussi CORS e i problemi comuni, vedere Guide to CORS for REST APIs (Guida di CORS per le API REST).For more details on CORS flows and common pitfalls, view the Guide to CORS for REST APIs.

Scenari con caratteri jolly o singola origineWildcard or single origin scenarios

La condivisione CORS sulla rete CDN di Azure funzionerà automaticamente senza operazioni di configurazione aggiuntive quando l'intestazione Access-Control-Allow-Origin è impostata sul carattere jolly asterisco () o su una singola origine.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. La rete CDN memorizzerà nella cache la prima risposta e le richieste successive useranno la stessa intestazione.The CDN will cache the first response and subsequent requests will use the same header.

Se sono state inviate richieste alla rete CDN prima che la condivisione CORS venisse impostata nell'origine, sarà necessario eliminare il contenuto sull'endpoint e ricaricarlo con l'intestazione Access-Control-Allow-Origin .If requests have already been made to the CDN prior to CORS being set on the your origin, you will need to purge content on your endpoint content to reload the content with the Access-Control-Allow-Origin header.

Scenari con più originiMultiple origin scenarios

Se si desidera autorizzare per CORS uno specifico elenco di origini, le operazioni da eseguire sono più complesse.If you need to allow a specific list of origins to be allowed for CORS, things get a little more complicated. Il problema si verifica quando la rete CDN memorizza nella cache l'intestazione Access-Control-Allow-Origin per la prima origine CORS.The problem occurs when the CDN caches the Access-Control-Allow-Origin header for the first CORS origin. Quando un'origine CORS differente effettua una richiesta successiva, la rete CDN gestisce l'intestazione Access-Control-Allow-Origin memorizzata nella cache, che però non corrisponde.When a different CORS origin makes a subsequent request, the CDN will serve the cached Access-Control-Allow-Origin header, which won't match. Esistono diversi modi per risolvere il problema.There are several ways to correct this.

Rete CDN Premium di Azure fornita da VerizonAzure CDN Premium from Verizon

Il modo migliore per abilitare questa rete consiste nell'usare la rete CDN Premium di Azure fornita da Verizon, in cui sono disponibili alcune funzionalità avanzate.The best way to enable this is to use Azure CDN Premium from Verizon, which exposes some advanced functionality.

È necessario creare una regola per verificare l'intestazione Origin nella richiesta.You'll need to create a rule to check the Origin header on the request. Se l'origine è valida, la regola imposterà l'intestazione Access-Control-Allow-Origin sull'origine indicata nella richiesta.If it's a valid origin, your rule will set the Access-Control-Allow-Origin header with the origin provided in the request. Se l'origine specificata nell'intestazione Origin non è consentita, la regola dovrà omettere l'intestazione Access-Control-Allow-Origin, che causerà il rifiuto della richiesta da parte del browser.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.

Per eseguire questa operazione è possibile procedere in due modi usando il motore regole:There are two ways to do this with the rules engine. In entrambi i casi, l'intestazione Access-Control-Allow-Origin proveniente dal server di origine del file viene completamente ignorata e il motore regole della rete CDN gestisce interamente le origini CORS consentite.In both cases, the Access-Control-Allow-Origin header from the file's origin server is completely ignored, the CDN's rules engine completely manages the allowed CORS origins.

Un'espressione regolare con tutte le origini valideOne regular expression with all valid origins

In questo caso verrà creata un'espressione regolare che include tutte le origini che si desidera consentire: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)$

Suggerimento

La rete CDN di Azure fornita da Verizon usa la libreria PCRE (Perl Compatible Regular Expressions) come motore per le espressioni regolari.Azure CDN from Verizon uses Perl Compatible Regular Expressions as its engine for regular expressions. Per convalidare le espressioni regolari, è possibile usare uno strumento come Regular Expressions 101.You can use a tool like Regular Expressions 101 to validate your regular expression. Si noti che il carattere "/" è valido nelle espressioni regolari e non deve essere preceduto da un carattere di escape. Tuttavia, l'inserimento di un carattere di escape prima di "/" è considerato una procedura consigliata ed è previsto da alcuni strumenti di convalida delle espressioni regolari.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.

Se l'espressione regolare corrisponde, la regola specificata sostituirà l'intestazione Access-Control-Allow-Origin (se presente) proveniente dall'origine con l'origine che ha inviato la richiesta.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. È inoltre possibile aggiungere altre intestazioni CORS, ad esempio Access-Control-Allow-Methods.You can also add additional CORS headers, such as Access-Control-Allow-Methods.

Esempio di regole con espressione regolare

Regola intestazione richiesta per ciascuna origine.Request header rule for each origin.

Anziché usare espressioni regolari, è possibile creare una regola separata per ogni origine che si vuole consentire usando la condizione di corrispondenza Request Header Wildcard (Carattere jolly intestazione richiesta).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. Come per il metodo delle espressioni regolari, il motore regole imposta le intestazioni CORS.As with the regular expression method, the rules engine alone sets the CORS headers.

Esempio di regole senza espressione regolare

Suggerimento

Nell'esempio precedente l'uso del carattere jolly asterisco (*) indica al motore regole di mettere in corrispondenza sia HTTP che HTTPS.In the example above, the use of the wildcard character * tells the rules engine to match both HTTP and HTTPS.

Rete CDN Standard di AzureAzure CDN Standard

Nei profili della rete CDN Standard di Azure, l'unico meccanismo per consentire più origini senza l'uso dell'origine con caratteri jolly consiste nella memorizzazione della stringa di query nella cache.On Azure CDN Standard profiles, the only mechanism to allow for multiple origins without the use of the wildcard origin is to use query string caching. È necessario abilitare l'impostazione della stringa di query per l'endpoint della rete CDN e usare quindi una stringa di query univoca per le richieste provenienti da ciascun dominio consentito.You need to enable query string setting for the CDN endpoint and then use a unique query string for requests from each allowed domain. Con questa operazione la rete CDN memorizzerà nella cache un oggetto separato per ciascuna stringa di query univoca.Doing this will result in the CDN caching a separate object for each unique query string. Questo approccio tuttavia non rappresenta la soluzione ideale, poiché avrà come risultato la memorizzazione nella cache di più copie dello stesso file nella rete CDN.This approach is not ideal, however, as it will result in multiple copies of the same file cached on the CDN.