Résolutions des limites de stratégie d’origine identique dans les compléments Office

  • Article

La stratégie de même origine appliquée par le navigateur ou le contrôle webview empêche un script chargé à partir d’un domaine d’obtenir ou de manipuler les propriétés d’une page web à partir d’un autre domaine. Cela signifie que, par défaut, le domaine d’une URL demandée doit correspondre au domaine de la page web actuelle. Par exemple, cette stratégie empêche une page web d’un domaine d’effectuer des appels de service web XmlHttpRequest à un domaine autre que celui où elle est hébergée.

Étant donné que les compléments Office sont hébergés dans un contrôle webview, la stratégie de même origine s’applique également aux scripts exécutés dans leurs pages web.

La stratégie de la même origine peut être un handicap inutile dans de nombreuses situations, par exemple, quand une application web héberge du contenu et des API au sein de plusieurs sous-domaines. Il existe quelques techniques permettant de surmonter le renforcement de la stratégie de la même origine. Cet article peut fournir uniquement l’introduction la plus courte à certains d'entre eux. Utilisez des liens fournis pour commencer à utiliser vos recherches des techniques suivantes.

Utilisation de JSONP pour un accès anonyme

Une façon de contourner cette limitation consiste à utiliser JSONP afin de fournir un proxy pour le service web. Pour ce faire, incluez une balise script avec un attribut src qui pointe vers un script hébergé sur n’importe quel domaine. Vous pouvez créer les balises script par programmation, créer dynamiquement l’URL vers laquelle pointer l’attribut src, puis passer des paramètres à l’URL au moyen de paramètres de requête URI. Les fournisseurs de services web créent et hébergent du code JavaScript sur des URL spécifiques et renvoient des scripts différents selon les paramètres de requête URI. Ces scripts s’exécutent ensuite là où ils sont insérés et fonctionnent comme prévu.

L’exemple suivant illustre JSONP utilisant une technique qui fonctionne dans n’importe quel Complément Office.

// Dynamically create an HTML SCRIPT element that obtains the details for the specified video.
function loadVideoDetails(videoIndex) {
    // Dynamically create a new HTML SCRIPT element in the webpage.
    const script = document.createElement("script");
    // Specify the URL to retrieve the indicated video from a feed of a current list of videos,
    // as the value of the src attribute of the SCRIPT element. 
    script.setAttribute("src", "https://gdata.youtube.com/feeds/api/videos/" + 
        videos[videoIndex].Id + "?alt=json-in-script&callback=videoDetailsLoaded");
    // Insert the SCRIPT element at the end of the HEAD section.
    document.getElementsByTagName('head')[0].appendChild(script);
}

Implémentation d’un script coté serveur à l’aide d’un schéma d’authentification basé sur les jetons.

Une autre méthode d’aborder les limitations spécifiques de stratégie de la même origine fournit le code côté serveur qui utilise les fluxOAuth 2.0pour activer un domaine autorisé afin d’accéder aux ressources hébergées sur un autre.

Utilisation du partage de ressources cross-origin (CORS)

Pour en savoir plus sur le partage de ressources cross-origin, consultez les nombreuses ressources disponibles sur le web, telles que Cross-Origin Resource Sharing (CORS).

Remarque

Pour plus d’informations sur l’utilisation de CORS dans un complément Outlook qui implémente l’activation basée sur les événements ou la création de rapports intégrés de courrier indésirable (préversion), voir Utiliser l’authentification unique (SSO) ou le partage de ressources cross-origin (CORS) dans votre complément Outlook basé sur les événements ou la création de rapports de courrier indésirable.

Construction de votre propre proxy à l’aide d’IFRAME et de POSTMESSAGE (Messagerie entre-fenêtre).

Pour un exemple de construction de votre propre proxy à l’aide d’IFRAME et de POSTMESSAGE, reportez-vous à Messagerie entre fenêtres.

Voir aussi