717.txt

* [CODE(HTMLe)@en[iframe]] 要素 (HTML)

[7] [[HTML]] の [DFN[[CODE(HTMLe)[iframe]] 要素型]]の要素は、
文章中に[[フレーム]]を挿入します。

[8] 仕様書:
- [[HTML 4]]
-- 16.5 Inline frames: the [CODE(HTMLe)[IFRAME]] element
<IW:HTML4:"present/frames.html#idx-frame-7">

[9] 
:状態:[[W3C]] [[勧告]]、[[WHATWG]] [[勧告案]]
:[[局所名]]:[CODE(HTMLe)[[[iframe]]]]
([Q@en[inline frame]] ([Q[行内フレーム]]) より)
:[[名前空間URI]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]]
:[[開始タグ]]:必須
:[[終了タグ]]:必須
:出現できる文脈:[CODE(SGML)[%[[inline]]]] な文脈
:[[内容模型]]:[CODE(SGML)[(%[[flow]])*]]
:[[属性]]:
,属性名	,属性値	,既定値	,説明	,状態	,出典
,[CODE(HTMLa)[[[align]]]]	,[CODE(SGML)[%[[IAlign]]]]	,	,配置	,[HTML 4] 非推奨
,[CODE(HTMLa)@en[[[allowcrossdomainxhr]]]],,,非標準,[[Air]]
,[CODE(HTMLa)[[[allowtransparency]]]]	,	,	,背景透明性	,非標準
,[CODE(HTMLa)@en[[[application]]]],[CODE(HTML)@en[[[on]]]] | [CODE(HTMLe)@en[[[off]]]],,,非標準,[[HTA]]
,[CODE(HTMLa)[[[border]]]]	,	,	,境界線	,非標準
,[CODE(HTMLa)[[[bordercolor]]]]	,[CODE(SGML)[%[[Color]]]]	,	,境界線色	,非標準
,[CODE(HTMLa)[[[class]]]]	,	,(なし)	,級	,[HTML 4] [CODE(SGML)[%[[coreattrs]]]]
,[CODE(HTMLa)[[[datafld]]]]	,	,	,データ欄	,非標準
,[CODE(HTMLa)[[[datasrc]]]]	,[CODE(SGML)[%[[URI]]]]	,	,データ源	,非標準
,[CODE(HTMLa)@en[[[documentroot]]]],,,非標準,[[Air]]
,[CODE(HTMLa)[[[frameborder]]]]	,	,[CODE(HTML)[1]]	,枠線	,[HTML 4]
,[CODE(HTMLa)[[[height]]]]	,[CODE(SGML)[%[[Length]]]]	,	,フレームの高さ	,[HTML 4]
,[CODE(HTMLa)[[[hspace]]]]	,	,	,横余白	,非標準
,[CODE(HTMLa)[[[id]]]]	,[CODE(SGML)[[[ID]]]]	,(なし)	,固有識別子	,[HTML 4] [CODE(SGML)[%coreattrs]]
,[CODE(HTMLa)[[[longdesc]]]]	,[CODE(SGML)[%[[URI]]]]	,(なし)	,長い説明へのリンク	,[HTML 4]
,[CODE(HTMLa)[[[marginheight]]]]	,[CODE(SGML)[%[[Pixels]]]]	,	,余白高さ	,[HTML 4]
,[CODE(HTMLa)[[[marginwidth]]]]	,[CODE(SGML)[%[[Pixels]]]]	,	,余白幅	,[HTML 4]
,[CODE(HTMLa)[[[name]]]]	,	,(なし)	,フレーム名	,[HTML 4]
,[CODE(HTMLa)@en[[[ondominitialize]]]],,,非標準,[[Air]]
,[CODE(HTMLa)@en[[[sandboxroot]]]],,,非標準,[[Air]]
,[CODE(HTMLa)[[[scrolling]]]]	,	,[CODE(HTML)[auto]]	,Scroll bar	,[HTML 4]
,[CODE(HTMLa)[[[security]]]]	,	,	,安全上の扱い	,非標準	,[[WinIE]]
,[CODE(HTMLa)[[[src]]]]	,[CODE(SGML)[%[[URI]]]]	,(なし)	,フレーム内容	,[HTML 4]
,[CODE(HTMLa)[[[style]]]]	,	,(なし)	,スタイル指定	,[HTML 4] [CODE(SGML)[%coreattrs]]
,[CODE(HTMLa)[[[title]]]]	,[CODE(SGML)[%[[Text]]]]	,(なし)	,注釈的題	,[HTML 4] [CODE(SGML)[%coreattrs]]
,[CODE(HTMLa)@en[[[type]]]]
,[CODE(HTMLa)[[[vspace]]]]	,	,	,縦余白	,非標準
,[CODE(HTMLa)[[[width]]]]	,[CODE(SGML)[%[[Length]]]]	,	,フレームの幅	,[HTML 4]
,[CODE(XMLa)[[[xmlns]]]]	,[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] 固定	,==	,[[名前空間名]]	,W3C 勧告	,[[XHTML m12n]]


[[#comment]]


** 内容

[11] [CODE(HTMLe)[iframe]] 要素の内容は、未対応 UA
や不使用設定の UA だけが表示するべきです [SRC[HTML 4 16.5]]。

[[#comment]]


** レンダリング

[13] 行内フレームは大きさを変更できません。ですから [CODE(HTMLa)[[[noresize]]]]
属性はありません。 [SRC[HTML 4 16.5]]

[14] HTML 4 は >>13 としていますが、利用者の便を考えれば、
UA は寸法変更機能を設けた方が良いかもしれません。

[[#comment]]


** 実装

[3] そういえば昔、 [[WinIE 5]] の頃、 [CODE(HTMLe)[iframe]] 内に表示されている文書の [CODE(HTMLe)[[[title]]]] が 
[[window]] の [[title bar]] に表示されるというバグ 
[WEAK[([[M$]] は[[仕様]]だと言い張るかもしれんが。)]] がありましたね。
そのバグ、今でもあるのかなあ

[35] [[Firefox]] 3.0.4 で[[フィード]]の[[エントリー]]の中身 ([[Atom]]
の [CODE(XMLe)@en[atom:[[content]]]] [[要素]]の[[内容]]) に [CODE(HTMLe)@en[[[iframe]]]]
[[要素]]を含めると、[[フィード]]の中身の一覧で出てくる説明部分に
[CODE(XMLe)@en[[[iframe]]]] [[要素]]の[[内容]]のソースがそのまま出てきます。
どうも、[[スクリプト有効]]で[[構文解析]]した結果 [CODE(DOMi)@en[[[Text]]]]
[[節点]]になった[[内容]]をそのまま取ってきているみたいですね。

** 関連

[12] [CODE(HTMLe)[[[object]]]] 要素型を使っても HTML
文書などを埋込むことができます。属性などは異なりますが、
レンダリングなどに関してはおおむねどちらを使っても同じです。
また、多くの UA では基本的に利用者から見て同じようになります。

[[#comment]]


** 安全性

[15] [[フレーム]]一般と同じく、外部文書を埋込み、 [[DOM]]
などで相互に操作できることによって生じ得る保安上の問題に注意が必要です。
多くの UA では、異なるドメインでのスクリプトによる access
を禁止するなどの措置をとっています。
(現状では十分ではないという指摘もありますし、
あまり制限しすぎると自由度が失われるという問題もあります。)

[1] 異なる[[ドメイン]]の参照は (大抵) 
[[広告]]とかだし、ブラウザの設定で出来ないようにして欲しいなあ。

[2] >>1 それを言うなら [CODE(HTMLe)[iframe]] 自体こうこっく(以下略)

[19] [CODE(HTMLe)[[[img]]]] 要素などと同じように、
ごく小さな大きさを指定したり [[CSS]] 
などにより非表示にしたりして閲覧者が気付かないうちに別の[[資源]]が読み込まれるように仕組むことができます。
[CODE(HTMLe)[[[img]]]] 要素の場合と同様に[[アクセス・カウンタ]]のような
(閲覧者にとって) 比較的無害な場合もあれば、
[[ブラクラ]]のような危険なものが埋め込まれる可能性もあります。
[[アクセス・カウンタ]]の類と一口に言っても、
単なる計数の場合もあれば、閲覧者の個人情報の収集を狙ったものである可能性もあり、
注意が必要なことには変わりありません。 >>18
の問題のように、外部のサイトに影響を与えさせることを狙った使用例もあります
(>>20)。

[20] 注意: 単純な [CODE(HTTP)[[[GET]]]] 
アクセスによって鯖側の状態に大きく影響を与えてしまう
([[安全]]でない) のは [[REST]]
的に間違った実装であり、その外部サイトの側が [CODE(HTMLe)[[[iframe]]]]
で参照されるか否か以前の問題を抱えているとも言えます。
ただし >>18 のようなアクセス数を数えるという場合には必然的に
[CODE(HTTP)[[[GET]]]] でなければなりませんし、 [[REST]]
というか [[HTTP]] 的にも一応問題ないことになってはいるので、
難しい問題ではあります。

[26] '''実例: 2ch からランク付け対象サイトへのリンク'''

[CITE[2chにlivedoor秘書乙部Blogが埋め込まれている!]] 
<http://blog.livedoor.jp/otobeorz/>

[[アクセス数]]によって順位付けされている日記サイトへの
[CODE(HTMLe)@en[[[iframe]]]] を使った[[リンク]]が、
日記の著者とは無関係の第三者である [[2ch]]
の [[Web頁]]に含まれていました。
[[2ch]] は膨大な[[アクセス]]のある[[掲示板]]サイトで、
これによって、当該日記の順位は急上昇しました。

[[2ch]] の[[管理者]]である[[ひろゆき]]は、
[[アクセス数]]の水増しのための不正があった場合に、
それが第三者によるものであってもその日記を削除するという日記システム管理者の方針が日記システム管理者の関係者であっても例外とされずに適用されるかを確かめたかったとしています。

この事例は、技術的には
- 無関係な [[Web頁]]を[[利用者]]が気づかないうちに読込ませられるという
[[Webブラウザ]]実装上の問題
- 本来[[冪等]]で[[安全]]な [CODE(HTTP)@en[[[GET]]]]
[[要求]]で自動順位付けすることの是非

社会的には
- [[アクセス数]]という表面的なもので順位付けしている愚かさ
- 悪意のある第三者によってシステム利用者が不利益を被り得る運用方法

への注意を喚起しています。

また、日記システム提供者の[[ライブドア]]は、
[CODE(HTMLe)@en[[[iframe]]]] により[[リンク]]に対して
[[JavaScript]] のコードによる[Q[報復]]を行っていますが、
やろうと思えばそれ以上にえげつないこともできました。

[22] '''実例: mixi による閲覧者の特定'''

- [23] [CITE[インターネット殺人事件 : 日記 : 2005-02]] <http://internet.kill.jp/d/200502.html#d14_t2>
- [24] [CITE[fladdict.net blog: MIXIを使った、トラフィックの個人追跡システム]] 
<http://www.fladdict.net/blog-jp/archives/2005/12/mixi.php>

会員制で、ある会員 [VAR@em[X]] がある内部の頁 [VAR@en[P[SUB[M]]]] 
を閲覧したことを、 [VAR@en[P[SUB[M]]]] の著者である別の会員
[VAR@en[Y]] が知り得る機能 ([Q[[[足跡]]]]) が存在するサービス
[[mixi]] を悪用することで、 [VAR@en[Y]] は外部の Web
頁 [VAR@en[Q]] を閲覧した [[mixi]] 会員の個人情報を入手し得ます。

機能を悪用する会員 [VAR@en[Y]] がよろしくないのは別として
[WEAK[(あるいは[Q[正当な利用]]だとの主張もできるかもしれませんがw)]]、
別の Web サイトに情報を送ることができる Web 
ブラウザの実装にも、個人情報を半自動で [WEAK[(= 会員の意識しない間に)]]
記録する [[mixi]] のシステムにも問題があります。

;; 
>>24 にコメントを書いている人が問題を軽視し過ぎなのが情けない。

[[#comment]]


** 知的財産権に関して

[21] 埋め込み型リンクと著作権等との関係については
[CODE(HTMLe)[[[frame]]]] の項をご覧下さい。

[[#comment]]


** 不思議解釈

[16] [Q[iframe]] は [Q[inline frame]] の略のようですから、
[Q[インライン・フレーム]]と読むのが適当でしょう。
省略形は省略形のまま読む派 (謎) なら [Q[アイ・フレーム]]
も許容範囲でしょう。

中には[Q[イフレーム]]と読む人もいます。違和感ありまくりですが、
[Q[アイ・フレーム]]が良くて[Q[イフレーム]]は悪いとする理由はなさそうですから、
まあ良いでしょう。

ところが、世間には[Q[イン・フレーム]]と読む人もいます。
確かに [Q[inline frame]] の省略としてあり得るものではありますが、
単なる[Q[イン]]と[Q[インライン]]では意味が随分違ってきます。
[Q[イン・フレーム]]と読むと[Q[フレームの中]]ととられても仕方がありません。
あるいは、頁の''中のフレーム''という意味と誤解していることからそう呼ぶのかもしれませんが、
もしそうだとしたら呆れるばかりです。

[Q[インナー・フレーム]]なる用例も発見しました。
確かに頁の内側にあることには違いありませんが・・・。

[17] 読み方のまとめ:
- ○ 行内フレーム
- ○ インライン・フレーム
- ○ アイ・フレーム
- × イフレーム
- × イン・フレーム
- × インナー・フレーム

[25] '''[CODE(HTMLe)@en[iframe]] の代替内容に [CODE(HTMLe)@en[frame]]!?'''

[[タグ講座]]の中には、

>
[PRE(HTML invalid example code)[
      <iframe width=150 height=200 src="blahblah.html">
      <frame src="blahblah.html">
      </iframe> 
]PRE]

のように[[代替内容]]として [CODE(HTMLe)@en[[[frame]]]]
[[要素]]を入れろとしているものがあるそうです。

;; 出典:
- [CITE[<IFRAME>との出会い、そして克服 : Hotwired]] 
([[Zach Waller]] 著、1997年11月28日付け、日本語訳2005年12月現在)
<http://hotwired.goo.ne.jp/webmonkey/html/97/47/>
- [CITE@en[The IFrames Lowdown]] 
([[Zach Waller]] 著、2001年4月10日付け、2005年12月現在)
<http://hotwired.lycos.com/webmonkey/96/37/index2a_page5.html?tw=authoring>

;; 
この出典の[[タグ講座]]もなかなか低品質だw
低品質なのに駄目出しされる元の[[タグ講座]]はどれだけ劣悪なのかww
ちなみにこの出典の[[タグ講座]]の日本語訳は翻訳がひどくて何が言いたいのかさっぱりわからないww

[29]
[CITE[Safari Developer FAQ]] ([CODE[2006-12-31 11:40:00 +09:00]] 版) <http://developer.apple.com/jp/internet/safari/faq.html#anchor5>

> SafariのBack/Forwardキャッシュ(訪れた人がブラウザの「戻る」ボタンや「進む」ボタンを押した時点から蓄積されるキャッシュ)も、ページにフレームを含めることによって阻止することができます。フレームベースのページは、Back/Forwardキャッシュには保存されず、非フレームベースのページも下に示す不可視のiframeを追加することによって同じように動作します。

([[名無しさん]])

[32]
[Q[アイフレ]]と略す人もいるそうです。
([[名無しさん]])

[[#comment]]


** 例

[10] 単純な埋め込み例 [SRC[HTML 4 16.5]]
[PRE(HTML)[
  <IFRAME src="foo.html" width="400" height="500"
             scrolling="auto" frameborder="1">
  [Your user agent does not support frames or is currently configured
  not to display frames. However, you may visit
  <A href="foo.html">the related document.</A>]
  </IFRAME>
]PRE]

この例では、対応している UA は文章中に [SAMP(URI)[foo.html]]
を枠線付きで埋込みます。未対応 UA
は [CODE(HTMLe)[iframe]] の内容をレンダリングします。

[[#comment]]


** メモ

[4] まじれすすると、 [CODE(HTMLe)[iframe]] 要素型は[[非推奨]]なので [CODE(HTMLe)[[[object]]]] 要素型を使いましょう。

[5] >>4 または [[XHTML 2]] で [CODE(XHTMLa)[[[src]]]] 
[[汎用属性]]という手もある。

[6] しかし[[イフレーム]]はないだろう・・・。

[18]
[[2ch]] から外部日記サイトへの [CODE(HTMLe)[[[iframe]]]] 
による[[リンク]]の問題への言及における、[CODE(HTMLe)[[[iframe]]]]
によるリンクを指した表現:
- [Q[埋め込み]]: 結構多い。
- [Q[リンク]]: 結構多い。 2ch の一部のスレタイにも採用
(例: [CITE[【ネット】"なぜ?" 2ちゃんねるトップページに、ライブドア・乙部綾子ブログへの隠しリンク★4]])
- [Q[参照]]: ちらほら

参考:
<IW:Google:"2ch 乙部 iframe">
(現時点では日が浅いので結果は然程多くない。)

([[名無しさん]] [WEAK[2005-05-13 10:15:37 +00:00]])

[27]
[CITE[xkr.us / dom / Accessing the document inside an iframe]] <http://xkr.us/articles/dom/iframe-document/>
([[名無しさん]] [WEAK[2006-10-21 02:10:17 +00:00]])

[28]
[CITE[IFRAME を使わない方法の補足 | WWW WATCH]] <http://hyper-text.org/archives/2006/11/object_element.shtml>
([[名無しさん]] [WEAK[2006-11-26 09:56:01 +00:00]])

[30]
[CITE[Bug 80713 &#8211; Need a way to specify an auto-height for an IFRAME such that the frame is given the full height of the contained content]] ([CODE[2007-04-25 20:28:29 +09:00]] 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=80713>
([[名無しさん]] [WEAK[2007-04-25 11:37:12 +00:00]])

[31]
[CITE[JavaScript インラインフレーム(iframe)関連 - とみぞーノート]] ([CODE[2007-05-10 21:44:39 +09:00]] 版) <http://wiki.bit-hive.com/tomizoo/pg/JavaScript%20%A5%A4%A5%F3%A5%E9%A5%A4%A5%F3%A5%D5%A5%EC%A1%BC%A5%E0(iframe)%B4%D8%CF%A2>
([[名無しさん]] [WEAK[2007-05-10 12:46:51 +00:00]])

[33]
[CITE[outsider reflex]] ([[Piro(SHIMODA Hiroshi)]] 著, [CODE[2008-03-01 12:23:54 +09:00]] 版) <http://piro.sakura.ne.jp/>
([CODE(MIME)@en[[[text/html]]]])

[PRE(HTML bad example code)[
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [
	<!ENTITY % XLINK.xmlns.attrib "xmlns:xhtml2 CDATA #FIXED 'http://www.w3.org/2002/06/xhtml2'">
	<!ENTITY % Inline.extra "| xhtml2:l | iframe">
	<!ENTITY % newInlineContents "(#PCDATA|br|span|em|strong|dfn|code|samp|kbd|var|cite|abbr|acronym|q|sub|sup|bdo|a|img|map|object|input|select|textarea|label|button|ruby|ins|del|script|noscript|xhtml2:l)*">
	<!ENTITY % coreAttributes "
	  id    ID    #IMPLIED
	  class CDATA #IMPLIED
	  style CDATA #IMPLIED
	  title CDATA #IMPLIED">
	<!ELEMENT xhtml2:l %newInlineContents;>
	<!ATTLIST xhtml2:l %coreAttributes;>
	<!ELEMENT iframe %newInlineContents;>
	<!ATTLIST iframe
	      %coreAttributes;
	      longdesc     CDATA               #IMPLIED
	      src          CDATA               #IMPLIED
	      frameborder  ( 1 | 0 )           '1'
	      marginwidth  CDATA               #IMPLIED
	      marginheight CDATA               #IMPLIED
	      scrolling    ( yes | no | auto ) 'auto'
	      height       CDATA               #IMPLIED
	      width        CDATA               #IMPLIED
	>
]>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:xhtml2="http://www.w3.org/2002/06/xhtml2"
	xml:lang="ja">
]PRE]

([[名無しさん]])


[34]
[CITE[The <iframe> element and sandboxing ideas]] ([[Ian Hickson <ian@...>]] 著, [TIME[2008-05-21 22:30:48 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/14191>
([[名無しさん]])


[[#comment]]


* メモ

[36] [CITE[iframe]]
([TIME[2009-10-18 15:51:31 +09:00]] 版)
<http://suika.fam.cx/~wakaba/-temp/test/html/iframe/remove-create-2.html>

[37] >>36 Firefox 3.5.3 は FAIL、 Opera と Chrome は PASS。

[38] [CITE['''['''whatwg''']''' Iframe dimensions]]
([TIME[2010-08-12 07:46:38 +09:00]] 版)
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-August/027832.html>

[39] [CITE['''['''whatwg''']''' Should events be paused on detached iframes?]]
([TIME[2012-02-08 09:55:26 +09:00]] 版)
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-February/034755.html>

[40] [CITE@en[Web Applications 1.0 r7139     Remove the 'magic iframe' feature.]]
( ([TIME[2012-06-23 05:54:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7138&to=7139>

[41] [CITE[''''''[''''''whatwg'''''']'''''' The so-called 'magic iframe' feature]]
( ([TIME[2012-06-23 05:59:53 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-June/036469.html>

[42] [CITE[javascript - iframe without an src attribute - Stack Overflow]]
( ([TIME[2013-07-02 07:32:28 +09:00]] 版))
<http://stackoverflow.com/questions/4284605/iframe-without-an-src-attribute>

[43] [CITE@en[Web Applications 1.0 r8289     Handle the case of removing the 'src' attribute on a live <iframe>, and some minor clarity changes.]]
( ([TIME[2013-11-16 07:10:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8288&to=8289>

[44] [CITE@en[Web Applications 1.0 r7406 Bit of editorial cleanup for <iframe>. Should have no normative effect.]]
( ([TIME[2012-09-26 12:27:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7405&to=7406>

[45] [CITE@en[Web Applications 1.0 r3280   <iframe> content model.]]
( ([TIME[2009-06-17 04:14:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=3279&to=3280>

[46] [CITE@ja[iframe - XUL | MDN]]
( ([TIME[2013-11-14 08:19:45 +09:00]] 版))
<https://developer.mozilla.org/ja/docs/XUL/iframe>

[47] [CITE[''''''[''''''whatwg'''''']'''''' Avoiding synchronous iframe load]]
( ([TIME[2014-01-22 04:26:50 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2014-January/041898.html>