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

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

仕組み

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

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サインインページまたはリソースをiFrameに埋め込む

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

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

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

これらの手順は、信頼済みオリジンを使用してiFrameに新しいページまたはリソースを埋め込むためのものです。既存のiFrameを［Customizations（カスタマイズ）］から信頼済みオリジンに移行する場合は、「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の埋め込みを無効にします。

    Admin Consoleの警告メッセージに表示されている［iFrame embedding（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サインインページまたはリソースを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. 信頼済みオリジンを使ってこれらのiFrameを構成します（「1. Oktaサインインページまたはリソースを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が使用されます。信頼済みオリジンはCSPのframe-ancestorsディレクティブを使用します。このディレクティブは、iFrameを使用してページを埋め込むことができる親ページを指定します。

  • 有効でない場合：OktaはSAMEORIGINディレクティブまたはCSPのframe-ancestorsを使用して、iFrameの埋め込みをOkta orgと同じオリジンに制限します。
  • 有効な場合：OktaはSAMEORIGINヘッダーを送信しません。どのオリジンでもOktaリソースを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が異なるドメイン間での認証をブロックするように設計されているためです。WebAuthn認証でユーザーを認証できるようにするには、iFrameコードのHTML属性を編集して次のように設定します。

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

    これは、orgドメインとは異なるドメイン内のiFrameを表示します。*は、Okta以外のWebページのドメインを表します。

  • 組み込みの［End-User Dashboard］［Settings（設定）］からAuthenticatorに登録しているエンドユーザーは、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の信頼済みオリジンの数を減らす必要があります。