IE8以下は内容がHTMLっぽいとHTTPレスポンスヘッダ‐のContent-typeに関わらず、HTMLとしてレンダリングしてしまう。
IE8はnosniffをつければ、Content-typeに従う。
参考： X-Content-Type-Options: nosniffの効果を確認してみる | UCWD-Studio.【ホームページ制作 / 京都】
PHPの実験用コード
<?php header('Content-type: text/plain') ?>
<script>alert(1)</script>
今夜つける HTTPレスポンスヘッダー （セキュリティ編） - うさぎ文学日記の中で、よく知らなかったヘッダーについて調べたメモ。
いくつかのヘッダーについてのブラウザ別のサポート状況はこちら。
（ちょっと古いが、少なくともこれ以降のバージョンではサポートしているということは分かる。）
↓
IPA ISEC セキュア・プログラミング講座：Webアプリケーション編 第8章 マッシュアップ：クライアントサイドマッシュアップ: #4 対策に利用できる技術
X-XSS-Protection
IE8以降のXSSフィルターはデフォルトで有効になっている（ブロッキングモードではない）。
↓
Security through HTTP response headers
[IEInternals] XSS フィルターを制御する | Hebikuzure's Tech Memo
Internet Explorer 8 には、XSS フィルターとして知られている、反射型クロスサイト スクリプティング攻撃を防止するのに有効な画期的新機能があります。このフィルターは既定ではインターネット ゾーン、信頼済みサイト ゾーン、制限付きサイト ゾーンで動作します。
X-XSS-Protection: 1; mode=block
CSP is quite usable in Chrome 16+, Safari 6+, and Firefox 4+, and has (very) limited support in IE 10.
Content-Security-Policy:
default-src 'self';
script-src 'unsafe-inline' *;
img-src data: *;
frame-src *;
font-src *;
style-src 'unsafe-inline' *;
report-uri /csp-report.php
ブラウザで表示している画面のスクリーンショットを撮るプラグインのメモ。
IEのJavaScript（正確にはJScript）でのみ使える、「条件付きコンパイル変数」の1つであるJScriptのバージョンを表す@_jscript_versionについて、IEの各バージョン、各モードでどんな値になるか調べたのでメモ。
Firefox以外のモダンブラウザは、標準で装備していた。
| ブラウザ | 調査した バージョン | ログの表示方法 | その他 |
| IE | 8 | ツール ↓ 開発者ツール ↓ 「スクリプト」タブ | IE8以降で搭載。 String型にCASTされて出力される。 （Objectの中身は見られない。） |
| Firefox | 6.0 | アドオンのFirebugを使う | |
| Chrome | 11.0 | ツール ↓ JavaScript コンソール ↓ 「Scripts」タブ | |
| Safari | 5.1 | ページのメニューボタン ↓ 開発 ↓ JavaScriptのデバッグを開始 ↓ 「コンソール」タブ | Windows版で確認。 |
| Opera | 11.50 | Operaボタン ↓ ページ ↓ 開発者用ツール ↓ Opera Dragonfly | バージョン11から搭載。 ObjectやArrayの中身は見られない。 CSS等のエラーとごっちゃに出るので見辛い... |
IEでアドレス（URL）欄と更新ボタンの間にある互換表示ボタンをクリックすると、下位バージョンのIEでの表示モードになる。（IE8の場合、IE7での表示になる。ただし厳密に言うと同じではないらしい。ほぼ同じだが。）
で、互換表示にした時に印刷プレビューについても互換表示が適用されるかどうか調べた。
調査に使ったHTML
IE8モード（以上）の場合「IE8」、IE7モード（以下）の場合「IE7」と表示される。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Which are you?</title>
<!--[if lte IE 7.0]><style> #ie8 { display: none} </style><![endif]-->
<!--[if gte IE 8.0]><style> #ie7 { display: none} </style><![endif]-->
</head>
<body>
<div id="ie7">IE7</div>
<div id="ie8">IE8</div>
</body>
</html>
WebFontsを読み込む場合のCSSの書き方はブラウザごとに異なるため、こんなsyntaxを使う必要がある。
しかし、Google Font APIで読み込むCSSをではそんな書き方はしていない。
そこで、試しにTangerineのCSSを各ブラウザで読み込んでみて、Google Font APIがどのようにマルチブラウザ対応をしているのか調べてみた。
IE 8
@font-face {URLはIE専用。
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RPY6323mHUZFJMgTvxaG2iE');
src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
@font-face {URLはChromeと同じ。
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
@media screen {URLはFirefoxと同じ。
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw') format('woff');
}
}
@font-face {URLはSafari用（Operaと共通）。アンダーバーで区切ってるのはiPhone用（iOS用？）が別にあったりするためか？
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}
@font-face {URLはSafariと同じ。OperaもTrueType組。
font-family: 'Tangerine';
font-style: normal;
font-weight: normal;
src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=HGfsyCL5WASpHOFnouG-RKCWcynf_cDxXwCLxiixG1c') format('truetype');
}
session_cache_limiter('none');これにより、SESSIONを使っても余計なHTTPヘッダーが送出されなくなる。
session_start();
session_start();header()でセミコロンの右に何も書かないと、PHPは何も送出しないようだ。
header('Expires:'); //下記「余談」の追記も参照
header('Cache-Control:');
header('Pragma:');
header('Expires: -1');ログイン管理をする場合などはこれをやっておいた方が良さそう。
例えば、上から下に白から青のグラデーションを表示したい場合はこう書く。（省略可能なパラメータは省略した。）
/* IE */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#ffffffff, EndColorStr=#ff0000ff)";
/* Firefox */
background: -moz-linear-gradient(white, blue);
/* Chrome, Safari */
background: -webkit-gradient(linear, left top, left bottom, from(white), to(blue));
（2011/3/29追記：Firefox4とChrome10の実験結果を追加。）
JavaScriptに続いて、動的にCSS（またはstyle要素）を追加する場合の、追加方法の違いによるブラウザごとの挙動も調べた。
調査に使ったJavaScript（HTML5なのでtype属性は省略してある。）
window.onload = function() {
// divのinnerHTMLに外部CSSの読み込みを突っ込む
try {
var div1 = document.createElement("div");
div1.innerHTML = '<link rel="stylesheet" href="test1.css" />';
document.body.appendChild(div1);
} catch(e) {
}
// createElementでlink要素を生成して外部CSSを読み込む
try {
var link2 = document.createElement("link");
link2.rel = "stylesheet";
link2.href = "test2.css";
document.getElementsByTagName("head")[0].appendChild(link2);
} catch(e) {
}
// divのinnerHTMLに生のstyleを突っ込む
try {
var div3 = document.createElement("div");
div3.innerHTML = '<style>#test3{ color: red }</style>';
document.body.appendChild(div3);
} catch(e) {
}
// createElementで生のstyleを追加する
try {
var style4 = document.createElement("style");
style4.innerHTML = "#test4{ color: red }";
document.getElementsByTagName("head")[0].appendChild(style4);
} catch(e) {
}
};
#test1{ color: red }
#test2{ color: red }
| ブラウザ | 1 | 2 | 3 | 4 |
| IE 8 | Ｘ | Ｏ | Ｘ | Ｘ |
| Firefox 3.6 | Ｏ | Ｏ | Ｏ | Ｏ |
| Firefox 4.0 | Ｏ | Ｏ | Ｏ | Ｏ |
| Chrome 4 | Ｏ | Ｏ | Ｏ | Ｘ |
| Chrome 10 | Ｏ | Ｏ | Ｏ | Ｏ |
| Safari 4 | Ｏ | Ｏ | Ｏ | Ｘ |
| Opera 10.53 | Ｏ | Ｏ | Ｏ | Ｏ |
（2011/3/29追記：Firefox4の実行結果を追加）
JavaScriptによって動的にscript要素を追加する場合の、追加方法の違いによるブラウザごとの挙動を調べた。
調査に使ったJavaScript（HTML5なのでtype属性は省略してある。）
<script>
function test(value) {
document.getElementById("test").value += value + ",";
}
window.onload = function() {
// innerHTMLに外部JSの読み込みを突っ込む
try {
var div1 = document.createElement("div");
div1.innerHTML = '<script src="test1.js"><' + '/script>';
document.body.appendChild(div1);
} catch(e) {
}
// createElementでscript要素を生成して外部JSを読み込む
try {
var script2 = document.createElement("script");
script2.src = "test2.js";
document.body.appendChild(script2);
} catch(e) {
}
// innerHTMLに生のJSを突っ込む
try {
var div3 = document.createElement("div");
div3.innerHTML = '<script>test(3);<' + '/script>';
document.body.appendChild(div3);
} catch(e) {
}
// createElementで生のJSを追加する
try {
var script4 = document.createElement("script");
script4.innerHTML = "test(4);";
document.body.appendChild(script4);
} catch(e) {
}
};
</script>
test(1);
test(2);
| ブラウザ | 1 | 2 | 3 | 4 | 表示順 |
| IE 6/8 | Ｘ | Ｏ | Ｘ | Ｘ | 2 |
| Firefox 3.6 | Ｏ | Ｏ | Ｏ | Ｏ | 1→2→3→4 |
| Firefox 4.0 | Ｘ | Ｏ | Ｘ | Ｏ | 4→2 |
| Chrome 4 | Ｘ | Ｏ | Ｘ | Ｏ | 4→2 |
| Safari 4 | Ｘ | Ｏ | Ｘ | Ｏ | 4→2 |
| Opera 10.53 | Ｘ | Ｏ | Ｘ | Ｏ | 2→4 |
dataスキームはIE6・7は未対応。IE8から対応した。
グラデーション画像は、cyokodogさんが作った生成ツールが便利そう。
IEはfilterにより表現されるのでIEでも表示できる。
CSSフレームワークのYAMLとページ内ポップアップライブラリのHighslide JSを併用したら、IEで見た場合のみHighslideの表示がおかしくなった。
参考情報を探したが、ドイツ語しか見つからない．．．
IE6では透過PNGが透過しない。それを無理やり透過させてしまうJavaScriptライブラリを調べたメモ。
//例：Railsによる更新タイムスタンプ付与への対応
.search(/\.png$/) → .search(/\.png(\?[0-9]+)?$/)
Highslide JSは普通のリンクだけでなく、Image Mapのリンクでもページ内ポップアップができる。
しかし、IEで表示した場合、Image Mapのリンクをクリックすると下記の現象が起きる場合がある。
Try using highslide-full.js instead of highslide-with-html.js.
Whatever:hoverのversion 3がリリースされていた。
詳細はれぶろぐ - [JavaScript] Whatever:hover の :focus 擬似クラスへの対応についてが詳しい。
でも:hoverをたくさん使っているページでのIEの挙動は相変わらずもっさりカクカク。
参考：» onmouseout IE flickering problem (Blog Archive) Alex Mauzon
色として灰色を指定する場合、Firefoxではアメリカ流の"gray"でもイギリス流の"grey"でも、どちらでも表示できる。
しかし、IEでは"gray"しか対応していないので注意。
もっと注意なのが。薄灰色。IEではgrayへの対応とは反対に、なぜか"lightgrey"の方しか対応していない。
Firefoxの場合
ChromeでQueryStringを含むURLを見ようとするとしばしば「404 Bad Request」になってしまうことがあり、調べたらIEと同じ現象らしい。
/~sugano/ » Google ChromeのDigest認証
IEへの対応は、Apacheいじり始めてすぐに入れたのでそういうものだと思ってたけど、まさかこんなところで再開するとは。
IE7バージョンをさかのぼっていって、IEの変遷を見つつ、はてなのトップページがどのバージョンまで見られるか試してみる。
（最初はYahoo! Japanでスクリーンショットを撮ってみたが、あまりにも無難に対応しているのでやめた。）
実験に使ったIE7は、インストールしてからほとんど設定等を変更していないものを使っている。
IE6以前についてはMultipleIEsのものを使っている。
IE7
以前のIEと比べると上部のUIが大幅に変わった。メニューバーが隠れるのでWindowが広く使える。検索窓が標準で付いている。フィードに対応している。
IEではfaviconがURL入力欄の左側に（IE7ではタブの左側にも）表示される。
（例）
IEのFaviconに関する仕様は非常に厳格です。
まずWindows icon形式(bmp形式ではないよって拡張子を変えただけではだめ)でなければなりません。
（中略）
またIEはサイト(=ドメイン)のルートにあるfavicon.ico以外は読み込みません。
投稿
すべてのコメント
