このページの本文へ

サンプルで学ぶHTML5の仕様変更要素・後編 (2/3)

2012年10月12日 11時00分更新

文●浜 俊太朗/NHN Japan

  • この記事をはてなブックマークに追加
本文印刷

iframe要素

  • カテゴリー:フローコンテンツ、フレージングコンテンツ、エンベッディッドコンテンツ、インタラクティブコンテンツ、パルパブルコンテンツ
  • この要素が使える文脈:エンベッディッドコンテンツが予想される場所
  • コンテンツモデル:仕様書本文の要件に準拠したテキスト
  • コンテンツ属性:グローバル属性、src、srcdoc、name、sandbox、seamless、width、height

 iframe要素には、いくつかの属性が追加されました。

sandbox属性

 iframe要素は、他のWebサイトのコンテンツを読み込む場合があります。sandbox属性を指定すると、iframe要素で読み込むコンテンツが以下のように制限され、安全性が向上します。

  • ユニークなオリジンとして扱われ、同一オリジンで利用できる機能が無効になる
  • フォームが無効になる
  • スクリプトが無効になる
  • ポップアップが無効になる
  • リンクが他のブラウジング・コンテキスト※2をターゲットにできない(例えばリンクにtarget="_top"を指定しても動作しない)
  • embed要素、object要素、applet要素などによるプラグインが無効になる

 値を指定していないsandbox属性では、上記のすべての制限が適用されます。

<iframe src="http://example.com/plugin/embedded.html" sandbox></iframe>

 sandbox属性の値にキーワードを指定すると、制限の一部を解除できます。

allow-same-origin
iframe要素で読み込む先のコンテンツが、呼び出し元と同じオリジン扱いになる
allow-forms
フォームが有効になる
allow-scripts
スクリプトを有効にする
allow-top-navigation
リンクがトップレベル・ブラウジング・コンテキスト(iframeの呼び出し元)をターゲットできるようになる

 sandbox属性は、キーワード間に半角スペースを挟むことで複数の値を指定できます。例えば以下のように属性値を指定すると、フォームとスクリプトが有効になります。

<iframe src="http://example.com/plugin/embedded.html" sandbox="allow-forms allow-scripts"></iframe> 

 なお、allow-scriptsだけではポップアップは有効にならないため、WHATWG版の仕様書ではポップアップを有効にできる「allow-popups」という値も提案されています。

ポイント

ブラウジング・コンテキストとは、ドキュメント(文書)が表示される環境のことです。分かりやすく言うと、タブブラウザーの1つのタブが1つのブラウジング・コンテキストとなります。また、iframe要素によって定義されるフレームも、1つのブラウジング・コンテキストとなります。iframe要素の場合は特に、「ネスト(入れ子)されたブラウジング・コンテキスト」と呼ばれます。

ポイント

オリジンとは、スキーム/ホスト/ポートを組み合わせたもののことです。http://example.com:80/というオリジンで言うと、httpがスキーム、example.comがホスト、80がポートとなります。


seamless属性

 iframe要素にseamless属性を指定すると、iframeに読み込まれたコンテンツは親のブラウジング・コンテキスト(iframeの呼び出し元)と同じように扱われます。リンクをクリックすると親のブラウジング・コンテキストごと遷移しますし、CSSも適用されます。iframe要素の周囲に枠線などが表示されることもありません。

ポイント

seamless属性が指定されていても、リンクにtarget="_self"が指定されていた場合は、iframe要素の中で遷移します。

 具体的な使用例としては、ナビゲーションなど、サイト内で共通化できる部分を別のHTMLファイルに抜き出して、各ページから呼び出して使うケースが想定されます。

<nav><iframe src="/include/nav.html" seamless="seamless"></iframe></nav>

 seamless属性を使用するには、呼び出し元のブランジング・コンテキストと読み込み先のブラウジング・コンテキストのオリジンが同じである必要があります。

 なお、sandbox属性とseamless属性を同時に指定し、さらに入れ子にしたiframe要素ではseamless属性は使えません。

ポイント

2012年10月現在、seamless属性を実装しているブラウザーはほとんどありません。手軽に試すには、WebKit Nightly Buildsを利用するとよいでしょう。http://nightly.webkit.org/からダウンロードができます。


srcdoc属性

 iframe要素は、src属性に指定されたパスのファイル(コンテンツ)をページに組み込みますが、新たに登場したsrcdoc属性を使うと、属性値にコンテンツを直接記述できます。

 属性値にはHTMLのソースコードを記述します。srcdoc属性を指定する場合は、sandbox属性を合わせて指定し、ソースコード中の引用符(")やアンパサンド(&)はエスケープする必要があります。

 以下のサンプルは、ブログ記事へのコメントを想定したものです。sandbox属性が指定されることで、投稿されたコメントの安全性が増しています。

<h3>この記事へのコメント</h3>
<article>
 <footer>
  <h4>by hamashun</h4>
  <time>2012-08-31</time>
 </footer>
 <iframe srcdoc="<p class=&quot;srcSample&quot;>なるほど。それで言うと、HTML5 &amp;amp; CSS3 が良さそうですね。</p>" seamless="seamless" sandbox></iframe> 
</article>

ポイント

src属性とsrcdoc属性の両方が指定されている場合は、srcdoc属性が優先されます。これによって、srcdoc属性に対応していないブラウザー向けのフォールバックを提供できます。

ポイント

「srcdoc属性には、DOCTYPEやhtml要素は書かなくてよいの?」と思われた方もいるかもしれません。仕様書では、srcdoc属性の値は、以下の順番に従った構文でなければならないとされています。

1:任意の数のコメントとスペース

2:DOCTYPE(オプション)

3:任意の数のコメントとスペース

4:html要素

5:任意の数のコメントとスペース

一見すると、上記のソースコードには、4のhtml要素が抜けているように思えますが、HTML5ではhtml要素の省略が許可されているので問題ありません。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く