このすみろぐ

とあるWebエンジニアが、技術や趣味について書くブログです。

CSSの中にexpression関数でJavaScriptを書ける時代があったらしい

セキュリティの勉強をしている時に、CSSの話題があったのですが、そこでCSSの中にJavaScriptが書けることを知りました。

なお、IE7までの独自仕様で現在は廃止されております。 過去の話ではありますが、メモ書きとして残しておきます。

CSS expressionとは

言葉で説明するよりも、具体例を見るほうがわかりやすいです。 @ITにあるサンプルを引用します。

width: expression ( document.body.clientWidth < 700 ? "700px" : "auto");
min-width: 700px;

この例では、JavaScriptの三項演算子を使い、widthの値を分岐させています。 なお、現在であればmin-widthプロパティを使えば事足りますので、あくまでサンプルです。

expression関数の使い方は単純で、関数の中にJavaScriptを書くだけです。

atmarkit.itmedia.co.jp

XSS(クロスサイトスクリプティング)に注意

不正なJavaScriptをCSS内に仕込むことによって、悪用される危険性があります。 @ITの記事にも、同様の注意事項が書いてありました。

CSS expression関数というのはIE 5以降(IE 5/IE 6/IE 7)でサポートされているIEの独自拡張による仕様で、CSS構文内にJavaScriptが記述できるというものです。
min-widthプロパティをサポートしていないIE 5/IE 6の代替のために用いられるケースがありますが、Webサイトのパフォーマンスが落ちたり、XSSの原因にもなったりしますので使用には注意が必要です。参考までに紹介しておきます。
https://atmarkit.itmedia.co.jp/ait/articles/0812/02/news133_3.html より

まとめ

IE8で廃止された仕様のため、現在の主要ブラウザであれば、expressionは動きません。 しかしながら、CSSを使ってXSS(クロスサイトスクリプティング)ができる事実は、目から鱗でした。

なお、本記事で紹介したやり方は、CSSの中にJavaScriptを書くものでした。 仕様が廃止された現在でも同じことを実現したい場合、JavaScript側からCSSを制御する形になるかと思います。

やり方はいろいろありますが、たとえばQueryを使えば、わりとお手軽に実装できます。

uxmilk.jp