From 6fc8dfd06b90f11779b155778683e1ce928f6ed0 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 15 Sep 2024 15:07:41 +0900
Subject: [PATCH] =?UTF-8?q?2024/08/20=20=E6=99=82=E7=82=B9=E3=81=AE?=
 =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/html/element/iframe/index.md | 186 ++++++++++++++++------
 1 file changed, 141 insertions(+), 45 deletions(-)

diff --git a/files/ja/web/html/element/iframe/index.md b/files/ja/web/html/element/iframe/index.md
index b129210b258915..ea84cf9638f7d9 100644
--- a/files/ja/web/html/element/iframe/index.md
+++ b/files/ja/web/html/element/iframe/index.md
@@ -2,7 +2,7 @@
 title: "<iframe>: インラインフレーム要素"
 slug: Web/HTML/Element/iframe
 l10n:
-  sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c
+  sourceCommit: f98675af9d0a80f33d7875c48cfdb41f71ed1de9
 ---
 
 {{HTMLSidebar}}
@@ -14,7 +14,7 @@ l10n:
 それぞれの閲覧コンテキストにはそれぞれの[文書](/ja/docs/Web/API/Document)があり、URL ナビゲーションができます。それぞれの埋め込み閲覧コンテキストのナビゲーションは、最上位の閲覧コンテキストの[セッション履歴](/ja/docs/Web/API/History)で直線化されます。他の閲覧コンテキストを埋め込んでいる閲覧コンテキストは、_親閲覧コンテキスト_ と呼ばれます。_最上位_ の閲覧コンテキスト（親を持たないもの）は、通常はブラウザーのウィンドウで、 {{domxref("Window")}} オブジェクトで表されます。
 
 > [!WARNING]
-> それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で `<iframe>` を使用するごとに、必要となるメモリやその他の計算リソースが増加します。理論的には好きなだけ `<iframe>` を使用することができますが、パフォーマンスの問題を確認してください。
+> それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で `<iframe>` を使用するごとに、必要となるメモリーやその他の計算リソースが増加します。理論的には好きなだけ `<iframe>` を使用することができますが、パフォーマンスの問題を確認してください。
 
 ## 属性
 
@@ -24,6 +24,8 @@ l10n:
 
   - : [権限ポリシー](/ja/docs/Web/HTTP/Permissions_Policy)を `<iframe>` に指定します。このポリシーは、 `<iframe>` が利用可能な機能（例：マイク、カメラ、バッテリー、ウェブ共有 API へのアクセスなど）をリクエストのオリジンに基づいて定義します。
 
+    その例は、`Permissions-Policy` のトピックの [iframes](/ja/docs/Web/HTTP/Headers/Permissions-Policy#iframes) を参照してください。
+
     > **メモ:** `allow` 属性で指定された権限ポリシーは {{httpheader("Permissions-Policy")}} ヘッダーで指定されたポリシーの上に、さらに制限を実装するものです。それはそれを置き換えるものではありません。
 
 - `allowfullscreen`
@@ -33,14 +35,18 @@ l10n:
     > [!NOTE]
     > この属性は古い属性とみなされており、 `allow="fullscreen"` として再定義されました。
 
-- `allowpaymentrequest` {{Experimental_Inline}}
+- `allowpaymentrequest` {{deprecated_inline}} {{non-standard_inline}}
 
-  - : 異なるオリジンの `<iframe>` で [支払いリクエスト API](/ja/docs/Web/API/Payment_Request_API) の実行を許可する場合は `true` に設定します。
+  - : 異なるオリジンの `<iframe>` で [決済リクエスト API](/ja/docs/Web/API/Payment_Request_API) の実行を許可する場合は `true` に設定します。
 
     > [!NOTE]
     > この属性は古い属性とみなされており、 `allow="payment"` として再定義されました。
 
-- `credentialless` {{Experimental_Inline}} {{Non-standard_Inline}}
+- `browsingtopics` {{Experimental_Inline}} {{non-standard_inline}}
+
+  - : 論理属性で、表示されている場合、現在のユーザーの選択されたトピックを `<iframe>` のソースのリクエストと共に送信することを指定します。詳細は、[トピック API の使用](/ja/docs/Web/API/Topics_API/Using)を参照してください。
+
+- `credentialless` {{Experimental_Inline}}
 
   - : `true` に設定すると `<iframe>` を無信頼であることを示します。 つまり、そのコンテンツは新しい、一時的なコンテキストで読み込まれることになります。これはそのオリジンに関連するネットワーク、クッキー、ストレージデータへのアクセス権がありません。最上位の文書の存続期間に依存する新しいコンテキストを使用します。その代わりに {{httpheader("Cross-Origin-Embedder-Policy")}} (COEP) 埋め込みルールは解除され、COEP を設定した文書はそうでない第三者の文書を埋め込むことができるようになります。詳しくは[無信頼の iframe](/ja/docs/Web/Security/IFrame_credentialless) を参照してください。
 
@@ -54,8 +60,17 @@ l10n:
 
   - : ブラウザーが iframe をどのように読み込むかを示します。
 
-    - `eager`: 可視ビューポートの外にあるかどうかに関わらず、 iframe を直ちにロードします（これが既定値です）。
-    - `lazy`: ブラウザーで定義されたビューポートからの計算された距離に達するまで iframe の読み込みを延期します。
+    - `eager`
+      - : 可視ビューポートの外にあるかどうかに関わらず、 iframe を直ちにロードします（これが既定値です）。
+    - `lazy`
+
+      - : ブラウザーで定義された{{glossary("visual viewport", "ビューポート")}}からの計算された距離に達するまで iframe の読み込みを延期します。
+        その目的は、ブラウザーがフレームを使用すると合理的に確信できるまで、フレームの取得に必要なネットワークとストレージの帯域幅を使用しないようにすることです。
+        これにより、ほとんどの典型的な使用用途において、特に初期ページの読み込み時点が縮小され、パフォーマンスとコストが改善されます。
+
+        > [!NOTE]
+        > JavaScript が有効な場合のみ、読み込みが遅延されます。
+        > これはトラッキング対策です。
 
 - `name`
   - : 埋め込み閲覧コンテキストのターゲットの名前です。 {{HTMLElement("a")}}, {{HTMLElement("form")}}, {{HTMLElement("base")}} 要素における `target` 属性の値、 {{HTMLElement("input")}} や {{HTMLElement("button")}} 要素における `formtarget` 属性の値、 {{domxref("Window.open()","window.open()")}} メソッドの `windowName` 引数の値として使用することができます。
@@ -63,45 +78,76 @@ l10n:
 
   - : フレームのリソースにアクセスする際にどの[リファラー](/ja/docs/Web/API/Document/referrer)を送信するかを示します。
 
-    - `no-referrer`: {{HTTPHeader("Referer")}} ヘッダーを送信しません。
-    - `no-referrer-when-downgrade`: {{HTTPHeader("Referer")}} ヘッダーは {{Glossary("TLS")}} ({{Glossary("HTTPS")}}) のない{{Glossary("origin", "オリジン")}}には送信しません。
-    - `origin`: 送信するリファラーを、参照しているページのオリジン（[スキーム](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL), {{Glossary("host", "ホスト名")}}, {{Glossary("port", "ポート番号")}}）に限定します。
-    - `origin-when-cross-origin`: 他のオリジンへ送信されるリファラーは、スキーム、ホスト名、ポート番号のみにします。同一オリジンへの移動では、パスも含めます。
-    - `same-origin`: リファラーは{{Glossary("Same-origin policy", "同じオリジン")}}には送信しますが、異なるオリジンへのリクエストにはリファラー情報を送信しません。
-    - `strict-origin`: プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信しますが、宛先の安全性が劣る場合 (HTTPS→HTTP) には送信しません。
-    - `strict-origin-when-cross-origin`: 同一オリジンへのリクエストには URL 全体を送信し、プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信し、宛先の安全性が劣る場合 (HTTPS→HTTP) にはヘッダーを送信しません。
-    - `unsafe-url`: リファラーにオリジン*および*パスを含めます (ただし、[フラグメント](/ja/docs/Web/API/HTMLAnchorElement/hash)、[パスワード](/ja/docs/Web/API/HTMLAnchorElement/password)、[ユーザー名](/ja/docs/Web/API/HTMLAnchorElement/username)は含めません)。オリジンやパスの情報が TLS で保護されたリソースから安全性の劣るオリジンへ漏えいしますので、**これは安全ではありません**。
+    - `no-referrer`
+      - : {{HTTPHeader("Referer")}} ヘッダーを送信しません。
+    - `no-referrer-when-downgrade`
+      - : {{HTTPHeader("Referer")}} ヘッダーは {{Glossary("TLS")}} ({{Glossary("HTTPS")}}) のない{{Glossary("origin", "オリジン")}}には送信しません。
+    - `origin`
+      - : 送信するリファラーを、参照しているページのオリジン（[スキーム](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL), {{Glossary("host", "ホスト名")}}, {{Glossary("port", "ポート番号")}}）に限定します。
+    - `origin-when-cross-origin`
+      - : 他のオリジンへ送信されるリファラーは、スキーム、ホスト名、ポート番号のみにします。同一オリジンへの移動では、パスも含めます。
+    - `same-origin`
+      - : リファラーは{{Glossary("Same-origin policy", "同じオリジン")}}には送信しますが、異なるオリジンへのリクエストにはリファラー情報を送信しません。
+    - `strict-origin`
+      - : プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信しますが、宛先の安全性が劣る場合 (HTTPS→HTTP) には送信しません。
+    - `strict-origin-when-cross-origin`
+      - : 同一オリジンへのリクエストには URL 全体を送信し、プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信し、宛先の安全性が劣る場合 (HTTPS→HTTP) にはヘッダーを送信しません。
+    - `unsafe-url`
+      - : リファラーにオリジン*および*パスを含めます（ただし、[フラグメント](/ja/docs/Web/API/HTMLAnchorElement/hash)、[パスワード](/ja/docs/Web/API/HTMLAnchorElement/password)、[ユーザー名](/ja/docs/Web/API/HTMLAnchorElement/username)は含めません）。オリジンやパスの情報が TLS で保護されたリソースから安全性の劣るオリジンへ漏えいしますので、**これは安全ではありません**。
 
 - `sandbox`
 
   - : `<iframe>` に埋め込まれたコンテンツに適用される制限を制御します。フレーム内のコンテンツに追加の制約を適用します。この属性の値は、空にするとすべての制約を適用し、空白区切りのトークンにすると特定の制約を外します。
 
-    - `allow-downloads`: [download](/ja/docs/Web/HTML/Element/a#download) 属性を持つ {{HTMLElement("a")}} または {{HTMLElement("area")}} 要素を通して、またファイルのダウンロードにつながるナビゲーションを通してファイルのダウンロードを可能にします。これは、ユーザーがリンクをクリックしたか、JS コードがユーザーとの対話なしに開始したかに関係なく、動作します。
-    - `allow-downloads-without-user-activation` {{experimental_inline}}: ユーザーの操作なしでダウンロードが発生することを許可します。
-    - `allow-forms`: ページがフォームを送信することを許可します。このキーワードを使用しない場合、フォームは通常通り表示されますが、フォームを送信しても入力の検証、ウェブサーバへのデータ送信、ダイアログの終了が行われません。
-    - `allow-modals`: ページが {{domxref("Window.alert()")}}, {{domxref("Window.confirm()")}}, {{domxref("Window.print()")}}, {{domxref("Window.prompt()")}} によってモーダルウィンドウを開くことができるようにしますが、 {{HTMLElement("dialog")}} は、このキーワードに関わらず開くことが可能です。また、ページが {{domxref("BeforeUnloadEvent")}} イベントを受信することができるようにもします。
-    - `allow-orientation-lock`: リソースが[画面の方向をロック](/ja/docs/Web/API/Screen/lockOrientation)することができるようにします。
-    - `allow-pointer-lock`: リソースが[ポインターロック API](/ja/docs/WebAPI/Pointer_Lock) を使用できるようにします。
-    - `allow-popups`: ポップアップを許可します（{{domxref("Window.open()")}}, `target="_blank"`, {{domxref("Window.showModalDialog()")}} などから）。このキーワードが使用されていない場合、その機能は静かに失敗します。
-    - `allow-popups-to-escape-sandbox`: サンドボックス化された文書が、サンドボックスを継承するウィンドウではないウィンドウを開けるようにします。例えば、これによって安全に広告をサンドボックス化し、同じ制約を広告のリンク先のページに強制しないようにすることができます。
-    - `allow-presentation`: リソースが[プレゼンテーションセッション](/ja/docs/Web/API/PresentationRequest)を開始できるようにします。
-    - `allow-same-origin`: このトークンが使用されていない場合、リソースは{{Glossary("same-origin policy", "同一オリジンポリシー")}}に常に失敗する特別なオリジンからのものとして扱われます（潜在的に[データストレージやクッキー](/ja/docs/Web/Security/Same-origin_policy#オリジンをまたいだデータストレージアクセス)へのアクセスや一部の JavaScript API の使用を阻止することがあります）。
-    - `allow-scripts`: ページがスクリプトを実行することを許可します（ただし、ポップアップウィンドウは作成しません）。このキーワードが使用されない場合、この操作は許可されません。
-    - `allow-storage-access-by-user-activation` {{experimental_inline}}: `<iframe>` で読み込んだ文書が{{domxref("Storage Access API", "ストレージアクセス API", "", "nocode")}} を使用して、分離されていないクッキーへのアクセスをリクエストできるようにします。
-    - `allow-top-navigation`: リソースが最上位の閲覧コンテキスト（`_top` という名前のもの
-      に移動できるようにします。
-    - `allow-top-navigation-by-user-activation`: リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザーの操作によって開始されたものに限ります。
-    - `allow-top-navigation-to-custom-protocols`: ブラウザーに組み込まれている、または[ウェブサイトによって登録された](/ja/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers) `http` 以外のプロトコルへのナビゲーションを可能にします。この機能は `allow-popups` や `allow-top-navigation` キーワードでも有効になります。
+    - `allow-downloads`
+      - : [download](/ja/docs/Web/HTML/Element/a#download) 属性を持つ {{HTMLElement("a")}} または {{HTMLElement("area")}} 要素を通して、またファイルのダウンロードにつながるナビゲーションを通してファイルのダウンロードを可能にします。これは、ユーザーがリンクをクリックしたか、JS コードがユーザーとの対話なしに開始したかに関係なく、動作します。
+    - `allow-forms`
+      - : ページがフォームを送信することを許可します。このキーワードを使用しない場合、フォームは通常通り表示されますが、フォームを送信しても入力の検証、ウェブサーバーへのデータ送信、ダイアログの終了が行われません。
+    - `allow-modals`
+      - : ページが {{domxref("Window.alert()")}}, {{domxref("Window.confirm()")}}, {{domxref("Window.print()")}}, {{domxref("Window.prompt()")}} によってモーダルウィンドウを開くことができるようにしますが、 {{HTMLElement("dialog")}} は、このキーワードに関わらず開くことが可能です。また、ページが {{domxref("BeforeUnloadEvent")}} イベントを受信することができるようにもします。
+    - `allow-orientation-lock`
+      - : リソースが[画面の方向をロック](/ja/docs/Web/API/Screen/lockOrientation)することができるようにします。
+    - `allow-pointer-lock`
+      - : リソースが[ポインターロック API](/ja/docs/WebAPI/Pointer_Lock) を使用できるようにします。
+    - `allow-popups`
+      - : ポップアップを許可します（{{domxref("Window.open()")}}, `target="_blank"`, {{domxref("Window.showModalDialog()")}} などから）。このキーワードが使用されていない場合、その機能は静かに失敗します。
+    - `allow-popups-to-escape-sandbox`
+      - : サンドボックス化された文書が、サンドボックス化フラグを強制することなく、新しい閲覧コンテキストを開くことができるようにします。これにより、例えばサードパーティ広告を、その広告がリンクしているページに同じ制限を強いることなく、安全にサンドボックス化することができます。このフラグが記載されていない場合、リダイレクトされたページ、ポップアップウィンドウ、新しいタブは元の `<iframe>` と同じサンドボックスの制限を受けることになります。
+    - `allow-presentation`
+      - : リソースが[プレゼンテーションセッション](/ja/docs/Web/API/PresentationRequest)を開始できるようにします。
+    - `allow-same-origin`
+      - : このトークンが使用されていない場合、リソースは{{Glossary("same-origin policy", "同一オリジンポリシー")}}に常に失敗する特別なオリジンからのものとして扱われます（潜在的に[データストレージやクッキー](/ja/docs/Web/Security/Same-origin_policy#オリジンをまたいだデータストレージアクセス)へのアクセスや一部の JavaScript API の使用を阻止することがあります）。
+    - `allow-scripts`
+      - : ページがスクリプトを実行することを許可します（ただし、ポップアップウィンドウは作成しません）。このキーワードが使用されない場合、この操作は許可されません。
+    - `allow-storage-access-by-user-activation` {{experimental_inline}}
+      - : `<iframe>` で読み込んだ文書が{{domxref("Storage Access API", "ストレージアクセス API", "", "nocode")}} を使用して、分離されていないクッキーへのアクセスをリクエストできるようにします。
+    - `allow-top-navigation`
+      - : リソースが最上位の閲覧コンテキスト（`_top` という名前のものに移動できるようにします。
+    - `allow-top-navigation-by-user-activation`
+      - : リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザーの操作によって開始されたものに限ります。
+    - `allow-top-navigation-to-custom-protocols`
+      - : ブラウザーに組み込まれている、または[ウェブサイトによって登録された](/ja/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers) `http` 以外のプロトコルへのナビゲーションを可能にします。この機能は `allow-popups` や `allow-top-navigation` キーワードでも有効になります。
 
     > [!NOTE]
     >
     > - 埋め込まれた文書のオリジンが埋め込み先のページと同じである場合、 `allow-scripts` と `allow-same-origin` を同時に使用すると、埋め込まれた文書から `sandbox` 属性を削除することができるようになるため、**絶対に避けるべき**です。 `sandbox` 属性をまったく使用しないよりも安全ではなくなります。
     > - 攻撃者がサンドボックス化した `iframe` の外側にコンテンツを表示することができる場合、サンドボックス化は無意味です。例えば、閲覧者がフレームを新しいタブで開く場合などです。潜在的なダメージを抑えるため、そうしたコンテンツは*別のオリジン*から提供するようにもしてください。
 
+    > [!NOTE]
+    > ユーザーをリダイレクトするとき、ポップアップウィンドウを開くとき、または `sandbox` 属性を持つ `<iframe>` 内に埋め込まれたページから新しいタブを開くとき、新しい閲覧コンテキストは同じ `sandbox` の制限に従います。例えば、`sandbox="allow-forms"`または`sandbox="allow-popups-to-escape-sandbox"` 属性が設定されていない`<iframe>`内に埋め込まれたページが別個のタブで新しいサイトを開いた場合、その新しい閲覧コンテキストでのフォーム送信は静かに失敗します。
+
 - `src`
+
   - : 埋め込むページの URL です。[同一オリジンポリシー](/ja/docs/Web/Security/Same-origin_policy#オリジンの継承)に従う空白ページを埋め込む場合は、 `about:blank` の値を使用してください。また、プログラムから `<iframe>` の src 属性を削除すると (例えば {{domxref("Element.removeAttribute()")}} などで)、 Firefox (バージョン 65 以降)、 Chromium ベースのブラウザー、 Safari/iOS では `about:blank` が読み込まれます。
+
+    > **メモ:** `about:blank` ページは、アンカーリンクなどの相対 URL を解決するときに、埋め込み文書の URL をベース URL として使用します。
+
 - `srcdoc`
-  - : 埋め込むインライン HTML で、 `src` 属性を上書きします。ブラウザーが `srcdoc` 属性に対応していない場合は、 `src` 属性の URL で代替されます。
+
+  - : 埋め込むインライン HTML で、 `src` 属性を上書きします。そのコンテンツは完全な HTML 文書の構文に従う必要があります。この構文には doctype ディレクティブ、`<html>`、`<body>` タグなどが含まれますが、そのほとんどは省略して body のコンテンツだけにすることができます。この文書は位置が `about:srcdoc` となります。ブラウザーが `srcdoc` 属性に対応していない場合は、 `src` 属性の URL で代替されます。
+
+    > **メモ:** `about:srcdoc` ページは、アンカーリンクなどの相対 URL を解決するときに、埋め込み文書の URL をベース URL として使用します。
+
 - `width`
   - : フレームの幅を CSS ピクセル数で示します。既定値は `300` です。
 
@@ -123,13 +169,16 @@ l10n:
 
   - : ブラウザーがフレームにスクロールバーを表示することを示します。
 
-    - `auto`: フレームの内容が、フレームの寸法よりも大きい場合のみ。
-    - `yes`: 常にスクロールバーを表示する。
-    - `no`: スクロールバーを一切表示しない。
+    - `auto`
+      - : フレームの内容が、フレームの寸法よりも大きい場合のみ。
+    - `yes`
+      - : 常にスクロールバーを表示する。
+    - `no`
+      - : スクロールバーを一切表示しない。
 
 ## スクリプト操作
 
-インラインフレームは、 {{HTMLElement("frame")}} 要素のように {{domxref("window.frames")}} 擬似配列に入ります。
+インラインフレームは、{{HTMLElement("frame")}} 要素のように {{domxref("window.frames")}} 擬似配列に入ります。
 
 DOM の {{domxref("HTMLIFrameElement")}} オブジェクトでは、スクリプトはフレーム化されたリソースの {{domxref("window")}} オブジェクトに {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} プロパティを使ってアクセスすることができます。 {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} プロパティは `iframe` の内側の `document` 要素を参照します (`contentWindow.document` と等価です)。
 
@@ -139,13 +188,31 @@ DOM の {{domxref("HTMLIFrameElement")}} オブジェクトでは、スクリプ
 
 ## 位置指定と表示倍率
 
-[置換要素](/ja/docs/Web/CSS/Replaced_element)なので、 `<iframe>` 要素のボックス内における埋め込み文書の位置、配置、表示倍率は、 {{cssxref("object-position")}} および {{cssxref("object-fit")}} プロパティで設定することができます。
+[置換要素](/ja/docs/Web/CSS/Replaced_element)なので、 `<iframe>` 要素のボックス内における埋め込み文書の位置は、 {{cssxref("object-position")}} プロパティで設定することができます。
+
+> **メモ:** {{cssxref("object-fit")}} プロパティは、`<iframe>` 要素には効果がありません。
+
+## `error` および `load` イベントの動作
+
+`<iframe>` で発生する `error` イベントと `load` イベントを使用すると、ローカルネットワークの HTTP サーバの URL 空間を推測することができる可能性があります。そのため、セキュリティ対策として、ユーザーエージェントは `<iframe>` に対して [error](/ja/docs/Web/API/HTMLElement/error_event) イベントを発生させず、`<iframe>` のコンテンツの読み込みに失敗しても、常に [load](/ja/docs/Web/API/HTMLElement/load_event) イベントが発生します。
+
+## アクセシビリティ
+
+読み上げソフトのような支援技術を利用して操作している人は、 `<iframe>` 上の [`title` 属性](/ja/docs/Web/HTML/Global_attributes/title)を使用して内容をラベル付けします。 title の値で埋め込みコンテンツを正確に説明してください。
+
+```html
+<iframe
+  title="Wikipedia page for Avocados"
+  src="https://en.wikipedia.org/wiki/Avocado"></iframe>
+```
+
+この title がないと、埋め込みコンテンツが何であるかを特定するために `<iframe>` の内容に移動しなければならなります。このコンテキストの移動は、特に複数の `<iframe>` が存在するページや、動画や音楽などの対話型コンテンツが埋め込まれているページでは、混乱を招き、時間のかかる作業になる可能性があります。
 
 ## 例
 
 ### シンプルな \<iframe>
 
-この例では、<https://example.org> のページを `<iframe>` で埋め込みます。
+この例では、<https://example.org> のページを `<iframe>` で埋め込みます。これは iframe の一般的な用途で、他のサイトのコンテンツを埋め込むことです。例えば、ライブサンプル自体も、一番上の[試してみましょう](#試してみましょう)の例も、他の MDN サイトのコンテンツを `<iframe>` で埋め込んでいます。
 
 #### HTML
 
@@ -162,17 +229,45 @@ DOM の {{domxref("HTMLIFrameElement")}} オブジェクトでは、スクリプ
 
 {{ EmbedLiveSample('A_simple_iframe', 640,400)}}
 
-## アクセシビリティの考慮
+### \<iframe> 内へのソースコードの埋め込み
 
-読み上げソフトのような支援技術を利用して操作している人は、 `<iframe>` 上の [`title` 属性](/ja/docs/Web/HTML/Global_attributes/title)を使用して内容をラベル付けします。 title の値で埋め込みコンテンツを正確に説明してください。
+この例では、iframe 内のソースコードを直接レンダリングしています。これは `sandbox` 属性と組み合わせることで、ユーザー生成コンテンツを表示する際にスクリプトインジェクションを防ぐテクニックとして使用することができます。
 
-```html
-<iframe
-  title="Wikipedia page for Avocados"
-  src="https://en.wikipedia.org/wiki/Avocado"></iframe>
+`srcdoc` を使用する場合、埋め込みコンテンツ内の相対 URL は埋め込みページの URL からの相対 URL で解決することに注意してください。埋め込みコンテンツ内の場所を指すアンカーリンクを使用したい場合は、ベース URL として `about:srcdoc` を明示的に指定する必要があります。
+
+#### HTML
+
+```html-nolint
+<article>
+  <footer>9 分前の <i>jc</i> の投稿</footer>
+  <iframe
+    sandbox
+    srcdoc="<p><code>iframe</code> 要素を使用する方法は 2 つあります。</p>
+<ol>
+<li><a href=&quot;about:srcdoc#embed_another&quot;>他のページからコンテンツを埋め込む</a></li>
+<li><a href=&quot;about:srcdoc#embed_user&quot;>ユーザーが生成したコンテンツを埋め込む</a></li>
+</ol>
+<h2 id=&quot;embed_another&quot;>他のページからコンテンツを埋め込む</h2>
+<p><code>src</code> 属性を使用して、埋め込むページの URL　を指定します。</p>
+<pre><code>&amp;lt;iframe src=&quot;https://example.org&quot;&amp;gt;&amp;lt;/iframe&amp;gt;</code></pre>
+<h2 id=&quot;embed_user&quot;>ユーザーが生成したコンテンツを埋め込む</h2>
+<p><code>srcdoc</code> 属性を使用して、埋め込むコンテンツを指定します。この投稿がすでにその例です。</p>
+"
+    width="500"
+    height="250"
+></iframe>
+</article>
 ```
 
-この title がないと、埋め込みコンテンツが何であるかを特定するために `<iframe>` の内容に移動しなければならなります。このコンテキストの移動は、特に複数の `<iframe>` が存在するページや、動画や音楽などの対話型コンテンツが埋め込まれているページでは、混乱を招き、時間のかかる作業になる可能性があります。
+`srcdoc` を使用する際のエスケープシーケンスの書き方を説明します。
+
+- 最初に、通常の HTML 文書内でエスケープするようなもの（`<`、`>`、`&`など）をエスケープして HTML を書き出します。
+- `srcdoc` 属性では `&lt;` と `<` は全く同じ文字を表します。したがって、HTML 文書内の実際のエスケープシーケンスにするには、アンパサンド (`&`) を`&amp;`に置き換えます。例えば、`&lt;` は `&amp;lt;`になり、`&amp;` は `&amp;amp;` になります。
+- 二重引用符 (`"`) を `&quot;` に置き換えて `srcdoc` 属性が早期に終了しないようにします（ `'` を使用する場合は `'` を `&apos;` に置き換えてください）。この段階は前回の後に行われるので、この段階で生成された `&quot;` は `&amp;quot;` にはなりません。
+
+#### 結果
+
+{{ EmbedLiveSample('Embedding_source_code_in_an_iframe', 640, 300)}}
 
 ## 技術的概要
 
@@ -236,4 +331,5 @@ DOM の {{domxref("HTMLIFrameElement")}} オブジェクトでは、スクリプ
 
 ## 関連情報
 
+- [CSP: frame-ancestors](/ja/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)
 - [プライバシー、アクセス制限、情報セキュリティ](/ja/docs/Web/Privacy)