iframeの分析

ページはしばしば<iframe>要素内に多くのコンテンツを配置します：支払いフォーム、メディアプレーヤー、埋め込み地図、チャットやヘルプウィジェット、サードパーティコンポーネントなど。Axe Watcherは、ページの他の部分と同様に、同一オリジンのフレームのコンテンツも分析するため、フレーム内のコンテンツがカバレッジに欠けることはなく、独自のテストも必要ありません。

フレームの分析には設定が不要で、Watcherのフレーム処理は使用する言語やテストフレームワークに依存しません。axe-coreはページのフレームにロードされ、フレームからの結果はそれらを含むページ状態と共に分析されて報告されます。

フレーム結果の報告方法

フレーム内で発見された問題は、フレームを埋め込んでいるページのページ状態に帰属され、独自のページ状態には帰属しません。Axe Developer Hubでは、そのページ状態の他の問題とともに表示されます。

ある問題がフレームから発生したことを識別するものは、要素セレクターです。これはフレームネスティングの各レベルごとに1つのエントリと、その要素自体のセレクターを持ちます。2つのエントリを持つセレクターは、1つのフレーム内の要素を指します：最初のエントリが親ドキュメント内のフレームを見つけ、2番目のエントリがそのフレーム内のドキュメントの要素を見つけます。これにより、報告される要素はページ自身のHTMLに存在しない場合があります。外から内にセレクターを読んで、要素が実際にどこにあるかを見つけてください。

範囲と制限

• 同一オリジンのフレームが分析されます。 ページと同じオリジンから提供されるフレーム内の違反は、そのページの結果と共に報告され、フレーム名とその中の要素を示すセレクターによって特定されます。
• クロスオリジンのフレームは、許可しない限り分析されません。 Watcherはアプリケーションと共にブラウザ内で実行されるため、ブラウザの同一オリジンポリシーが適用されます。デフォルトでは、異なるオリジンから提供されるフレーム内のコンテンツは分析されず、違反も報告されません。Watcher 4.6.0以降では、以下に記載のallowedOriginsオプションによってオリジンごとにオプトインできます。
• フレームはページと共に分析され、別々に分析されません。 フレームのコンテンツは、それを埋め込むページの分析ごとにカバーされるので、コンテンツが変化するフレームは、結果として得られるページ状態の分析によって取り上げられます。
• フレームはページレベルの設定に従います。 Watcherが分析する対象を制御するスキャンの制御やURLの除外などのオプションは、ページ全体に適用され、そのフレームも含まれます。フレーム用の個別設定はありません。

クロスオリジンフレームの分析

Watcher 4.6.0では、名前を指定したオリジンから提供されるフレームのコンテンツを分析するためにallowedOriginsオプションを追加しました。JavaScript/TypeScriptの統合ではallowedOriginsをAxeConfigurationに設定するか、Java統合ではsetAllowedOrigins()をAxeWatcherOptionsで呼び出します。自分のオリジンは常に許可されるため、カバーしたい埋め込みオリジンのみをリストしてください：

axe: {
  allowedOrigins: [ 'https://pay.example.com' ]
}

有効にする前に知っておくべきポイント：

• ワイルドカードはサポートされていません。すべてのオリジンは明示的に指定する必要があり、Watcherが使用できないエントリは無視されるのではなく、エラーとして報告されます。
• リストに挙げた各オリジンは、埋め込んだページのマークアップを操作したり、読み取ることができます。テスト対象のページのコンテンツを信頼できるオリジンのみをリストしてください。
• 許可した各オリジンが、そのフレームのコンテンツをすべての分析に追加するため、分析が遅くなります。デフォルトのanalyzeおよびflushのタイムアウトは、このオプションが設定されると引き上げられます。
• 自動分析ではフレーム内で行われた変更を検出できないため、許可されたフレームは最上位ページの最後の変更時点で分析されます。フレーム内のコンテンツを操作した後にanalyze()を呼び出してください。

完全なエントリ形式と検証ルールについてはallowedOriginsリファレンスを参照してください。

関連トピック

• スキャンを制御
• ベストプラクティス