次の方法で共有

iframe を使用して Power Pages サイトを別の Web サイトに埋め込む

Web ベース アプリケーションを使用する最も一般的な方法の 1 つは、Web アプリケーション機能を別の Web サイトに埋め込むことです。 通常、他の Web サイトはすでに存在しますが、その機能を強化し、Power Pages アプリケーションを介して表示されるデータを処理する新しい機能を追加したい場合があります。

このシナリオでは、Power Pages サイト機能を最初から構築するよりも、組み込む方が簡単です。 この記事では、iframe を使用して Power Pages アプリケーションを別の Web サイトに埋め込む手順について説明します。

ステップ 1. iframe のサイトを有効にする

新しい Power Pages サイトでは iframe がデフォルトで無効になっています。これは、Web サイトを外部に埋め込んで 「クリックジャッキング」攻撃 を試みることができないようにするためです。

  1. HTTP 応答ヘッダーを設定する。 Content-Security-Policy (CSP) frame-ancestors ディレクティブ (推奨)、または X-Frame-Options のどちらかを選ぶことができます。

    注意

    Content-Security-Policy frame-ancestors は X-Frame-Options に取って代わり、この記事で説明する方法です。

    1. HTTP ヘッダーの HTTP/Content-Security-Policy を有効にするようにサイト設定を設定します。 詳細: ポータルで HTTP ヘッダーを設定する

    2. CSP: frame-ancestors で説明されている構文に従って、値を設定します。

      たとえば、Web サイト www.contoso.com で iframe を使用して埋め込むことができる Power Pages サイトを有効にするには、設定は次のようになります:

      Content-Security-Policy: frame-ancestors 'self' <https://www.contoso.com>;

      注意

      'self' 文字列は重要です。これがないと、Power Pages サイトは独自のページを埋め込むことができません。これは、基本的なフォームのモーダル ポップアップ メニューなどのシナリオで一般的に必要です。

      ワイルドカード文字 (*) を使用するのではなく、iframe に Power Pages サイトを埋め込む機能を特定のサイトに制限することが重要です。

      CSPは、値がさまざまな要因 (スクリプトのロード元など) に依存する多数のディレクティブで構成されています。 この記事では、実装に固有の情報については説明していません。 ただし、最初に非運用サイトでこの設定をテストし、ブラウザー コンソールのエラーを調べて修正が必要な問題を特定し、設定を調整することをお勧めします。

  2. SameSite のデフォルトを、Power Pages サイト Cookie に対して None に設定します。

    Cookie 用の SameSite 属性は、クロスサイト リクエスト フォージェリ (CSRF) 攻撃からサイトを保護するのに役立ちます。 ただし、これは、サイトでユーザー認証が必要な場合や、フォームやリストなどの動的コンポーネントが含まれている場合などの状況でサイトを iframe に埋め込むことができないことも意味します。

    したがって、Power Pages サイトを iframe に埋め込むには、Power Pages サイトの SameSite Cookie 属性をデフォルトで None に変更する必要があります。 詳細: SameSite モードの変更

    注意

    SameSite Cookie を None とマークしても、Power Pages は CSRF 対策トークンを使用してこれらの攻撃を防止するため、Power Pages サイトが CSRF 攻撃に対して脆弱になることはありません。

ステップ 2. Power Pages サイトを埋め込む

前の手順を完了した後、Power Pages サイト エクスペリエンスを Web サイトに埋め込むには、HTML iframe タグ を使用し、必要に応じて、サイト全体または特定のページを埋め込みます。

Power Pages サイトのドメイン名は、サイトを iframe に埋め込むサイトのドメイン名の兄弟または子にすることをお勧めします。 たとえば、ルート Web サイトが www.contoso.com の場合、Power Pages サイト ドメイン名は portal.contoso.com とします。 これは、Power Pages サイトで使用される Cookie が、サード パーティの Cookie であり、ブラウザー (ブログ) によってブロックされるもの として分類されないようにするために重要です。 そうしないと、画像文字や、基本的/マルチステップ フォーム リダイレクトなどの機能が正しく機能しない可能性があります。 Power Pages サイトでカスタム ドメイン名を設定するには、カスタム ドメイン名を追加する にアクセスしてください。

ステップ 3. ヘッダーとフッターを設定する

埋め込まれた Power Pages サイト ページ上で、ヘッダーとフッターの表示方法—または表示するかどうか—を変更できます。

埋め込まれたサイト ヘッダーとフッターが表示されないようにする

Power Pages サイトを埋め込む親サイトには、すでにヘッダーとフッターがあるのが一般的です。 このような状況では、埋め込みサイトのヘッダーとフッターを表示したくない場合があります。 次のシナリオを検討してください。

  • Power Pages サイト全体が iframe に埋め込まれている場合
    それぞれのヘッダーとフッターの Web テンプレートを更新して、ヘッダーとフッターのコンテンツを削除します。

  • 特定の Power Pages サイト ページが iframe に埋め込まれている場合
    通常、特定のページを Web サイトに埋め込むときに、サイトのヘッダーまたはフッターを表示することは望ましくありません。 ただし、ユーザーがサイトに直接アクセスしたときには、ヘッダーとフッターを使用できるようにしておきたい場合があります。 これは、ページのコンテンツに基づいて動的にレンダリングするようにヘッダーとフッターを変更することで実現できます。

ヘッダーとフッターに条件付きコードを追加する

ヘッダーとフッターの Web テンプレートはとても柔軟なカスタマイズをサポートしているため、条件付きコードを追加して特定のプロパティをレンダリングできます。

たとえば、次のコードは、ページが検索ページ以外の場合、ヘッダーに検索バーを表示します。

重要

ヘッダーはすべてのページに共通の要素であるため、page.id はユーザーが開いた最初のページで、デフォルトでキャッシュされます。 したがって、これらの要素がキャッシュされることなく、常に現在のページに基づいて評価されるようにするため、このコードは代替タグを使用します。

{% substitution %}
{% assign current_page = page.id %}
{% assign sr_page = sitemarkers[Search].id %}
{% if current_page == sr_page %}
{% assign section_class = section-landing-search %}
<section class=page_section section-landing-{{ current_page }} {{ section_class | h }} color-inverse\>
    <div class=container\>
        <div class=row \>
            <div class=col-md-12 text-center\>
                {% if current_page == sr_page %}
                    <h1 class=section-landing-heading\>{% editable snippets 'Search/Title' default:resx["Discover_Contoso"] %}\</h1\>
                {% include 'Search' %}
                {% endif %}
            </div\>
        </div\>
    </div\>
</section\>
{% endif %}
{% endsubstitution %}

ヘッダーとフッターに条件付きコードを追加する代わりに、次の方法を検討することもできます。 ただし、どちらの方法にも制限があり、十分な機能をサポートしていないため、どちらもお勧めしません。

  • リストやフォームを含まない読み取り専用シナリオの場合は、テンプレートからヘッダーとフッターを無効にします。
  • 特別な書き換えテンプレートを使用します (~/Areas/Portal/Pages/Form.aspx)。

関連項目