Office アドインにおける同一生成元ポリシーの制限への対処

  • [アーティクル]

ブラウザーまたは Webview コントロールによって適用される同じ配信元ポリシーにより、あるドメインから読み込まれたスクリプトが別のドメインから Web ページのプロパティを取得または操作できなくなります。 つまり、既定で、要求された URL のドメインは現在の Web ページのドメインと同じである必要があります。 たとえば、このポリシーを適用すると、あるドメインの Web ページから、そのページがホストされているドメインとは別のドメインに対して XmlHttpRequest Web サービスを呼び出せません。

Office アドインは Webview コントロールでホストされるため、同じ配信元ポリシーが Web ページで実行されているスクリプトにも適用されます。

同一生成元ポリシーは、Web アプリケーションが複数のサブドメインに渡るコンテンツと API をホストしているときなど、多くの場合に不要な制約になることがあります。 同一生成元ポリシーの適用に関する制約を安全に解消するための一般的な手法がいくつかあります。 この記事では、その一部について簡単な紹介のみを示します。 ここに示したリンクを使用して、こうした手法の調査を開始してください。

匿名アクセスに JSONP を使用する

同一生成元ポリシーの制限を解消する 1 つの方法として、JSONP を使用して Web サービスのプロキシを提供します。 これを行うためには、任意のドメインでホストされているスクリプトを参照する src 属性を持つ script タグを使用します。 script タグをプログラムで作成し、src 属性で参照する URL を動的に作成すると、URI クエリ パラメーターを介してパラメーターを URL に渡すことができます。 Web サービス プロバイダーは、固有の URL で JavaScript コードを作成およびホストし、URI クエリ パラメーターに応じて異なるスクリプトを返します。 それらのスクリプトは挿入された場所で実行され、想定どおりに動作します。

次に、あらゆる Office アドインで機能する手法を使用する JSONP の例を示します。

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

トークン ベースの認証スキームを使用してサーバー側のコードを実装する

同一生成元ポリシーの制限に対処するもう 1 つの方法として、OAuth 2.0 フローを使用するサーバー側のコードを用意します。このコードによって、別のドメインでホストされているリソースへの許可されたアクセスを可能にします。

クロス オリジン リソース共有 (CORS) を使用する

クロスオリジン リソース共有の詳細については、Web で使用できる多くのリソース (クロスオリジン リソース共有 (CORS) など) を参照してください。

注:

イベント ベースのアクティブ化または統合されたスパム レポート (プレビュー) を実装する Outlook アドインで CORS を使用する方法については、「 イベントベースまたはスパムレポートの Outlook アドインでシングル サインオン (SSO) またはクロスオリジン リソース共有 (CORS) を使用する」を参照してください。

IFRAME と POST MESSAGE を使用して独自のプロキシを作成する (クロス ウィンドウ メッセージング)

IFRAME および POST MESSAGE を使用して独自のプロキシを作成する例については、「Cross-Window Messaging」を参照してください。

関連項目