＜iframe要素＞ - インラインフレーム

公開日: 2017/02/09

iframe要素は、別のウェブページを埋め込み表示するための要素です。

概要

名前

iframe (Inline frame)

カテゴリー

Flow content

Phrasing content

Embedded content

Interactive content

Palpable content

配置できる場所

Embedded contentが期待される場所。

コンテンツモデル

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLIFrameElement

デフォルトのスタイル

iframe {
	border-width: 2px;
	border-style: inset;
	border-color: initial;
	border-image: initial;
}

仕様書

https://html.spec.whatwg.org/multipage/embedded-content.html#the-iframe-element

属性

src

リソースのアドレス。

srcdoc

HTMLドキュメントを直接、記述して埋め込む。ブラウザがsrcdoc属性をサポートしていない場合、src属性のリソースが読み込まれる。

name

ブラウジングコンテキスト(iframeのウィンドウ)の名前。

sandbox

セキュリティ・ルール。空文字を指定するとインラインフレームの動作に最大限の制限がかかる。機能を表すキーワードを半角スペース( )で区切って任意の数だけ指定すると、そのキーワードの機能が使えるようになる。

allow-forms: フォームの実行を許可する。
allow-scripts: スクリプトの実行を許可する。
allow-modals: モーダルの実行を許可する。具体的には、window.alert()、window.confirm()、window.print()、window.prompt()の実行と、beforeunloadイベントの発火。
allow-same-origin: 埋め込まれたコンテンツがオリジンを持つことを許可する。このキーワードがない場合、埋め込まれたコンテンツのオリジンはnullとなり、同一オリジンポリシー関係の制限がかかる。
allow-popups: window.open、target=_blank、showModalDialogなどによってポップアップを開くことを許可する。
allow-top-navigation: 埋め込まれたブラウジングコンテキスト(window)が、最上位(祖先)のブラウジングコンテキストを操作することを許可する。具体的には、子ウィンドウのリンクで、親ウィンドウをリンク先に遷移させることができるようになる。
allow-popups-to-escape-sandbox: 通常、埋め込まれたブラウジングコンテキストにかけられたsandbox属性は、そこから新しいウィンドウで開いたブラウジングコンテキストにも継承される。しかし、このキーワードを追加すると、新しいウィンドウで開いたブラウジングコンテキストにはsandbox属性が継承されない。
allow-orientation-lock: ScreenOrientation APIによるスクリーンの向きの操作を許可する。
allow-pointer-lock: Pointer Lock APIの使用を実行する。

デモを見る

allowfullscreen

この属性を指定すると、iframeのコンテンツにrequestFullscreen()を使用できる。論理属性。

デモを見る

allowpaymentrequest

この属性を指定すると、iframeのコンテンツにPaymentRequest APIを使用できる。論理属性。

allowusermedia

この属性を指定すると、iframeのコンテンツにgetUserMedia()を使用できる。論理属性。

デモを見る

width

横幅。

height

高さ。

referrerpolicy

リソースにアクセスする際のリファラーポリシーをキーワードで指定する。Referrer Policiesを参考。

no-referrer: リファラーを送信しない。
no-referrer-when-downgrade: https接続以外ではリファラーを送信しない。
origin: スキーム、ホスト、ポートのみをリファラーに含める。パスは含めない。
origin-when-cross-origin: 異なるオリジンへのアクセスの場合だけ、リファラーにパスを含めない。
unsafe-url: https接続、http接続ともに、スキーム、ホスト、ポート、パスをリファラーに含める。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

URLで埋め込む

基本的には、img要素と同じで、src属性にリソースのアドレスを指定するだけです。

HTML

<iframe src="./iframe.html"></iframe>

デモを開く

コードで埋め込む

srcdoc属性にHTMLドキュメントを指定すると、それをそのまま埋め込み表示できます。ブラウザがsrcdoc属性に対応していない場合、src属性があれば、それが利用されます。

HTML

<iframe
	src="./iframe.html"
	srcdoc='
<!DOCTYPE>
<html>
	<head>
		<title>srcdoc属性で埋め込んだページ</title>
	</head>
<body>
	<p>HTMLを直接埋め込みました。</p>
</body>
</html>
'></iframe>

デモを開く

sandbox属性とは？

iframe要素は、デフォルトでは埋め込みコンテンツの操作に制限がありません。しかし、sandbox属性を付けると、この属性が対象とする全ての操作が制限されます。

HTML

<!-- 一切の制限がない -->
<iframe src="./iframe.html"></iframe>

<!-- 全ての操作に制限がかかる (下記は同じ内容) -->
<iframe src="./iframe.html" sandbox></iframe>
<iframe src="./iframe.html" sandbox=""></iframe>

値に、半角スペース( )で区切ってキーワードを指定すると、そのキーワードに紐づく操作がオプトイン形式で許可されます。

HTML

<!-- 全ての操作を許可しない -->
<iframe src="./iframe.html" sandbox=""></iframe>

<!-- JavaScriptだけを許可 -->
<iframe src="./iframe.html" sandbox="allow-scripts"></iframe>

<!-- JavaScriptとフォームを許可 -->
<iframe src="./iframe.html" sandbox="allow-scripts allow-forms"></iframe>

各キーワードがどのような操作を表すのか確認して下さい。ブラウザによっては対応していないキーワードがあります。その場合、キーワードを加えても加えなくても、その操作は禁止されません。

allow-forms

このキーワードを追加すると、form要素が有効になります。

HTML

<!-- キーワードあり -->
<iframe src="./iframe.html" sandbox="allow-forms"></iframe>

<!-- キーワードなし -->
<iframe src="./iframe.html" sandbox=""></iframe>

キーワードあり

キーワードなし

allow-scripts

このキーワードを追加すると、JavaScriptが有効になります。

HTML

<!-- キーワードあり -->
<iframe src="./iframe.html" sandbox="allow-scripts"></iframe>

<!-- キーワードなし -->
<iframe src="./iframe.html" sandbox=""></iframe>

キーワードあり

キーワードなし

allow-modals

このキーワードを追加すると、モーダルが有効になります。

HTML

<!-- キーワードあり -->
<iframe src="./iframe.html" sandbox="allow-scripts allow-modals"></iframe>

<!-- キーワードなし -->
<iframe src="./iframe.html" sandbox="allow-scripts"></iframe>

キーワードあり

キーワードなし

allow-popups

このキーワードを追加すると、新しいウィンドウを開けます。

HTML

<!-- キーワードあり -->
<iframe src="./iframe.html" sandbox="allow-popups"></iframe>

<!-- キーワードなし -->
<iframe src="./iframe.html" sandbox=""></iframe>

キーワードあり

キーワードなし

allow-top-navigation

このキーワードを追加すると、最上位の親ウィンドウを操作できます。具体的には、子ウィンドウのリンクで親ウィンドウをリンク先に遷移させることができます。

HTML

<!-- キーワードあり -->
<iframe src="./iframe.html" sandbox="allow-top-navigation"></iframe>

<!-- キーワードなし -->
<iframe src="./iframe.html" sandbox=""></iframe>

<!-- 親ウィンドウをリンク先に移動させる例 -->
<a href="./" target="_top"></a>

キーワードあり

キーワードなし

allow-same-origin

このキーワードを追加すると、埋め込みコンテンツがオリジンを持つことを許可します。デモでは、子ウィンドウからこの文字を赤くします。コンテンツがオリジンを持たない場合、同一オリジンポリシーの制限で別オリジンのコンテンツをJavaScriptで操作することができません。

HTML

<!-- キーワードあり -->
<iframe src="./iframe.html" sandbox="allow-scripts allow-same-origin"></iframe>

<!-- キーワードなし -->
<iframe src="./iframe.html" sandbox="allow-scripts"></iframe>

キーワードあり

キーワードなし

allow-popups-to-escape-sandbox

キーワードを追加すると、埋め込みコンテンツから新しく開かれたウィンドウにsandbox属性が継承されません。下記のインラインフレームにはいずれもJavaScriptを許可していません。その状態が引き継がれるか否かを確認して下さい。

HTML

<!-- キーワードあり -->
<iframe src="./iframe.html" sandbox="allow-popups allow-popups-to-escape-sandbox"></iframe>

<!-- キーワードなし -->
<iframe src="./iframe.html" sandbox="allow-popups"></iframe>

キーワードあり

キーワードなし

allow-orientation-lock

このキーワードを追加すると、端末の向きの操作を許可します。Screen APIに対応しているモバイルブラウザでご確認下さい。 Screen APIを利用するには、フルスクリーンにする必要があるので、allowfullscreen属性を忘れてはいけません。

HTML

<!-- キーワードあり -->
<iframe src="./iframe.html" allowfullscreen sandbox="allow-scripts allow-orientation-lock"></iframe>

<!-- キーワードなし -->
<iframe src="./iframe.html" allowfullscreen sandbox="allow-scripts"></iframe>

キーワードあり

キーワードなし

allow-pointer-lock

このキーワードを追加すると、Pointer Lock APIを使用できます。

HTML

<!-- キーワードあり -->
<iframe src="./iframe.html" sandbox="allow-scripts allow-pointer-lock"></iframe>

<!-- キーワードなし -->
<iframe src="./iframe.html" sandbox="allow-scripts"></iframe>

キーワードあり

キーワードなし

レスポンシブ対応

iframe要素をレスポンシブ対応にする例です。画面幅に応じて、アスペクト比を維持したまま拡大、縮小する仕組みです。

HTML

<div class="any-wrapper">

	<div class="iframe-container">
		<iframe src="./iframe.html" class="iframe-content"></iframe>
	</div>

</div>

CSS

/* コンテナ */
.any-wrapper {
	max-width: 600px ;	/* 横幅の調整 */
}

/* iframeの親要素 */
.iframe-container {
	width: 100% ;
	height: 0 ;
	padding-bottom: 56.25% ;	/* 高さの調整: 横幅に対するパーセンテージで指定 */
	position: relative ;
}

/* iframe要素 */
.iframe-content {
	position: absolute ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 100% ;
	box-sizing: border-box ;
}

Reload
Open

埋め込み表示の拒否

自分のウェブサイトが他人のウェブサイトに埋め込み表示されるのを防ぐには、レスポンスヘッダーのX-Frame-Optionsにキーワードを指定して下さい。SAMEORIGINは同じドメインだけが埋め込み表示するのを許可し、それ以外は拒否します。一方、DENYは例外なく埋め込み表示を拒否します。

HTTPのレスポンスヘッダー

X-Frame-Options: SAMEORIGIN
X-Frame-Options: DENY

具体的には、サーバーがApacheだったら、下記のどちらかを.htaccessに追加して下さい。

.htaccess

# 同じドメインには埋め込み表示をされていい場合
Header always append X-Frame-Options SAMEORIGIN

# 例外なく埋め込み表示を禁止する場合
Header always append X-Frame-Options DENY

または、PHPの場合は下記のどちらかを追加して下さい。

PHP

<?php
// 同じドメインには埋め込み表示をされていい場合
header( "X-Frame-Options: SAMEORIGIN" ) ;

// 例外なく埋め込み表示を禁止する場合
header( "X-Frame-Options: DENY" ) ;

拒否した場合

拒否しない場合

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜iframe要素＞ - インラインフレーム</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/iframe/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p><a href="./iframe.html" target="_blank">このページ</a>を埋め込み表示しています。</p>

<!-- 別ページを埋め込み表示する -->
<iframe src="./iframe.html"></iframe>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/633/"> <meta charset="utf-8"> <title>【デモ】＜iframe要素＞ - インラインフレーム</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/iframe/"> </head> <body>

<p><a href="./iframe.html" target="_blank">このページ</a>を埋め込み表示しています。</p>  <iframe src="./iframe.html"></iframe>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>