script, styleタグ内のコードの書き方
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。
さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。
まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。
scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<！--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。
しかし、scriptタグはNetscape Navigaterは2.0から、Internet Explorerは3.0から対応しています。古い携帯電話ではscriptタグに非対応な場合があり、それらはまだ使われている場合もあると思われますが、そもそもそういう携帯は専用のHTMLじゃないとまともに表示できません。
なので、<！-- // -->は不要という結論で良いと思うのですが、こういう話もあります。
IE8のXSSフィルタ誤検出で起こるscriptタグ破壊によって本来JSとして出力されるはずの要素がHTMLとして出力されることによって引き起こされる脅威の度合いがどれぐらいか調べてる。
ソースが表示されてユーザーが怖がるのはscriptを<!-- -->内に書くことで回避出来る。いくつか試したけどformとかonmouseoverもついでに無効化されるから悪用は出来ないっぽい感じがする。基本的にはHTMLとして解釈してもJSとして解釈しても安全にしといた方がいい
脅威の度合いとしては誤検出なのに騒ぐユーザーが一番大きい
元々出力されるHTMLに含まれるscriptタグを検索文字列に指定することで大体のサイトでXSSフィルタの誤検出は起こせるんだけど、ユーザーが知らないもんだから脆弱性があるとか勘違いする。
<！-- //-->はXSSフィルタの
ただ、そのユーザーが嫌がらせを受けているのはほぼ確実なので、それがユーザーの目にも見えたほうが良いとも考えられます。前提に戻って、インラインにコードを書かないという対策を取るのがベターでしょう。
追記:
IE8のXSSフィルタの誤検出時の動作、なんか変わった気がするな、以前はscriptタグ破壊で中身そのまま出力されてたのがされなくなってるっぽい。
<！--を使わなくてもスクリプトが出力されるってことはなくなったらしいので、やはり<！--は不要です。もう一度言います。不要です。
また、script要素に対応していないブラウザでは<！-- //-->でコメントアウトしていると、文字列リテラル中に-->が出てきた時にそれをコメントの終了みなしてしまって、それ以降がコメントとみなされないという問題もあります。詳しくはXSS対策:JavaScriptのエスケープ(その3) - ockeghem(徳丸浩)の日記に。ほとんどの場合、JavaScriptが動かない程度の問題でしかないので脅威ではありませんが、<！-- // -->を避ける理由としては十分でしょう。前述の通り、script要素に対応していない環境は考慮する必要はもはやないので、特に気にする必要はないでしょう。
なお、当たり前ですが「ブラウザがscript要素に対応していない」と、「JavaScriptを無効にしている」というのは別の話です。script要素に対応していない環境は想定しなくとも、JavaScriptを無効にしているユーザーやscriptを実行しないブラウザのためにnoscript要素などで代替コンテンツなどを用意するべきです。
ちなみに、
@taku_eof: @monjudoh "Polyglot Markup" URL には、CDATA セクションにしておこうぜ……という旨の話が書かれていたりします。
2010-07-28 11:49:22 via Tween to @monjudoh
<script> //<![CDATA[ (script goes here) //]]> </script> <style> /*<![CDATA[*/ (styles go here) /*]]>*/ </style>
の形が例示されています。
これは、HTMLとしても、XHTMLとしても解釈できるようにするためのテクニックです。
ちなみに、scriptの時もstyleにあわせて、
<script> /*<![CDATA[*/ (script goes here) /*]]>*/ </script>
としてもOKです(逆はできません)。
ただ、前者がコメントアウト→CDATA開始→スクリプト本体→コメントアウト→CDATA終了とまだ違和感なく解釈されるのに対して、後者はコメントアウト開始→CDATA開始→コメントアウト終了→…と開始と終了のネストに違和感があります。まあ、styleタグではどうしようもないし、気分的な問題に過ぎませんが。
つまりは、結局のところはこれもバッドノウハウなので、XHTMLやSVGとか(要はXML)では/**/を入れずに直接 <！[CDATA[ を書き、HTMLでは直にコードを書くほうが良いような気もします。悩ましいところですね。
もひとつおまけで、scriptタグ内の<！--をブラウザはどう解釈しているのかというと、実は//(一行コメント)として解釈しているそうです。ネタ元→HTMLJS - JavaScriptで遊ぶよ - g:javascript
なので、下記のalertは実行されません。*2
<script> <！-- alert('hello'); // 実行されない 1; //--> </script>
以上、小ネタの盛り合わせでした。
