Edge Security Acceleration:Configurer le partage de ressources cross-origin

Qu'est-ce que CORS ?

Le partage de ressources cross-origin (CORS) est une solution standard HTML5 permettant aux pages web d'accéder et de charger des ressources depuis différents serveurs d'origine, tout en garantissant la sécurité des transmissions de données. Pour plus d'informations, consultez Partage de ressources cross-origin (CORS).

Avantages

Pour des raisons de sécurité, les navigateurs appliquent la politique de même origine. Celle-ci empêche les pages web d'initier des requêtes pour accéder et charger des ressources situées sur des domaines ou sous-domaines différents, ou utilisant des protocoles ou ports distincts. Par exemple, example.com ne peut pas accéder aux ressources hébergées sur example.org. La configuration CORS permet de définir des en-têtes de réponse sur le serveur CDN DCDN. Si une requête d'accès aux ressources CDN DCDN contient des en-têtes conformes aux règles autorisées, le chargement et l'accès aux ressources cross-origin sont alors possibles.

Fonctionnement de CORS

CORS désactivé

1. Un client envoie une requête pour http://example.com/index.html à example.com.

2. example.com renvoie le fichier index.html au client. L'URL du fichier contient l'URL d'une ressource provenant d'un autre serveur d'origine : http://example.org/image_01.png.

3. Le client envoie une requête pour http://example.org/image_01.png à example.org.

4. example.org retourne un en-tête cross-origin, tel que Access-Control-Allow-Origin: *.

5. Le client reçoit la réponse et le navigateur vérifie la valeur de l'en-tête. Cette valeur étant un astérisque (*), elle indique que les requêtes cross-origin sont autorisées depuis toutes les origines. Le navigateur affiche ensuite la réponse.

CORS activé

1. Un client envoie une requête pour http://example.com/index.html à CDN DCDN.

2. CDN DCDN renvoie le fichier index.html au client. L'URL du fichier contient l'URL d'une ressource provenant d'un autre serveur d'origine : http://example.org/image_01.png.

3. Le client envoie une requête pour http://example.org/image_01.png à CDN DCDN. La requête inclut l'en-tête Origin:http://example.com.

4. CDN DCDN reçoit la requête et compare la valeur de l'en-tête Origin avec la valeur configurée pour Access-Control-Allow-Origin. Vous pouvez spécifier une ou plusieurs valeurs, ou un nom de domaine générique pour Access-Control-Allow-Origin. L'en-tête Access-Control-Allow-Origin n'est retourné au client que si les valeurs d'en-tête correspondent.

5. CDN DCDN retourne un en-tête cross-origin, tel que Access-Control-Allow-Origin:http://example.com, au client.

6. Le client reçoit la réponse et le navigateur vérifie la valeur de l'en-tête. Cette valeur étant http://example.com, elle indique que les requêtes cross-origin depuis http://example.com sont autorisées. Le navigateur affiche ensuite la réponse.

Remarques d'utilisation

• Si le serveur d'origine est un bucket Object Storage Service (OSS) et que CORS est configuré à la fois dans les consoles OSS et CDNDCDN, les paramètres CORS de la console CDNDCDN s'appliquent. Pour plus d'informations sur les paramètres CORS dans la console OSS, consultez CORS.

• Les en-têtes de réponse HTTP configurés dans la console DCDN, comme l'en-tête CORS Access-Control-Allow-Origin, s'appliquent à tous les types de ressources, y compris les requêtes API dynamiques.

Activer CORS

1. Connectez-vous à la console DCDN.

2. Dans le volet de navigation de gauche, cliquez sur Domain Names.

3. Sur la page Domain Names, recherchez le nom de domaine cible et cliquez sur Configure.

4. Dans l'arborescence de navigation de gauche du nom de domaine, cliquez sur Caching.

5. Cliquez sur l'onglet Modify Outgoing Response Header, puis sur Add pour configurer l'en-tête de réponse HTTP que les nœuds DCDN ajoutent aux réponses.

6. Définissez les paramètres suivants pour spécifier les origines autorisées pour les requêtes cross-origin, puis cliquez sur OK.

   

   Paramètre	Description	Exemple
   Operation	Définissez ce paramètre sur Add pour utiliser la fonctionnalité CORS.	Add
   Response Header	Définissez ce paramètre sur Access-Control-Allow-Origin pour utiliser la fonctionnalité CORS.	Access-Control-Allow-Origin
   Header Value	CORS désactivé : Vous pouvez uniquement configurer un caractère générique ou une seule origine spécifiée. Caractère générique (*) : Un caractère générique est configuré, indiquant que les ressources sont accessibles depuis toutes les origines. Origine unique spécifiée : Une seule origine (nom de domaine) est spécifiée, indiquant que les ressources ne sont accessibles que depuis cette origine précise. CORS activé : Vous pouvez configurer un caractère générique, une seule origine spécifiée, plusieurs origines spécifiées et des noms de domaine génériques. Caractère générique (*) : Un caractère générique est configuré, indiquant que les ressources sont accessibles depuis toutes les origines. Origine unique spécifiée : Une seule origine (nom de domaine) est spécifiée, indiquant que les ressources ne sont accessibles que depuis cette origine précise. Plusieurs origines spécifiées : Plusieurs origines (noms de domaine) sont spécifiées et séparées par des virgules (,), indiquant que les ressources sont accessibles depuis les origines comprises dans la plage spécifiée. Noms de domaine génériques : Un nom de domaine générique est configuré, indiquant que les ressources sont accessibles depuis toutes les origines correspondant au nom de domaine générique spécifié.	* http://www.aliyun.com https://aliyun.com,http://www.aliyun.com http://*.aliyun.com
   Allow Duplicates	Yes : Les en-têtes en double sont autorisés. L'en-tête retourné par le serveur d'origine et celui ajouté à la réponse sont tous deux renvoyés au client. No : Les en-têtes en double ne sont pas autorisés. L'en-tête retourné par le serveur d'origine est écrasé par celui ajouté à la réponse. Important Les paramètres Allow Duplicates et CORS sont mutuellement exclusifs. Si vous définissez Allow Duplicates sur Yes, le paramètre CORS devient inopérant.	No
   CORS	Le paramètre CORS n'est configurable que si vous avez défini Operation sur Add et Response Header sur Access-Control-Allow-Origin. Valeurs valides pour CORS : Disable et Enable. Valeur par défaut : Disable. Disable : Les POP DCDN ne vérifient pas l'en-tête Origin dans les requêtes utilisateur. Dans ce cas, les POP retournent la valeur configurée de Access-Control-Allow-Origin. Enable : Les POP DCDN vérifient l'en-tête Origin dans les requêtes utilisateur et attribuent une valeur à l'en-tête Access-Control-Allow-Origin selon les règles suivantes : Correspondance par caractère générique : Si vous définissez l'en-tête Access-Control-Allow-Origin sur un astérisque (), Access-Control-Allow-Origin: est retourné, que les requêtes utilisateur contiennent ou non l'en-tête Origin, et quelle que soit la valeur spécifiée pour cet en-tête Origin. Correspondance exacte : Vous pouvez spécifier une ou plusieurs valeurs pour l'en-tête Access-Control-Allow-Origin. Séparez les valeurs multiples par des virgules (,) : Si la valeur de l'en-tête Origin d'une requête utilisateur correspond à l'une des valeurs de l'en-tête Access-Control-Allow-Origin, la valeur correspondante de l'en-tête Access-Control-Allow-Origin est retournée. Si la valeur de l'en-tête Origin d'une requête utilisateur ne correspond à aucune valeur de l'en-tête Access-Control-Allow-Origin , l'en-tête Access-Control-Allow-Origin n'est pas retourné. Correspondance par nom de domaine générique : Si vous définissez l'en-tête Access-Control-Allow-Origin sur un nom de domaine générique, la valeur de l'en-tête Origin est comparée au nom de domaine générique. Si vous définissez le paramètre CORS sur Enable et que la valeur souhaitée pour le paramètre Header Value contient un tiret (-), vous devez échapper ce tiret (-) en %-. Exemples : Valeur d'en-tête de réponse d'origine : http://doc.aliyun-example.com. Valeur d'en-tête de réponse échappée : http://doc.aliyun%-example.com.	Enable

7. Configurez les paramètres suivants pour spécifier les méthodes autorisées pour les requêtes cross-origin, puis cliquez sur OK.

   

   Paramètre	Description	Exemple
   Operation	Définissez ce paramètre sur Add.	Add
   Response Header	Définissez ce paramètre sur Access-Control-Allow-Methods.	Access-Control-Allow-Methods
   Header Value	Valeurs valides : GET, POST et PUT. Si vous ajoutez GET, POST et PUT simultanément, séparez-les par des virgules (,).	GET
   Allow Duplicates	Yes : Les en-têtes en double sont autorisés. L'en-tête retourné par le serveur d'origine et celui ajouté à la réponse sont tous deux renvoyés au client. No : Les en-têtes en double ne sont pas autorisés. L'en-tête retourné par le serveur d'origine est écrasé par celui ajouté à la réponse.	No

Exemples de configuration