オリジン間の iframe 録画

Session Replay Browser SDKは、クロスオリジン<iframe>要素内のDOM変更をキャプチャし、それを親ページのリプレイストリームにマージすることができます。親ページと各子iframeページの両方が、crossOriginIframes.enabled: trueを使用してSDKを読み込む必要があります。

この資料では、設定、プライバシーの動作、制限事項、およびトラブルシューティングについて説明します。

仕組み

親ページでクロスオリジンの iframe 録画を有効にすると、SDK は:

1. DOMに追加された<iframe>要素を監視します。
2. postMessage経由でstart信号とstop信号を子フレームに送信します。
3. 子のrrwebイベントを親のリプレイストリームにリレーするため、リプレイビューアは単一のセッションから両方のフレームを再構築できます。

子SDKは、iframe内で実行されることを検出し、記録を開始する前に親からの開始信号を待ちます。

セットアップ

Session Replay SDKを親ページとキャプチャしたい各子iframeページの両方に読み込みます。

親ページ

import * as sessionReplay from "@amplitude/session-replay-browser";
sessionReplay.init("API_KEY", {
  deviceId: "DEVICE_ID",
  sessionId: SESSION_ID,
  sampleRate: 1,
  crossOriginIframes: {
    enabled: true,
    coordinateChildren: true,
  },
});

Browser SDKプラグインを使用している場合は、同じオプションをsessionReplay.plugin()に渡してください：

import * as amplitude from "@amplitude/analytics-browser";
import { sessionReplayPlugin } from "@amplitude/plugin-session-replay-browser";
const replay = sessionReplayPlugin({
  crossOriginIframes: {
    enabled: true,
    coordinateChildren: true,
  },
});
amplitude.add(replay);
amplitude.init("API_KEY", { deviceId: "DEVICE_ID" });

子iframeページ

親と同じapiKey、deviceIdおよびsessionIdでSDKを初期化します。クロスオリジンiframeを有効にしますが、子フレームにはcoordinateChildrenを設定しません。

import * as sessionReplay from "@amplitude/session-replay-browser";
sessionReplay.init("API_KEY", {
  deviceId: "DEVICE_ID",
  sessionId: SESSION_ID,
  sampleRate: 1,
  crossOriginIframes: { enabled: true },
});

iframesrcを設定するときに、sessionIdおよびdeviceIdをiframe URLクエリ文字列を通して子に渡します。

設定オプション

プライバシー

子ページのrrwebインスタンスは独自のDOMシリアライゼーションを実行します。親のプライバシー設定（マスクレベル、ブロックセレクターなど）は、iframe内に自動的に適用されません。各子ページでプライバシー設定を個別に構成します。

制限事項

• サードパーティ製のiframe（Stripe、Googleマップ、YouTubeなど）はキャプチャできません。コントロールできるのは、セッションリプレイ SDK をインストールするページのみです。
• **coordinateChildren: false**は親コーディネーターをオプトアウトします。このモードでは、子の SDK はライフサイクルを直接管理するまで録画を開始しません。
• 同じオリジンのiframeはクロスオリジン設定を必要としませんが、両方のページでcrossOriginIframesを有効にすることは引き続き可能です。

設定を検証する

1. crossOriginIframes.enabled: trueにより、親ページと各子ページがSession Replay SDKを読み込むことを確認します。
2. 両方のページで同じapiKey、deviceId、およびsessionIdを使用してください。
3. 親SDKの初期化後に、子のiframeを追加するか移動します。
4. iframe内でやり取りし、Amplitudeのリプレイビューアでセッションを開きます。

ローカルクロスオリジンテストの場合、異なるオリジン（異なるポートまたはホスト名）から親と子にサービスを提供します。パブリックHTTPSの親は、混在コンテンツとブラウザーのローカルネットワークアクセス制限のため、http://localhost子を埋め込むことはできません。

トラブルシューティング

ライブページ内のiframeが空白になる

リプレイビューアでiframeが空白です

関連ドキュメント

• Session Replay Browser SDKプラグイン
• Session Replay Standalone SDK
• セッションリプレイ取り込みモニター