Hatena::ブログ(Diary)

latest log このページをアンテナに追加 RSSフィード

2008-10-27

IE8での変化点一覧 + 備忘録

IE8 ではかなりの数のメソッドやプロパティが増えているようです。書き残します。

element.getAttribute について追記しました。

window.toStaticHTML

window.toStaticHTML は、XDomainRequest や postMessage で受け取った文字列(HTML)をサニタイズ(消毒)するメソッド。

XHRやJsonで受け取った文字列サニタイズにもシーンを選べば使えるのだろうか。

<div onclick="alert('hoge')">hoge</div>
 ↓
<div>hoge</div>
<script>alert("hoge")</script>
 ↓
無かったことになる
  • CSS::expressionを潰す
img { expression(uuClass.IEBoost.AlphaPNG._expression(this)) }
img { behavior: expression(uuClass.IEBoost.AlphaPNG._expression(this)) }
div img { behavior: expression(uuClass.IEBoost.AlphaPNG._expression(this)); color: blue; }
 ↓
img {;}
img {;}
div img { color: blue; }
  • なんか色々潰す
<?IMPORT namespace="t" implementation="#default#time2">
<v:rect id="rect1" style="..."></v:rect>
<t:animate />
 ↓
無かったことになる
<div>hoge</div><oreore:hoge>hoge</oreore:hoge>
 ↓
<div>hoge</div>hoge
<div>hoge</div<oreore:hoge>hoge</oreore:hoge>
 ↓
<div>hoge&lt;/divhoge

細工は無駄x3
<scr<oreore:hoge>ipt</oreore:hoge>>
 ↓
&lt;script&gt;
<a href="http://example.com/" title="hoge">clickme</a>
<a href="javascript:alert(document)" title="hoge">clickme</a>
↓
<a href="http://example.com/" title=hoge>clickme</a>
<a title=hoge>clickme</a>

Quirks Mode だろうが、IE8モードだろうが XHTML1.0だろうが関係なく、title="hoge" を title=hoge に改変してくるし、hrefを属性ごとたたき落とす(href=""で十分なのに)。これはXHTML的にまずいので、ぜひ修正してもらいたい。

  • おまけ
<input type="button" value="hoge"/>
<input type="button" value="hoge"></input>
<hr/>
<br />
 ↓
<input type=button value=hoge>
<input type=button value=hoge>
<hr>
<br>

toStaticHTMLはホワイトリストで管理しているように見えるけど、expressionへの対応を見たかぎりじゃ、文脈的に正しくなくても潰しにかかるみたい。

IE8で追加されたイベント

  • onhashchange
  • onoffline
  • ononline
  • onstorage - DOM Storage
  • onstoragecommit - DOM Storage
  • XMLHttpRequest.ontimeout
var xhr = new XMLHttpRequest();
xhr.timeout = 2000;
xhr.ontimeout = function() { ... };
  • XDomainRequest.ontimeout

IE8で追加されたオブジェクト/プロパティ

  • HTMLStorage - DOM Storage
  • window.localStorage, window.sessionStorage
  • Storage.remainingSpace - localStorageの残量, これは標準外のプロパティ
  • StorageItem
  • StorageList
  • XDomainRequest
  • XMLHttpRequest.timeout
  • XDomainRequest.timeout
  • HTMLDocumentCompatibleInfo
  • DocumentCompatibleInfo
  • documentCompatibleInfoCollection
  • compatible - X-UA-Compatible 宣言のリストを取得する
  • document.isCompatible("StandardsIE8") - IE8でIE8モードならtrueらしい。version番号ではなくこのAPIを使うと、UAの切り分けが簡単になるのだが、こんなのばっかり追加されてる気もする。
  • document.documentMode - 重要。ドキュメントの動作モード(IE8, IE7, IE5)を取得する
  • href - 相対リンクの基準となるURLを取得/設定できる。
  • aria系 http://www.w3.org/TR/wai-aria/ http://msdn.microsoft.com/ja-jp/ie/cc836446.aspx
  • element.style.boxSizing, CSS::box-sizing または -ms-box-sizing
  • document.contentDocument
  • form.enctype - FORMのMimeTypeを指定可能になるらしい。デフォルトは "application/x-www-form-urlencoded"
  • isAlternate - 代替スタイルシートかどうかを取得できるらしい
  • isPrefAlternate - これも
  • window.maxConnectionsPer1_0Server - HTTP1.0で接続しているときの最大接続数 4〜6本
  • window.maxConnectionsPerServer - HTTP1.1で接続しているときの最大接続数 2〜6本
  • msBlockProgression or -ms-block-progression http://www.w3.org/TR/2003/CR-css3-text-20030514/#Progression これの先行実装らしいが、なんか似たようなのがあった気がする。要は縦書き。
  • event.origin - onmessage 関係の情報(スキーム + ホスト名 + ポート番号 = https://hostname:port)を取れるらしい。
  • element.style.outline - おなじみのやつ。outlineColor, outlineStyle, outlineWidth も
  • event.source - onmessageイベントのソースとなるwindowが取れるらしい。
  • orphans, widows - 印刷系の話
  • window.zoominherit - チャイルドウインドウ(ポップアップ/ダイアログ)が、親ウインドウのzoom値を引き継ぐかどうか設定/取得できるらしい。きっと使われない。
window.showModalDialog("http://www.example.com",null,"height:200;left:100;resizable:no;scrollbars:no;zoominherit:1");
  • window.external.IsServiceInstalled(URL, Verb) - サービスのインストール状況を確認できるらしいが、サービスの定義が見当たらない。
  • window.postMessage
// Document A
var iframe = document.getElementById("iframe1");
iframe.contentWindow.postMessage("Hello");
// Document B
document.attachEvent("onmessage", function(e) {
    if (e.domain == "example.com") {
        if (e.data == "Hello"") {
            e.source.postMessage("Hello");
        } else {
            alert(e.data);
        }
    }
});
  • window.toStaticHTML - 説明済み
  • document.updateSettings - 説明が無く。APIの存在だけが示唆されている状態。
  • document.querySelector, element.querySelector, document.querySelectorAll, element.querySelectorAll - ただし :visited:link は非サポート

IE8でサポートが追加されたCSS

  • :after Pseudo-class
  • :before Pseudo-class
  • :focus Pseudo-class
  • border-spacing
  • caption-side
  • content
  • counter-increment
  • counter-reset
  • orphan
  • outline
  • outline-color
  • outline-style
  • outline-width
  • page-break-inside
  • widows

IE8じゃないけど、初めて知ったプロパティとか。すっかり忘れがちなプロパティとか

  • allowTransparency - iframe を透過表示させる。
  • bgproperties - "fixed" と指定すると背景が固定されるらしい。background-position: fixed 相当なのかもね。
    • 背景の固定はQuirksモードでのみ有効(IE6で確認)
<body bgproperties="fixed" background="hoge.gif">
  • element.fileCreatedDate - 作成日が取れるらしい ほかにも element.fileModifiedDate, element.fileSize, element.fileUpdatedDate がそろっている。element には document か image を指定可能document.lastModified のノリで。
  • fontSmoothingEnabled - Windowsのコントロールパネルのフォントスムージング設定を取得できるらしい。何に役立つかは不明。
  • window.external - なんか色々できそうなんだけど、未確認。
  • window.offscreenBuffering - オフスクリーンバッファのON/OFF。試し方が悪いらしく、はっきりとした効果が不明。
  • screen.updateInterval - 描画間隔をmsで指定できるので、重い処理(再描画)の前にセットして→戻して とかやるとユーザに色々見られなくてすみそう。IEだけ画面外にぶっ飛ばしてレンダリングしてから戻す処理などは、これが使えれば省略できるのかもね。遅い環境でアニメーションを間引くのにも使えそう。すっかり忘れてた。
  • image.galleryImg = "no" でイメージツールバーを非表示にできる(IE6のみっぽい。IE7で早々に削除されている)
いわゆる <meta http-equiv="Imagetoolbar" content="no" /> の代わり。
  • element.hideFocus - フォーカスを隠す
  • input.indeterminate - チェックもアンチェックもされていない(不確定な)状態を設定/取得する
<input id="chk1" type="checkbox" checked="checked" />
uu.id("chk1").indeterminate = true;
  • element.isMultiLine - 複数行かどうかを取得できる。これと clientRect系のAPIを組み合わせると、::first-line が実装できる気が(とっても)するけど、実装する時間が無い。
  • element.style.layoutGrid - 何だろ? これ。
  • msInterpolationMode or -ms-interpolation-mode - IE7で追加されてるけど、なんだろこれ。
  • external.onvisibilitychange - よくわからない
  • pixelBottom, pixelHeight, pixelLeft, pixelRight, pixelTop, pixelWidth - 時々忘れるのでメモ
  • posBottom, posHeight, position, posLeft, posRight, posTop, posWidth - 覚えてらんないのでメモ
  • window.clientInformation - window.navigator と同じだったっけか?
  • XMLHttpRequest.responseBody - レスポンスボディの、unsignedの配列(バイト配列)をごっそり取れる。IE7から。
  • rule.selectorText - (スタイルシートの)ルールのセレクタ("div" とか "div span"とか)を取得できるらしい。
  • event.shiftLeft - 左のシフトキーが押下されたかを取れるらしい。取れるのしらんかった。
  • textAlignLast or text-align-last Attribute - IEの先行実装らしい。CSS3にこんなのあるのか?
  • element.expando - element.unselectable = "on" が機能するためには、element.expando = false を設定する必要があるらしい。
  • document.URLUnencoded
  • element.vcard_name or VCARD_NAME - こんなんあったんですか。
  • viewInheritStyle - スタイルシート系の話
  • table.refresh() - styleSheet.removeRule() 実行後に呼ぶと、リフローしてくれるらしい。(自動でドキュメントのリフローは行われないらしい)

IE8で動作が変化したメソッドとかプロパティとか

  • document.getElementById - NAMEを検索しなくなった。検索するのはIDのみ。ただし、ドキュメントモードがIE8の場合のみ。document.getElementsByName なら NAMEもID も検索するから、気になる人はそっち使えばOK。
  • element.getNamedItem - IE8モードなら、エラーの発生条件とか戻り値が変化。
  • element.setAttribute - IE8モードでなんか変わってるらしいが、MSDNのリンク先が間違ってて読めてない。
  • element.hasAttribute - DOM Level 1に準拠しました。10年かかったけどね。
  • element.namedItem - 何が変わったかわからないが、どこかが変わっているらしい。
  • element.removeAttribute - 第二引数が必須になり、検索方法のデフォルトcase-sensitive から case-insensitive に変化している。
  • element.removeNamedItem - なんか微妙に変わってる
  • element.setAttribute - 第三引数がサポートされない(無視される)。
  • element.getAttribute - 第二引数の指定が必須になり、デフォルト値も 0 → 2 に変化した
    • document.documentMode === 8 をチェックしコードを分岐させる必要がありそう。IE向けの既存のコードはまず正しく動かない(かもしれない)。
IE6/7用のコードはIE8モードでは動かない。
  × elm.getAttribute("className") → ○ elm.getAttribute("class", 2)
  × elm.getAttribute("htmlFor") → ○ elm.getAttribute("for", 2)  
      • さらに追補: 少なくとも、 elm.getAttribute("src") や elm.getAttribute("href") で 絶対URLを期待しているコードは全て見直しが必要。"class" を "className" に自動的に変換してgetAttributeを行うライブラリは動かない。

IE8の注意事項

  • class="hslice" は WebSlice が独占的に予約するクラス名になりました。今後 hslice という名前のクラスは使用できません。

uupaa.js の近況

  • devモジュールに手が入ってます。
    • いままで結構邪魔だったログ表示部分が、ウインドウ化されちょっと便利になりました。
      • FirebugLiteを起動する機能, ログクリア, ログレベルの変更, その時点の(ライブな)DOMツリーを表示する機能等もつけたので、さらに便利に。
  • effectモジュールは廃棄予定です。
  • selector+モジュールが追加されました。
    • selector+モジュールを読み込むと、CSSセレクタの機能が強化されます。
      • jQuery互換のセレクタが使えるようになります(サポート復活)
      • :digit で 数値を選択できます。主に会計用です。セル内の数値を簡単に右寄せしたりできます。
uu.css("td:digit").forEach(function(v) { v.style.textAlign = "right"; });
      • :negative で マイナスの数値を選択できます。マイナス値を簡単に赤字にできます。
uu.css("td:digit:negative").forEach(function(v) { v.style.textAlign = "right"; v.style.color = "red"; });

反省会

  • 調査時間は7時間。
  • IE8β2で、3 + 2 + 2 = 7つのモードが登場しちゃったので、現場の混乱は必至。
    • バージョンを判定して処理してる部分は色々と見直しが必要そう。
  • 2016年以降に登場すると予想されるIE9には、IE5,IE7,IE8互換モードが搭載されて、さらにマッチョカオスになるわけですね。

satosisatosi 2008/10/29 23:13 最近のマイクロソフトはIE8といいWin7といいがんばってるなー、と思う。
というわけでIE8β2入れてきました。
追試ってどんな感じにすればいいですか?
時間があればやってみますが。

uupaauupaa 2008/10/30 08:44 そうですね、例えば、
<style type="text/css">@import url(http://example.com/hoge.php);</style> はどうなるのかな? とか、
ページのエンコードがUTF-8の時に、異なるエンコード(SJISやEUC-JP)で受信したデータを食わせるとどうなるのかな? とか気になってました。

uupaauupaa 2008/10/30 08:50 あとVBScriptとか、Objectタグとかもありますね。もしかしてFlashも叩き落されるのだろうか。とか。

uupaauupaa 2008/11/01 04:41 拝見しました。

HTML4.01相当のタグ, 画像, CSS(inlineも) は OK で、
objectタグ, emdebタグ, Flash, Java, JavaScript, VBScript, VML, TIME, CSS(@import), javascriptスキーム(href="javascript:...") は NG と。

あと QueryString は通るみたいなので、pingはいけそうです。
<img src="hoge.gif?key1=val1&key2=val2#hoge" />
<img src="hoge.php?key1=val1&key2=val2#hoge" />

Flashもつぶすんですね。

big_tokyobig_tokyo 2009/03/27 13:19 初めまして。
私のインストールしたIE8ですと、こちらのページのレイアウトが崩れています。皆さんもでしょうか?

uupaauupaa 2009/04/21 08:24 互換モードじゃないと崩れるようですね。ごめんしてください。

tamutamu 2009/08/20 02:40 こんにちは。
この記事、大変参考にさせていただきました。ありがとうございます。
ただひとつ気になったのが、
「getAttribute - 第二引数の指定が必須になり、デフォルト値も 0 → 2 に変化した」
とのこと、
http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
など見ても確認できなかったのと、実際に試してみても、特に第二引数を指定しなくても今までどおりの動作をしたようなのです。
もしかして、ベータ版から変わった、ということでしょうか。

uupaauupaa 2009/08/20 12:02 こんにちは、コメントありがとうございます。
リンク先みてみました。なにやらβの頃から、MSDNの記述が大幅に変化してる気がします。
以前は、第二引数(iFlags)が必須で、値も0,1,2 のいずれかでしたが、現在は 4 が増えてますね。
ちょっと色々追試してみます。情報ありがとうございました。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト

コメントを書くには、なぞなぞ認証に回答する必要があります。