Office アドインにおける同一生成元ポリシーの制限への対処Addressing same-origin policy limitations in Office Add-ins

ブラウザーによって適用される同一生成元ポリシーでは、あるドメインから読み込まれたスクリプトで別のドメインの Web ページのプロパティを取得または操作できないようにしています。つまり、既定で、要求された URL のドメインは現在の Web ページのドメインと同じである必要があります。たとえば、このポリシーを適用すると、あるドメインの Web ページから、そのページがホストされているドメインとは別のドメインに対して XmlHttpRequest Web サービスを呼び出せません。The same-origin policy enforced by the browser prevents a script loaded from one domain from getting or manipulating properties of a webpage from another domain. This means that, by default, the domain of a requested URL must be the same as the domain of the current webpage. For example, this policy will prevent a webpage in one domain from making XmlHttpRequest web-service calls to a domain other than the one where it is hosted.

Office アドインはブラウザー コントロールでホストされるので、それらの Web ページで実行されるスクリプトにも同一生成元ポリシーが適用されます。Because Office Add-ins are hosted in a browser control, the same-origin policy applies to script running in their web pages as well.

アドインを開発する際に、同一生成元ポリシーの適用に対処するには、次のようにします。To overcome same-origin policy enforcement when you develop add-ins, you can:

  • JSON/P を使用して匿名アクセスする。Use JSON/P for anonymous access.

  • トークン ベースの認証スキームを使用してサーバーサイド スクリプトを実装する。Implement server-side script using a token-based authentication scheme.

  • クロス オリジン リソース共有 (CORS) を使用する。Using cross-origin resource sharing (CORS).

  • IFRAME および POST MESSAGE を使用して独自のプロキシを作成する。Build your own proxy using IFRAME and POST MESSAGE.

JSON/P を使用した匿名アクセスUsing JSON/P for anonymous access

この制限に対処する方法の 1 つは、JSON/P を使用して Web サービスのプロキシを提供することです。これを行うためには、任意のドメインでホストされているスクリプトを参照する src 属性を持つ script タグを使用します。script タグをプログラムで作成し、src 属性で参照する URL を動的に作成すると、URI クエリ パラメーターを介してパラメーターを URL に渡すことができます。Web サービス プロバイダーは、固有の URL で JavaScript コードを作成およびホストし、URI クエリ パラメーターに応じて異なるスクリプトを返します。それらのスクリプトは挿入された場所で実行され、想定どおりに動作します。One way to overcome this limitation is to use JSON/P to provide a proxy for the web service. You do this by including a script tag with a src attribute that points to some script hosted on any domain. You can programmatically create the script tags, dynamically create the URL to point the src attribute to, and then pass parameters to the URL via URI query parameters. Web service providers create and host JavaScript code at specific URLs, and return different scripts depending on the URI query parameters. These scripts then execute where they are inserted and work as expected.

いずれの Office アドインでも機能する手法を使用する JSON/P の例を以下に示します。The following is an example of JSON/P that uses a technique that will work in any Office Add-in.

// 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.
    var 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);
}

トークン ベースの認証スキームを使用するサーバーサイド スクリプトの実装Implementing server-side script using a token-based authentication scheme

同一生成元ポリシーの制限に対処する他の方法として、OAuth を使用する ASP ページ、または Cookie で資格情報をキャッシュする ASP ページとして、アドインの Web ページを実装する方法があります。Another way to address same-origin policy limitations is to implement the add-in's webpage as an ASP page that uses OAuth or caches credentials in cookies.

System.NetCookie\ オブジェクトを使用して、Cookie の値を取得および設定する方法を示すサーバー側のコード例については、Value プロパティを参照してください。For an example of server-side code that shows how to use the Cookie object in System.Net to get and set cookie values, see the Value property.

クロス オリジン リソース共有 (CORS) の使用Using cross-origin resource sharing (CORS)

XmlHttpRequest2 のクロス オリジン リソース共有機能を使用する例については、「New Tricks in XMLHttpRequest2 に関する新しいヒント」の「Cross Origin Resource Sharing (CORS)」セクションを参照してください。For an example of using the cross-origin resource sharing feature of XmlHttpRequest2, see the "Cross Origin Resource Sharing (CORS)" section of New Tricks in XMLHttpRequest2.

IFRAME および POST MESSAGE を使用する独自のプロキシの作成Building your own proxy using IFRAME and POST MESSAGE

IFRAME および POST MESSAGE を使用して独自のプロキシを作成する例については、「Cross-Window Messaging」を参照してください。For an example of how to build your own proxy using IFRAME and POST MESSAGE, see Cross-Window Messaging.

関連項目See also