■

■　WindowXPSP2上での三大ブラウザ、特にFirefoxであろうとなんであろうとstyle属性からjavascriptを起動してcookieをalertすることが可能

WikiとかRSSとかBLOGとかでstyle属性(非style要素)をきちんとサニタイズしましょうという話題です。(style要素とstyle属性の両者を記述可能なWikiが実在しています。)

style属性からJavaScriptが起動できることは少なからず知られています。FirefoxでもJavaScriptがstyle属性で記述可能であることは一部で知られていますが、そうであったとしても一方において、Firefoxではそのような起動の仕方ではalert()やdocument.cookieを扱えないから比較的に安心なのではないかという迷信もあったりします。確かにFirefoxでは単純には行きませんが安心は出来ません。そうしたことも含め、知っていることをメモしてみます。整理がついていませんが御容赦を。以下、言わんとしていることを玉石混交にて知らなくても良いバッドノウハウから知っているべきことまでを箇条書きに。完全な一覧ではありません。本日確認を取った部分だけです。なお、WindowsXPSP2上でFirefox,IE,Operaにて確認しています。

  • type属性が"text/css"であるlink要素においてhref属性にjavascript擬似スキームの記述が可能
  • style要素にて@importを使いURLとしてjavascript擬似スキームの記述が可能
  • style属性にて背景画像のURLとしてjavascript擬似スキームの記述が可能
  • Firefoxでは、背景画像のjavascript擬似スキームにおいて関数でくるんでやれば、通常不可能と考えられていることとは異なりalert()やdocument.cookieに手が届く。
  • style属性内で、IEとFirefoxとOperaが個々に従うべき記述を振り分け可能(珍しい知見ですがBadKnowHow)
  • style属性内では適宜バックスラッシュによる表現が可能なので危険文字列フィルターをバイパスするかもしれず、style属性の記述をユーザに許す意志がある場合には、サニタイズにあたっては悩まなくてはいけない。
  • 属性の記述を"などで括っておらずユーザの編集を許してしまった場合、当然のことながら、onclickなどの挿入を許してしまうことになるが、そこだけ注意することなく、style属性の挿入をも気をつけなくてはいけない。そもそも、ユーザ編集を許しているのに属性の記述を"や'で括っていないのはセキュリティ上自殺行為。忘れがちだが。また、"や'でせっかく括ってあってもサニタイズにおいて"や'を文字参照するのを忘れても同じことが発生する。
  • 余談ながらはてなでは、style要素の記述編集にあたって@importでは実質的にはてなの外部のスタイルシートを呼べない。外部スタイルシートははてなのサーバに、無害化された上でコピーされる。

以上の一覧のうち一部については実際に動くサンプルを用意しています。style属性のサニタイズについて考えたりする材料です。以下のハイパーリンクで。

間違っていますし小汚いソースですが上のサンプルのものです。style属性内でバックスラッシュを用いてブラウザ別に振り分けしているあたり、(Firefox仕向け部分は特に謎記述ですし)ジャンキーです、逝っています。笑ってやってください。

<!-- saved from url=(0014)about:internet -->
<html>

<link type="text/css" href="javascript:'.r1 { color: red; }'" rel="stylesheet">
<style>
  @import url("javascript:'.r2 { color: red; }'");
</style>
<style>
  @import url("javascript:'.r3 { color: red; }'");
</style>

<link type="text/css" 
href="javascript:(function test1(){alert('via link')})()" rel="stylesheet">

<style type="text/css">
  @import url("javascript:(function test2(){alert('via @import')})()");
</style>


<h2>Firefox - using javascript: pseudo url in stylesheet DOES work !</h2>
<div class="r1">
Should be red
</div>

<div class="r2">
Should be red
</div>

<p>There should also be three alerts, maybe?<br>
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=33961#c34">bugzilla:33961</a></p>

<!-- input class="r3" type="text" value="Should be red"
style="background:u\rl(&quot;javascript:(function test3(){alert('via STYLE Attribute')})()&quot;)" -->

<input class="r3" type="text" value="Should be red"
style="background:url(&quot;javascript:(function test3(){alert('\5Cu0028Opera\5Cu0029via STYLE Attribute')})()&quot;);\62\61\63\6B\67\72\6F\75\6E\64:\75\r\6C(&quot;\6A\61\76\61\73\63\72\69\70\74:\28\20\66\75\6E\63\74\69\6F\6E\20\74\65\73\74\33\28\29{\61\6C\65\72\74\28\27 \5Cu0028Firefox\5Cu0029 via STYLE Attribute \27\29}\29\28\29&quot;);background:\A url(&quot;javascript:(function test3(){alert('\u0028IE\u0029via STYLE Attribute')})()&quot;);">
</body>
</html>

結論。style属性からJavaScriptが起動できると何か良いことがあるのでしょうか。ブラウザ設計の理念を間違っているような気がします。是非やめて頂きたいものです。

出先なのですが、奇跡的かつ一時的にネット接続が可能なので日記を書いてみました。次の復帰は不明です。

■　詰め中将棋(515手詰め）

詰め中将棋(驚異の515手詰め)……もずさん(id:mozuyama:勝手に将棋トピックス)作(要:DHTML)……神。

上のリンク先で、正解を見る（選択▼）のリストダウンボックスで手順１を選択し再生ボタンを押します。

うひぃ515手。うっとりして眺めてしまいました。龍が追いかける手順で奇想天外かつ奇跡的な美しさのあるループを多重に繰り返していますね。盤面全体に意味がありますし凄い。はたして大山康晴十五世名人は解けるのでしょうか？いくら大山名人の強さの秘訣が親しんでいた中将棋にあったとしても。(中将棋では駒同士の連携が特に重要とのこと)