iframe要素の中身にタグを書くのはもう止めよう

HTML 4.01 Transitional のDTDでは、iframe要素の中身は (%flow;)* と定義されており、仕様書のサンプルコード(www.w3.org)にあるように、フレーム未対応環境向けにリソースへのリンクを提示するといったことが可能でした。

例えば次のようなHTMLをフレーム無効な環境で閲覧すると、「example.com」というアンカーが表示される…ことが期待されていました。

<p>
<iframe src="http://example.com/">
<a href="http://example.com/">example.com</a>
</iframe>
</p>

ところが、HTML5ではコンテンツモデルがテキストに変更(www.w3.org)され、さらにXML文書の場合は空でなければならないとされました。つまり、先のようなコードは <a href="http://example.com/">example.com</a> という文字列がそのまま表示されるようになり、これはHTML4以前との後方互換性がないことを意味しています。

Opera 12.1

HTML(text/html)の場合

2011年12月にリリースされた11.60でHTML5パーサーを導入した(www.opera.com)ため、iframe要素の中身がテキストとして解釈されます。

そのため、iframe要素の中身にaやscriptなどのタグが書かれていると文字列として表示されてしまいます。試しにOperaのNews Portal(portal.opera.com)をJavaScript有効、インラインフレーム無効の設定で見ると、こんな感じになります。

オリジナル画像
図1Operaの News Portal トップページ(右上部分)

トップページ右上に広告エリアがあるのですが、iframe要素内のソースコードがそのまま表示されています。Opera社が運営するサイトをOperaで閲覧してこの有様はいいのか…。

ちなみに、普段インラインフレームを無効にしている私の経験からすると、このような状態になっているサイトには頻繁に遭遇します。いちばん困るのが、文字がフレーム領域からはみ出て、肝心のコンテンツが読めないケースがあることです。サイトの更新運用に携わっていても、フレームを無効にしてチェックするということはまずないでしょうから、運営側が気づかないのも無理はないと思いますが…。

ちなみにiframeだけでなくnoframes要素についても同様の事象があります。

XHTML(application/xhtml+xml)の場合

先ほど書いたように、HTML5でXML文書の場合はiframeの中身を空にしなければならないのですが、仕様に反して中身を書いた場合、以前のようにタグを解釈します。つまり従来どおりリンクを貼ったり、スクリプトを実行することが(Operaに限っては)可能なわけです。

Firefox 20

about:config を覗いてみると、 browser.frames.enabled という項目があります。これを false に変更するとフレームが無効になるのですが、単純にiframe要素を無視してしまうのか、中身に書かれたテキストは表示されず、CSSで border や width, height などを指定していても無かったかのように描画されます。

HTMLでもXHTMLでも同じ結果でした。

Chrome や IE

これらのブラウザでフレームを無効にするやり方が分からないので検証していません。