← カテゴリ一覧に戻る

iframe

iframe

別のHTMLドキュメントを現在のページに埋め込む要素。 地図・動画プレーヤー・決済フォームなど外部コンテンツの埋め込みに広く使用される。sandbox 属性でセキュリティを制御できる。

srcdoc 属性デモ（インライン HTML）

srcdoc 属性でインラインHTMLを直接埋め込める。外部URLなしでiframeをデモできる。

↑ この iframe は srcdoc 属性で描画されています（外部URLなし）

<iframe
  title="コンテンツの説明"
  srcdoc="<h1>Hello</h1><p>インラインHTML</p>"
  width="600"
  height="200"
  sandbox="allow-same-origin"
></iframe>

主要属性

src

埋め込むページのURL。srcdoc と排他的に使用する。

srcdoc

インラインHTMLを直接指定する。src より優先される。

title

アクセシビリティのために必須。スクリーンリーダーがコンテンツの目的を読み上げる。

width / height

表示サイズ（px）。CLS 防止のため指定推奨。

sandbox

セキュリティ制限を適用する。値を指定しない場合は最も制限が強い状態になる。

loading="lazy"

ビューポート外の iframe を遅延読み込みする。Chrome 77+。

referrerpolicy

リクエスト時に送信するリファラー情報を制御する。

allow

Feature Policy を指定。カメラ・マイク・fullscreen などの権限を制御する。

コード例

<!-- 基本的な iframe -->
<iframe
  src="https://example.com"
  title="Example ページ"
  width="800"
  height="450"
  loading="lazy"
  referrerpolicy="no-referrer"
></iframe>

<!-- sandbox で制限（最小権限の原則）-->
<iframe
  src="https://example.com/widget"
  title="ウィジェット"
  sandbox="allow-scripts allow-same-origin"
  width="400"
  height="200"
  loading="lazy"
></iframe>

<!-- 動画埋め込み（YouTube 形式）-->
<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="動画タイトル"
  width="560"
  height="315"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
></iframe>

<!-- srcdoc によるインライン埋め込み -->
<iframe
  title="インラインコンテンツ"
  srcdoc="<p style='padding:16px'>Hello from srcdoc!</p>"
  width="400"
  height="100"
  sandbox
></iframe>

sandbox 属性の値一覧

sandbox を値なしで指定すると全制限が有効。必要な権限のみホワイトリスト方式で追加する。

値許可される動作
allow-scriptsJavaScript の実行を許可
allow-same-origin同一オリジンとして扱う（Cookie・ストレージへのアクセス）
allow-formsフォームの送信を許可
allow-popupswindow.open() などによるポップアップを許可
allow-top-navigationトップレベルブラウジングコンテキストへのナビゲーションを許可
allow-top-navigation-by-user-activationユーザー操作によるトップナビゲーションのみ許可
allow-downloadsファイルのダウンロードを許可
allow-modalsalert / confirm / prompt を許可
allow-orientation-lock画面の向きロックを許可
allow-pointer-lockPointer Lock API を許可
allow-presentationPresentation API を許可
注意：allow-scripts と allow-same-origin を同時に指定すると、 iframe 内のスクリプトが sandbox を解除できてしまうため推奨されない。

referrerpolicy 属性

no-referrer

リファラーを一切送信しない

no-referrer-when-downgrade

HTTPS→HTTP の場合のみ送信しない（デフォルト）

origin

オリジン部分のみ送信（パス・クエリなし）

strict-origin-when-cross-origin

同一オリジンは全体、クロスオリジンはオリジンのみ送信（推奨）

same-origin

同一オリジンの場合のみリファラーを送信

unsafe-url

常にフルURLを送信（安全でない）

比較：iframe vs embed vs object（歴史的文脈）

要素主な用途現在の推奨備考
iframe外部ページ・ウィジェット埋め込み推奨（現役）sandbox / CSP で安全に使える
embedプラグインコンテンツ（Flash など）非推奨（Flash 廃止後）PDF 表示など限定的な用途のみ
object外部リソース（Flash・Java アプレット）ほぼ非推奨プラグイン依存のため現代では不要

Tips: セキュリティとアクセシビリティ

  • title 属性は必須：スクリーンリーダーがiframeの目的を読み上げるために必要。省略するとアクセシビリティ違反になる。
  • sandbox を常に使用：信頼できないコンテンツには必ず sandbox を指定し、必要最小限の権限だけ付与する。
  • loading="lazy" で帯域節約：ファーストビュー外の iframe には loading="lazy" を指定してページの初期読み込みを高速化する。
  • X-Frame-Options / CSP：自分のサイトが外部からiframeで埋め込まれないようにするには、サーバーで X-Frame-Options: SAMEORIGIN または CSP の frame-ancestors を設定する。
  • youtube-nocookie.com：YouTube を埋め込む際は youtube-nocookie.com を使用するとCookieなしで埋め込め、プライバシーに配慮できる。

🤖 AIプロンプトテンプレート

以下の要件を満たす、`<iframe>` を使ったインラインフレーム埋め込みのHTML・CSSサンプルを作成してください。

- Google マップや YouTube など外部コンテンツの埋め込み例を示すこと
- `title` 属性を必ず付与してアクセシビリティを確保すること
- `loading="lazy"` によるパフォーマンス最適化を実装すること
- `sandbox` 属性を使ったセキュリティ制限の使い方を説明すること
- レスポンシブな iframe（アスペクト比固定）のCSSテクニックを実装すること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo