Partage de ressources entre origines multiples (CORS)

Le partage des ressources cross-origin (CORS) d’Adobe Experience Manager as a Cloud Service facilite les propriétés web non-AEM pour effectuer des appels côté client basés sur un navigateur vers les API GraphQL d’AEM.

L’article suivant décrit comment configurer origine unique accès à un ensemble spécifique de points de terminaison AEM sans affichage via CORS. Une origine unique signifie que seul un accès à un domaine non AEM unique est AEM, par exemple, https://app.example.com se connectant à https://www.example.com. L’accès à plusieurs origines peut ne pas fonctionner avec cette approche en raison de problèmes de mise en cache.

Exigence CORS

CORS est obligatoire pour les connexions par navigateur aux API GraphQL d’AEM, quand le client qui se connecte à AEM n’est PAS pris en charge à partir de la même origine (également appelée hôte ou domaine) qu’AEM.

Configuration OSGi

La configuration OSGi de CORS AEM définit les critères d’autorisation pour accepter les requêtes HTTP CORS.

L’exemple ci-dessous définit une configuration OSGi pour la Publicaton AEM (../config.publish/..), mais peut être ajouté à tout dossier de mode d’exécution pris en charge.

Les principales propriétés de configuration sont :

• alloworigin et/ou alloworiginregexp indique les origines sur lesquelles opère le client qui se connecte à AEM web.
• allowedpaths indique les modèles de chemin d’URL autorisés à partir des origines spécifiées.
  • Pour prendre en charge les requêtes persistantes GraphQL d’AEM, ajoutez le motif : /graphql/execute.json.*
  • Pour prendre en charge les fragments d’expérience, ajoutez le motif : /content/experience-fragments/.*
• supportedmethods spécifie les méthodes HTTP autorisées pour les requêtes CORS. Ajoutez GET, pour prendre en charge les requêtes persistantes AEM GraphQL (et Fragments d’expérience).

En savoir plus sur la configuration OSGi CORS.

Cet exemple de configuration prend en charge l’utilisation des requêtes persistantes AEM GraphQL. Pour utiliser des requêtes GraphQL définies par le client, ajoutez une URL de point de terminaison GraphQL dans allowedpaths et POST à supportedmethods.

• /ui.config/src/main/content/jcr_root/apps/wknd-examples/osgiconfig/config.publish/com.adobe.granite.cors.impl.CORSPolicyImpl~graphql.cfg.json

{
  "alloworigin":[
    "https://spa.external.com/"
  ],
  "alloworiginregexp":[
  ],
  "allowedpaths": [
    "/graphql/execute.json.*",
    "/content/experience-fragments/.*"
  ],
  "supportedheaders": [
    "Origin",
    "Accept",
    "X-Requested-With",
    "Content-Type",
    "Access-Control-Request-Method",
    "Access-Control-Request-Headers"
  ],
  "supportedmethods":[
    "GET",
    "HEAD",
    "OPTIONS"
  ],
  "maxage:Integer": 1800,
  "supportscredentials": false,
  "exposedheaders":[ "" ]
}

Demandes d’API AEM GraphQL autorisées

Pour accéder aux API AEM GraphQL qui nécessitent une autorisation (généralement Création AEM ou du contenu protégé sur la Publication AEM), assurez-vous que la configuration CORS OSGi comporte les valeurs supplémentaires :

• supportedheaders répertorie également "Authorization"
• supportscredentials est défini sur true

Les requêtes autorisées aux API AEM GraphQL qui nécessitent une configuration CORS sont peu courantes, car elles se produisent généralement dans le contexte d’applications serveur à serveur et ne nécessitent donc pas de configuration CORS. Les applications basées sur un navigateur qui nécessitent des configurations CORS, comme les applications à page unique ou les composants Web, utilisent généralement une autorisation, car il est difficile de sécuriser les informations d’identification.

Par exemple, ces deux paramètres sont définis comme suit dans une configuration d’usine OSGi CORSPolicyImpl :

• /ui.config/src/main/content/jcr_root/apps/wknd-examples/osgiconfig/config/com.adobe.granite.cors.impl.CORSPolicyImpl~graphql.cfg.json

{
  ...
  "supportedheaders": [
    "Origin",
    "Accept",
    "X-Requested-With",
    "Content-Type",
    "Access-Control-Request-Method",
    "Access-Control-Request-Headers",
    "Authorization"
  ],
  ...
  "supportscredentials": true,
  ...
}

Exemple de configuration OSGi

• Vous trouverez un exemple de configuration OSGi dans le projet WKND.

Configuration du Dispatcher

Le Dispatcher du service Publication AEM (et aperçu) doit être configuré pour prendre en charge CORS.

Autoriser les en-têtes CORS sur les requêtes HTTP

Mettez à jour le fichier clientheaders.any pour autoriser les en-têtes de requête HTTP Origin, Access-Control-Request-Method, et Access-Control-Request-Headers à être transmis à AEM, ce qui permet à la requête HTTP d’être traitée par la Configuration AEM CORS.

dispatcher/src/conf.dispatcher.d/clientheaders/clientheaders.any

# Allowing CORS headers to be passed through to the publish tier to support headless and SPA Editor use cases.
# https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_request_headers

"Origin"
"Access-Control-Request-Method"
"Access-Control-Request-Headers"

$include "./default_clientheaders.any"

Exemple de configuration du Dispatcher

• Vous pouvez consulter un exemple de configuration des en-têtes client du Dispatcher dans le projet WKND.

Diffuser des en-têtes de réponse HTTP CORS

Configurez la propriété /farm du Dispatcher pour mettre en cache les en-têtes de réponse HTTP CORS afin qu’ils soient inclus lorsque les requêtes persistantes AEM GraphQL sont diffusées à partir du cache du Dispatcher en ajoutant les en-têtes Access-Control-... à la liste des en-têtes de cache.

• dispatcher/src/conf.dispatcher.d/available_farms/wknd.farm

/publishfarm {
    ...
    /cache {
        ...
        # CORS HTTP response headers
        # https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_response_headers
        /headers {
            ...
            "Access-Control-Allow-Origin"
            "Access-Control-Expose-Headers"
            "Access-Control-Max-Age"
            "Access-Control-Allow-Credentials"
            "Access-Control-Allow-Methods"
            "Access-Control-Allow-Headers"
        }
    ...
    }
...
}

Exemple de configuration du Dispatcher

• Consultez un exemple de la configuration des En-têtes de réponse HTTP CORS du Dispatcher dans le projet WKND.

Ressources Business.Adobe.com