iframe要素のsrcとsandbox

<iframe>要素は、現在のページ内に別のHTMLドキュメントを埋め込みます。各iframeには独自のブラウジングコンテキスト、DOM、JavaScriptスコープがあります。iframe内のコンテンツは、明示的な許可がない限り親ページのDOMにアクセスできません。

埋め込むURLをsrc属性に設定します。<iframe src="https://example.com" width="800" height="600">。iframeは新しいブラウジングコンテキストを作成します。アクセシビリティのためにtitle属性が必須です。title="Embedded map"。

sandboxはiframe内のコンテンツに制限を適用します。デフォルトでは、スクリプト、フォーム、ポップアップ、プラグインが無効になります。機能を復元するには、必要な権限を個別に追加します。sandbox="allow-scripts allow-same-origin"。

allow-scripts：JavaScriptを有効にします。allow-same-origin：iframeを同一オリジンとして扱えるようにします（localStorageへのアクセスに必要です）。allow-forms：フォーム送信を有効にします。allow-popups：window.open()を許可します。必要最小限の権限だけを付与してください。

クロスオリジンのiframeは親ページのDOMにアクセスできません。parent.documentはセキュリティエラーをスローします。クロスオリジンのフレーム間の通信にはpostMessageを使用します。iframe.contentWindow.postMessage(data, origin)。

親ページからiframeへメッセージを送信します。iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com")。iframe側では、window.addEventListener("message", handler)でリッスンします。処理する前に、必ずevent.originを検証してください。

iframeにloading="lazy"を設定すると、ビューポートの近くに来るまで読み込みを遅延させ、ページの初期読み込みを軽くできます。ページ下部にある地図、動画の埋め込み、ソーシャルメディアウィジェットなど、すぐには表示されないコンテンツに便利です。

各iframeは、HTMLドキュメント、CSS、JavaScript、アセットを個別に読み込むため、大きなリソースコストがかかります。スニペットとして埋め込めるコンテンツには、iframeを使用しないでください。画面下部にあるiframeは遅延読み込みしてください。ファサードパターン（プレースホルダーを表示し、クリック時に読み込む方法）も検討してください。

iframeのスクロール動作を制御します。scrolling="no"はスクロールバーを無効にします（非推奨です。iframeにCSSのoverflow: hiddenを使用してください）。現在の一般的な方法は、iframeの高さをコンテンツの高さに合わせ、内部スクロールバーを不要にすることです。

allow属性は、iframeにPermissions Policyの機能を許可します。allow="camera; microphone; fullscreen"と指定すると、親オリジンでこれらの機能を使用していない場合でも、iframeからカメラ、マイク、Fullscreen APIへのアクセスを要求できるようになります。

YouTubeとGoogle Mapsはiframeの埋め込みコードを提供しています。これらには、fullscreenとautoplayのallow属性が含まれています。スクリーンリーダーのアクセシビリティのため、必ずtitle="Video title"を追加してください。通常、サードパーティの埋め込みコードにsandbox属性は追加されません。セキュリティに関する指針は、それぞれのドキュメントを確認してください。

値を指定しない場合、sandbox属性はiframeに対してデフォルトで何を行いますか。

iframeは、外部ドキュメントを分離されたブラウジングコンテキストに埋め込みます。sandbox属性はiframeの機能を制限するため、必要最小限の権限だけを許可してください。postMessageを使用すると、安全なクロスオリジン通信が可能になります。遅延読み込みを使用すると、画面下部にあるiframeのリソースコストを後回しにできます。allow属性は、信頼できるサードパーティの埋め込みにPermissions Policyの機能を許可します。