iFrameの埋め込み用の信頼済みオリジン

信頼済みオリジンを利用することで、OktaサインインページやOktaの保護対象リソースなどのサイトを信頼できるオリジンに埋め込むことができます。これにより、信頼できないサイトにサイトが埋め込まれるのを防止できます。これは、リソースを任意のサイトに埋め込む［Customizations（カスタマイズ）］の［iFrame Embedding（iFrameの埋め込み）］オプションよりも安全です。

「iFrameの埋め込み用の信頼済みオリジンに関するよくある質問」を参照してください。

仕組み

信頼済みオリジンは、コンテンツセキュリティポリシー（CSP）のframe-ancestorsディレクティブを使用します。frame-ancestorsディレクティブは、iFrameを使ってページを埋め込むことができる親ページを指定します。信頼済みオリジンを使用すると、OktaがCSPヘッダーのframe-ancestorsディレクティブで返すオリジンを構成できます。

CSPのframe-ancestorsディレクティブが適用されるかどうかは、ユーザーのブラウザーによって決まります。iFrameの埋め込みはx-frame-optionsに基づきます。CSPのframe-ancestorsディレクティブをサポートするブラウザーは、このディレクティブの適用を強制し、x-frame-optionsより優先します。CSPとx-frame-optionsがない場合、誰でも任意のサイトにリソースを埋め込むことができます。x-frame-optionsがSAMEORIGINに設定されている場合、リソースはページ自体と同じオリジンのフレームにのみ表示できます。

この機能を無効にすると、既存のiFrameが壊れる可能性があります。OktaサインインページまたはOktaリソースをiFrameに埋め込んだページにアクセスすることで、iFrameが適切に機能していることを確認します。

開発者向けドキュメントについては、「Trusted Origins API」を参照してください。

開始する前に

iFrameの埋め込み用の信頼済みオリジンは、［Customizations（カスタマイズ）］［Other（その他）］［Enable iFrame Embedding（iFrameの埋め込みを有効化）］の下のiFrame埋め込みが使用されていない場合にのみ機能します。最初に必要なすべての信頼済みオリジンを埋め込んでから、［Customizations（カスタマイズ）］オプションを有効にしている場合は無効にすることをお勧めします。これにより、既存のiFrameを誤って破損することがなくなります。

この手順を開始する

新しい信頼済みオリジンを作成するか、既存のiFrameを信頼済みオリジンに移行できます。

OktaサインインページまたはリソースをiFrameに埋め込む

Okta End-User DashboardをiFrameに埋め込む

［Customizations（カスタマイズ）］のiFrameから信頼済みオリジンに移行する

OktaサインインページまたはリソースをiFrameに埋め込む

これらの手順は、信頼済みオリジンを使用してOktaサインインページまたはOktaの保護対象リソースをiFrameに埋め込むためのものです。既存のiFrameを［Customizations（カスタマイズ）］から信頼済みオリジンに移行するときは、「［Customizations（カスタマイズ）］のiFrameから信頼済みオリジンに移行する」を参照してください。

  1. Admin Consoleで［Security（セキュリティ）］ ［API］［Trusted Origins（信頼済みオリジン）］に移動します。

  2. ［Add Origin（オリジンを追加）］をクリックします。

  3. 各フィールドに［Origin Name（オリジン名）］と［Origin URL（オリジンのURL）］を入力します。

  4. オリジンタイプとして［iFrame embed (origin)（iFrameの埋め込み（オリジン））］を選択します。［Customizations（カスタマイズ）］でiFrameの埋め込みを有効にしている場合、これによってframe-ancestorsがreport-onlyのまま保持されます。

  5. 次のいずれかの方法で［Customizations（カスタマイズ）］のiFrameの埋め込みを無効にします。
    • Admin Consoleの警告メッセージに表示される［iFrame embedding（iFrameの埋め込み）］リンクをクリックします。
    • ［Customizations（カスタマイズ）］［Other（その他）］［iFrame embedding（iFrameの埋め込み）］に移動し、［Enable iFrame Embedding（iFrameの埋め込みを有効化）］のチェックを外します。

  6. ［Add Origin（オリジンを追加）］ダイアログの［Save（保存）］をクリックします。

Okta End-User DashboardをiFrameに埋め込む

  1. 「OktaサインインページまたはリソースをiFrameに埋め込む」の手順1～5を実行します。

  2. ［Add Origin（オリジンを追加）］ダイアログの［Allows iFrame embedding of the Okta End-User Dashboard（Okta End-User DashboardのiFrameの埋め込みを許可）］オプションを選択します。

  3. ［Save（保存）］をクリックします。

［Customizations（カスタマイズ）］のiFrameから信頼済みオリジンに移行する

  1. ［Customizations（カスタマイズ）］［Other（その他）］［iFrame embedding（iFrameの埋め込み）］に移動し、すべてのiFrameを特定します。
  2. 「OktaサインインページまたはOktaリソースをiFrameに埋め込む」で説明されているように、信頼済みオリジンを使ってこれらのiFrameを構成します。

    ［Customizations（カスタマイズ）］のiFrameの埋め込みはまだ無効にしないでください。これにより、frame-ancestorsがreport-onlyのまま保持されるため、新しいiFrameを稼働する前に想定どおりに動作していることを確認できます。

  3. 見落としたオリジンがないか確認します。Oktaを通じて埋め込んだリソースにCSP違反がないか、ブラウザーで手動でチェックします。
  4. CSP違反を修正し、すべての信頼済みオリジンが正常に機能するようにします。
  5. ［Customizations（カスタマイズ）］［Other（その他）］［Enable iFrame Embedding（iFrameの埋め込みを有効化）］に移動し、iFrameの埋め込みのチェックを外します。これで信頼済みオリジンが有効になります。