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

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

「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） > iFrameの埋め込みを有効化（Enable iFrame Embedding）の下の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）とオリジンのURL（Origin URL）を入力します。

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

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

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

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

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

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

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

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

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