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

iFrameの埋め込みに信頼済みオリジンを使用すると、信頼できるオリジンがOktaサインインページとOktaリソースを埋め込むことを許可できます。この方法は、x-frame-optionsに基づく［Customizations（カスタマイズ）］の現在のiFrameの埋め込みオプションよりも安全です。［Customizations（カスタマイズ）］オプションを使用すると、任意のリソースを任意のサイトに埋め込むことができます。一方、信頼済みオリジンを使用することで、信頼できるオリジンのみがリソースを埋め込めるようにすることができます。

仕組み

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

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

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

開始する前に

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

この手順を開始する

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

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

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

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

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

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

Admin Consoleから次の操作を行います。

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

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

  3. ［Add Origin（オリジンを追加）］のダイアログで、［Origin Name（オリジン名）］と［Origin URL（オリジンのURL）］を入力します。

  4. オリジンタイプとして［iFrame embed (origin)（iFrameの埋め込み（オリジン））］を選択します。

    ［Customizations（カスタマイズ）］でiFrameの埋め込みを有効にしている場合、これによってframe-ancestorsがreport-onlyのまま保持されます。

  5. ［Customizations（カスタマイズ）］でiFrameの埋め込みを無効にします。

    管理コンソールの警告メッセージに表示されているiFrame埋め込みリンクをクリックするか、［Customizations（カスタマイズ）］ > ［Other（その他）］ > ［iFrame Embedding（iFrame埋め込み）］に移動し、［Enable iFrame embedding（iFrame埋め込みを有効にする）］のチェックを外します。

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

これで、OktaサインインエクスペリエンスまたはOktaで保護されたリソースが、iFrameで有効になりました。

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

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

  2. ［Add Origin（オリジンを追加）］ダイアログに戻り、［Allows iFrame embedding of the Okta End-User Dashboard（Okta End-User DashboardのiFrameの埋め込みを許可）］ボックスをオンにします。

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

これで、iFrameでOkta End-User Dashboardが有効になりました。埋め込みダッシュボードをカスタマイズすることもできます。

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

  1. ［Customizations（カスタマイズ）］>［Other（その他）］>［Enable iFrame Embedding（iFrameの埋め込みを有効化）］で構成されたすべてのiFrameを特定します。

  2. 「1. OktaサインインページまたはOktaリソースをiFrameに埋め込む」で説明されているように、信頼済みオリジンを使用してこれらのiFrameを構成します。

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

  3. 見落としたオリジンがないか確認します。ブラウザーでCSP違反がないか、Oktaを介して埋め込んださまざまなリソースを手動で確認する必要があります。

  4. CSP違反を修正します。

  5. すべての信頼済みオリジンが適切に機能していることを確認したら、［Customizations（カスタマイズ）］>［Other（その他）］>［Enable iFrame Embedding（iFrameの埋め込みを有効化）］でiFrameの埋め込みのチェックを外します。これにより、すべての信頼済みオリジンが有効になります。

この機能を無効にする

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

よくある質問（FAQ）

信頼済みオリジンは、［Customizations（カスタマイズ）］のiFrameの埋め込みとどう違うのですか？

［Customizations（カスタマイズ）］のiFrameの埋め込みでは、x-frame-optionsを使用します。このオプションが有効になっていない場合、OktaはSAMEORIGINディレクティブを使用し、iFrameの埋め込みをOkta orgと同じオリジンに制限します。このオプションが有効になっている場合、OktaはSAMEORIGINヘッダーを送信しないため、どのオリジンでもOktaリソースをiFrameに埋め込むことができます。信頼済みオリジンはCSPのframe-ancestorsディレクティブを使用します。このディレクティブは、iFrameを使用してページを埋め込むことができる親ページを指定します。

orgで両方の種類の埋め込みが有効になっている場合はどうなりますか？

orgで［Customizations（カスタマイズ）］オプションと信頼済みオリジン方式の両方を使用してiFrameの埋め込みが有効になっている場合、Oktaは予防策としてCSPのframe-ancestorsをreport-onlyヘッダーで送信します。これは、［Customizations（カスタマイズ）］でiFrameの埋め込みを無効にしない限り、信頼済みオリジンを介して構成されたiFrameが監視モードのままになることを意味します。

iFrameをカスタマイズから信頼済みオリジンに切り替える前に知っておくべきことは何ですか？

テストorgで、信頼済みオリジンを使用してiFrameの埋め込みが必要なすべてのオリジンを構成します。［Customizations（カスタマイズ）］オプションを無効にし、新しく構成されたiFrameが正しく機能していることを確認します。次に、本番orgで同じ手順を繰り返します。

既知の問題

  • サードパーティーの統合URLは、サードパーティーのアプリで許可されていない場合、iFrameの埋め込みでは機能しません。たとえば、SalesforceインスタンスをOkta orgに統合したとします。SalesforceアプリでiFrameの埋め込みが許可されていない場合、信頼済みオリジンを使用してアプリをiFrameに埋め込むことはできません。

  • サードパーティーアプリは、iFrameの埋め込みもサポートしている必要があります。セッション管理にCookieを使用する場合、Chromeで動作するにはCookieにSecureとSameSite=Noneを指定する必要があります。

  • この機能が有効になっている場合、WebAuthn要素への登録またはWebAuthn要素を使用した確認は機能しません。orgドメインとは異なるドメインでiFrameをホストすると、WebAuthn認証が失敗します。これは、WebAuthnが異なるドメイン間での認証をブロックするように設計されているためです。orgドメインとは異なるドメインでiFrameを表示し、WebAuthn認証でユーザーを認証できるようにするには、iFrameコードのHTML属性を次の設定で編集します。

    <iframe src="..." allow="publickey-credentials-get *" />

    * はOkta以外のWebページのドメインです。

  • 組み込みの［End-User Dashboard］>［Settings（設定）］からオーセンティケーターに登録しているエンドユーザーは、iFrameの外部に誘導されます。登録はiFrameの外部で行われます。

  • 埋め込みアプリに独自のCSPがある場合は、frame-srcディレクティブでOkta orgを許可するようにCSPを適切に変更します。

  • ブラウザーがCSPをサポートしていない場合、デフォルトでx-frame-optionsになります。CSPをサポートしているかどうかについては、ブラウザーのドキュメントを参照してください。

  • 組み込みのOkta Access Gateway（OAG）リソースでx-frame-optionsがSAMEORIGINに設定されている場合、ユーザーが正常にサインインしても、リソースはiFrameに表示されません。

  • CSPヘッダーが欠落している場合、リソースはiFrameに正しく表示されません。

  • 信頼済みオリジンを追加しすぎると、HTTPヘッダーのサイズがNGINXなどのサーバーソフトウェアで許可されている制限を超える可能性があります。このような場合、デフォルトのサーバー制限を更新するか、Oktaの信頼済みオリジンの数を減らす必要があります。