読者です 読者をやめる 読者になる 読者になる

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じゃないとまともに表示できません。
なので、<!-- // -->は不要という結論で良いと思うのですが、こういう話もあります。





<!-- //-->はXSSフィルタの誤検出隠しに有効とのこと。
ただ、そのユーザーが嫌がらせを受けているのはほぼ確実なので、それがユーザーの目にも見えたほうが良いとも考えられます。前提に戻って、インラインにコードを書かないという対策を取るのがベターでしょう。

追記:


<!--を使わなくてもスクリプトが出力されるってことはなくなったらしいので、やはり<!--は不要です。もう一度言います。不要です。

また、script要素に対応していないブラウザでは<!-- //-->でコメントアウトしていると、文字列リテラル中に-->が出てきた時にそれをコメントの終了みなしてしまって、それ以降がコメントとみなされないという問題もあります。詳しくはXSS対策:JavaScriptのエスケープ(その3) - ockeghem(徳丸浩)の日記に。ほとんどの場合、JavaScriptが動かない程度の問題でしかないので脅威ではありませんが、<!-- // -->を避ける理由としては十分でしょう。前述の通り、script要素に対応していない環境は考慮する必要はもはやないので、特に気にする必要はないでしょう。
なお、当たり前ですが「ブラウザがscript要素に対応していない」と、「JavaScriptを無効にしている」というのは別の話です。script要素に対応していない環境は想定しなくとも、JavaScriptを無効にしているユーザーやscriptを実行しないブラウザのためにnoscript要素などで代替コンテンツなどを用意するべきです。


ちなみに、

で触れられているように、Polyglot Markup(和訳)では

<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タグではどうしようもないし、気分的な問題に過ぎませんが。
つまりは、結局のところはこれもバッドノウハウなので、XHTMLSVGとか(要はXML)では/**/を入れずに直接 <![CDATA[ を書き、HTMLでは直にコードを書くほうが良いような気もします。悩ましいところですね。

もひとつおまけで、scriptタグ内の<!--をブラウザはどう解釈しているのかというと、実は//(一行コメント)として解釈しているそうです。ネタ元→HTMLJS - JavaScriptで遊ぶよ - g:javascript
なので、下記のalertは実行されません。*2

<script>
<!-- alert('hello'); // 実行されない
1;
//-->
</script>

以上、小ネタの盛り合わせでした。

*1:はてな記法でコメントアウトされないように!を全角にしています

*2:もう一度繰り返しておくと、はてな記法でコメントアウトされないように!を全角にしています