configure CORS headers on ESA for cross-origin access - Edge Security Acceleration

Configurez les en-têtes de réponse HTTP dans Edge Security Acceleration (ESA) pour activer le partage de ressources cross-origin (CORS) et permettre aux navigateurs de charger des ressources provenant d'origines différentes.

Pourquoi configurer le partage de ressources cross-origin

Les applications web séparent généralement le frontend du backend. Un frontend hébergé sur http://example.com nécessite souvent des données d'une API backend située sur http://example.org/api. La politique de même origine du navigateur bloque ces requêtes cross-origin, empêchant ainsi le bon fonctionnement du frontend.

L'application d'une politique CORS sur un point de présence (POP) résout ce problème. Elle permet au navigateur de valider les réponses provenant de http://example.org/api et autorise les scripts de http://example.com à accéder aux données de réponse. Ainsi, seules les origines autorisées atteignent vos ressources.

Présentation de la solution

Le mécanisme CORS repose sur une négociation d'en-têtes HTTP entre le navigateur et le serveur. Déployer cette configuration sur un POP ESA traite la logique cross-origin avant que les requêtes n'atteignent votre origine, offrant une gestion centralisée des politiques à la périphérie du réseau ESA.

Initiation de la requête : L'application frontend sur http://example.com demande la ressource http://example.com/index.html.
Traitement au niveau du POP : Le POP ESA vérifie son cache. Si le contenu est mis en cache, il le retourne directement. Sinon, il récupère le contenu depuis le serveur d'origine, met la réponse en cache, puis la renvoie.
Réponse du POP : Le POP envoie le contenu demandé (le fichier index.html) au client avec le statut 200 OK.
Traitement côté client : Le client exécute le script contenu dans le fichier HTML.
Initiation de la requête cross-origin : Le script du client émet une requête cross-origin, GET http://example.org/api, qui inclut l'en-tête de requête Origin:http://example.com.
Traitement de la requête cross-origin au niveau du POP : Le POP vérifie si la requête correspond aux conditions de la règle. Par exemple, il contrôle si la valeur de l'en-tête Origin est bien http://example.com. Si les conditions sont remplies, le POP ajoute l'en-tête CORS Access-Control-Allow-Origin:http://example.com à la réponse.
Réponse à la requête cross-origin : Le POP retourne le statut 200 OK pour la requête cross-origin.
Traitement de la requête cross-origin côté client : Le navigateur vérifie que l'en-tête Access-Control-Allow-Origin correspond à l'origine de la page (http://example.com). En cas de correspondance, le navigateur traite la réponse et affiche le contenu.

Exemple de configuration

Remarque

Si vous utilisez OSS comme serveur d'origine et configurez CORS à la fois dans les consoles OSS et ESA, la configuration ESA écrase les paramètres CORS d'OSS.

Appliquer à toutes les requêtes

Cas d'utilisation

Autorisez toutes les requêtes provenant de votre site (example.com) à accéder aux ressources de n'importe quelle origine.

Étapes

Dans la console ESA, sélectionnez Websites. Dans la colonne Websites, cliquez sur le site cible.
Dans le volet de navigation de gauche, choisissez Website > Transform Rules. Sur la page Transform Rules, cliquez sur l'onglet Modify Response Header. Définissez Response Header Position sur ESA to Client, puis cliquez sur Create Rule.
Sur la page Create Response Header Modification Rule, configurez les paramètres suivants :
1. Rule Name : Saisissez un nom de règle personnalisé, par exemple rule-cors-for-all.
2. If requests match... : Sélectionnez All Requests.
3. Then execute... : Configurez les paramètres ci-dessous :
  - Type : Sélectionnez Static.
  - Operation : Sélectionnez Add.
  - Response Header Name : Saisissez Access-Control-Allow-Origin.
  - Response Header Value : Saisissez *.

Résultat

Pour toute requête cross-origin, ESA ajoute l'en-tête Access-Control-Allow-Origin: * à la réponse, permettant au navigateur d'afficher la ressource cross-origin.

Appliquer à des requêtes spécifiques

Cas d'utilisation

Autorisez l'accès cross-origin lorsque l'en-tête origin correspond à un sous-domaine de example.com via HTTP ou HTTPS. Exemples :

origin:http://www.example.com
origin:https://www.example.com
origin:http://image.example.com
origin:https://image.example.com

La valeur de l'en-tête de réponse CORS doit correspondre à celle de l'en-tête origin présent dans la requête.

Étapes de configuration

Dans la console ESA, sélectionnez Websites. Dans la colonne Website, cliquez sur le site cible.
Dans le volet de navigation de gauche, choisissez Rules > Website. Sur la page Rules, cliquez sur l'onglet Transform Rules. Définissez Response Header Position sur Transform Rules, puis cliquez sur Modify Response Header.
Sur la page ESA to Client, configurez les paramètres suivants :
1. Create Rule : Saisissez un nom de règle personnalisé, tel que rule-cors-origin.
2. Create Response Header Modification Rule : Pour cet exemple, définissez la condition sur Rule Name Value of origin If requests match... ^https?://(?:a-zA-Z0-9?\.)+example\.com$.
  
  Vous pouvez également modifier directement l'expression comme suit : (http.request.headers["origin"] matches "^https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9\-]*[a-zA-Z0-9])?\.)+example\.com$")
  
  Remarque
  Si votre plan ne prend pas en charge les expressions régulières, utilisez l'opérateur Header et listez les valeurs d'en-tête d'origine autorisées.
  
  Vous pouvez également modifier directement l'expression comme suit : (http.request.headers["origin"] in {"http://www.example.com" "https://www.example.com" "http://image.example.com" "https://image.example.com"})
3. matches regex : Configurez les paramètres ci-dessous :
  - is in : Sélectionnez Then execute....
  - Type : Sélectionnez Dynamic.
  - Operation : Saisissez Access-Control-Allow-Origin.
  - Add : Saisissez http.request.headers["origin"].

Résultat

Lorsque l'en-tête origin d'une requête cross-origin correspond à la règle, ESA ajoute l'en-tête Access-Control-Allow-Origin avec la valeur de l'en-tête Origin du client. Le navigateur traite alors la réponse et affiche la ressource cross-origin.