iframeとは何ですか？

なぜ文書の境界が重要なのか

iframeは、ブラウザが状態をどのように公開し、コンテンツをレンダリングし、自動化されたアクションが安全かどうかをどのように判断するかに影響を与えます。正確な定義は、チームが狭い信号を普遍的な回答として扱うのを防ぎます。また、期待されるブラウザの動作が文書化されたライフサイクル、API、またはシステム境界に結びついているため、テストの失敗を診断しやすくします。

ウェブ自動化において、実際の質問は常に「ページは準備ができていますか？」や「ブラウザはリアルに見えますか？」よりも狭いものです。次のステップでは、1つの制御を有効にする必要があったり、1つのフレームがナビゲーションを完了するのを待ったり、1つのコンポーネントが内部ツリーを接続するのを待ったり、1つのレンダリングサーフェスが一貫した状態を保つ必要があるかもしれません。以下のセクションでは、伝承に頼るのではなく、概念を観察可能なチェックに変換します。

iframeの定義

iframe（インラインフレーム）は、現在の文書内に別の文書を埋め込むHTML要素です。埋め込まれたコンテンツは、ウィンドウ、文書、URL、ナビゲーション履歴、およびライフサイクルを持つ独自の閲覧コンテキストを受け取ります。親ページは、子文書が表示される矩形の領域を制御します。

ルール: 1. 出力は翻訳されたテキストのみ — 説明や余計な囲いコードはありません。 2. Markdown/HTML構造（見出し、リスト、リンク、テーブル）をそのまま正確に保ちます。 3. プレースホルダートークンの@@CODEBLOCK_0@@や@@INLINECODE_0@@は、正確にそのままで保持します; 決して翻訳したり、順序を変えたり、マージしたり、書式を変更したりしません。 4. ```コードフェンスを追加したり削除したりせず、通常のテキストをコードブロックで囲んだりしません。 HTML標準のiframe定義 要素、そのコンテンツ属性、ナビゲーション動作、サンドボックスフラグ、読み込み、およびブラウジングコンテキストとの統合を指定します。子は親と同じオリジンであるか、完全に異なるオリジンから来ることができます。

一般的な使用例には、支払いフォーム、ビデオプレーヤー、地図、広告、サポートウィジェット、ドキュメンテーションプレビュー、および埋め込まれたアプリケーションが含まれます。分離は統合を簡素化し、ドキュメントを隔離できますが、通常のネストされたHTMLにはないセキュリティ、パフォーマンス、アクセシビリティ、および自動化に関する考慮事項も生じます。

別のブラウジングコンテキスト

iframe 要素は親 DOM に属していますが、その中に表示されるドキュメントはその DOM の通常のサブツリーにはなりません。子は独自のグローバルオブジェクトを持ち、独立してナビゲートできます。親と子のライフサイクルは異なる速度で進行することがあり、子は自身がネストされたフレームを含むこともできます。

同一オリジンのコンテンツでは、親スクリプトがプラットフォームAPIを通じて子ウィンドウとドキュメントにアクセスできます。クロスオリジンコンテンツの場合、同一オリジンポリシーは両方向の直接DOMアクセスをブロックします。ただし、両側が合意されたプロトコルを実装している場合、ドキュメントは制御されたクロスドキュメントメッセージングを通じて調整することができます。

テ MDN iframe 要素リファレンス ドキュメントの属性には、src、srcdoc、name、loading、referrerpolicy、allow、sandboxなどがあります。これらのコントロールは、何が読み込まれるか、いつ読み込まれるか、どの情報が送信されるか、そしてフレーム内のページがどのような機能を受け取るかに影響します。

同一起源ポリシーとメッセージング

同一オリジンの二つのドキュメントは、そのスキーム、ホスト、ポートがプラットフォームのオリジンルールに従って一致する場合です。同一オリジンのフレームは密接に協力できます。クロスオリジンのフレームは、お互いのDOM、クッキー、ストレージ、またはJavaScriptオブジェクトを自由に読み取ることができないため、他のサイト上でユーザーの認証されたコンテンツを検査できるようになります。

規則： 1. 出力は翻訳されたテキストのみ — 説明や余分なコードフェンスは不要です。 2. Markdown/HTMLの構造（見出し、リスト、リンク、テーブル）を正確に保持します。 3. @@CODEBLOCK_0@@ や @@INLINECODE_0@@ のようなプレースホルダトークンは、そのまま正確に保持します；決して翻訳したり、順序を入れ替えたり、統合したり、再フォーマットしたりしないでください。 4. ``` コードフェンスを追加したり削除したりせず、通常のテキストをコードブロックに囲むことはしないでください。 The MDN 同一オリジンポリシーガイド クロスオリジン・インタラクションの境界と限られたカテゴリを説明します。Window.postMessageは意図的なコミュニケーションチャネルを提供します。受信者は、任意のソースからメッセージを受け入れるのではなく、送信元のオリジンを確認し、メッセージ構造を検証する必要があります。

オリジンはサイトのブランディングや表示されるドメインテキストとは異なります。リダイレクトにより、フレームの最終オリジンが変更されることがあります。同一オリジンで始まるフレームは、後にクロスオリジンに移動することができ、直接アクセスが無効になります。自動化は現在のフレームのURLを調査し、ナビゲーションを状態の変化として扱うべきです。

サンドボックスと権限

sandbox属性は、フレーム内のコンテキストに制限されたフラグのセットを適用します。トークンがない場合、スクリプト、フォーム送信、ポップアップ、最上位のナビゲーション、ダウンロード、同一オリジンの処理を無効にすることができます。allowで始まるトークンは、機能を選択的に復元します。最小限のトークンセットは、デフォルトで全ての機能を付与するよりも安全です。

allow 属性と Permissions Policy は、カメラ、マイクロフォン、位置情報、全画面表示などの機能へのアクセスを制御します。これらの制御はサンドボックス機能を補完しますが、オリジンチェックやアプリケーション認証の代わりにはなりません。埋め込まれたサードパーティは、その機能に必要な能力のみを受け取るべきです。

危険な構成は、同一オリジンの埋め込まれたコンテンツがスクリプトの許可とサンドボックス内で復元された同一オリジンの扱いの両方を受けると発生する可能性があります。コンテキストによっては、フレーム化されたページが制限を削除または回避できる場合があります。セキュリティレビューでは、各属性を個別に読むのではなく、実際のオリジン、コンテンツコントロール、およびトークンの組み合わせを考慮する必要があります。

読み込み、パフォーマンス、アクセシビリティ

各iframeは、スクリプト、スタイル、画像、フォント、およびサブフレームを含む完全なドキュメントロードを開始できます。いくつかの埋め込みは、メモリ、CPU、およびネットワークコストを増加させます。loading属性はオフスクリーンフレームの読み込みを遅延させることができますが、レイジーローディングは、親の初期読み込みイベントが発火したときにそのコンテンツが存在しない可能性があることを意味します。

すべての意味のあるiframeには、埋め込まれたコンテンツが何を表しているかを支援技術のユーザーに伝える簡潔なタイトル属性が必要です。フレーム化された文書も独自のアクセシブルな構造を持つ必要があります。明確な戻り道なしに埋め込みにキーボードフォーカスを強制することを避け、境界をまたぐタブの順序をテストしてください。

レスポンシブサイズは、親がiframeボックスを制御し、子がそのコンテンツを制御するため、調整が必要です。クロスオリジンの子は、直接DOMアクセスを通じてドキュメントの高さを単純に公開することはできません。メッセージングプロトコルはサイズ変更を報告できますが、親はメッセージを検証し、レイアウトループを防ぐ必要があります。

iframe 自動化パターン

自動化は、URL、名前、タイトル、またはその所有するiframe要素などの安定したプロパティによってフレームを最初に特定します。その後、フレームスコープのロケータを作成し、そのブラウジングコンテキスト内を検索します。フレームに入らずに親ドキュメントから可視の子要素を選択すると、ノードが別のドキュメントに属しているため失敗します。

フレームが接続し、ナビゲートし、ターゲットコントロールをレンダリングするのを待ちます。親のDOMContentLoadedまたはloadイベントは、特にフレームがレイジーロードされる場合やクライアントサイドでデータフェッチを行う場合、子アプリケーションが準備完了であることを証明しません。フレーム内でターゲット条件を使用してください。

フレームはナビゲーション中に切り離され、置き換えられることがあります。ロケータを頑健に保ち、フレームオブジェクトを遷移中にキャッシュすることは避けてください、フレームワークがそのアイデンティティを保証しない限り。ネストされたフレームの場合、一度に一つの境界を横断してください。クロスオリジンフレームが直接ページスクリプトへのアクセスを拒否した場合でも、オートメーションフレームワークはブラウザーレベルのフレームプリミティブを通じて対話を行うことができ、ブラウザとサイトの通常のセキュリティモデルに従います。

フレームレベルチェックの選択

最小限の条件または構成から始めて、タスクが進行できることを証明します。標準に準拠したブラウザの動作を保持し、ワークフローが必要とする場合にのみプロファイル制御を追加します。ブラウザのビルドと関連する状態を記録して、後での違いを説明できるようにします。再現可能な観察は、ページ、フレーム、表示、またはフィンガープリントが単に「完了」または「安全」とされるという広範な主張よりもはるかに有用です。

• 次のアクションを定義します。 待機または設定ステップの後に、スクリプトまたはユーザーが何をする必要があるかを正確に示してください。
• 観測可能な信号を選択してください。 好ましいブラウザプロパティ、ライフサイクルステート、要素の条件、またはそのアクションを直接サポートするレンダリング結果。
• ルール: 1. 翻訳されたテキストのみを出力し、説明や余分なコードフェンスはありません。 2. Markdown/HTML構造（見出し、リスト、リンク、テーブル）を正確に保持します。 3. @@CODEBLOCK_0@@ や @@INLINECODE_0@@ のようなプレースホルダトークンはそのまま保持します。絶対に翻訳したり、順序を変更したり、統合したり、再フォーマットしたりしないでください。 4. ``` コードフェンスを追加したり削除したりせず、通常のテキストをコードブロックにラップしないでください。 関連する値を一貫性を保ってください。 ブラウザ、オペレーティングシステム、画面、ロケール、グラフィックス、およびセッション設定は、1つの現実的な環境を説明する必要があります。
• 通常のアプリケーション動作を検証します。 プライバシーまたは自動化の介入は、変更されるAPIまたはコンポーネントを静かに壊してはいけません。
• 診断証拠をキャプチャします。 チェックに失敗した場合は、関連するURL、状態、コンソールメッセージ、および設定名を保存します。

結論

iframeは、通常の子ノードの周りのスタイルが適用されたコンテナではなく、別の埋め込まれたドキュメントです。オリジンルール、サンドボックスフラグ、権限、独立した読み込み、およびアクセシビリティ要件がその動作を定義します。信頼できる自動化はフレームを明示的に選択し、そのコンテキスト内の状態を待ち、フレームが親から独立してナビゲートまたは切り離されることを期待します。

The Scrapeless Scraping Browser ドキュメント マネージド ブラウザ セッションがどのように設定されるかについて説明しますが、 スクレイピングブラウザー製品概要 ブラウザ自動化サーフェスについて説明します。これらのリソースは、承認されたワークフローでこの概念を適用するための製品コンテキストを提供します。

参照

• Scrapeless Scraping Browser 入門ドキュメント
• Scrapeless Scraping Browser 製品概要
• スクレイプレスブラウザ自動化統合ガイド
• GitHub上のスクラップレスオープンソースプロジェクト