インラインJavaScriptにおける定型コメントがContent-Typeによっては有効になる

2017年10月27日

とあるASPで各ページに自動的にJavaScriptスクリプトタグが挿入される仕様なのですが、それが動かなくてハマった話です。

ASPこんな感じのスクリプトがbodyタグ直下に問答無用で挿入されます。

<body>
<script>
<!--
// 
function methodA() {
	console.log('here');
}
//-->
</script>
...
</body>

ですが、methodAが呼ばれるタイミングで関数が定義されていませんとエラーが出るんです。

methodA();

Uncaught ReferenceError: methodA is not defined

なんでかと悩んでいるとDeveloper Toolのソースを確認すると全てコメントとして認識されてました。

スクリプト部分が緑色になっていて全てコメントとして認識されているのがわかります。
ですがスクリプト冒頭の<!–が認識されているんだろうけど昔からよくある定型文だし悪さしそうにないだけど…

原因がわからなかったので怪しそうなところひたすら変更して反応する部分を探ってみました。
そうしたらmetaタグのcontent-typeを変更したら動きました。

<!-- <meta charset="UTF-8"> このタグを下に変更 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

ただ、ローカルで試しても同じ事象が再現できなかったのでもう少し深堀していたところ、
このASPは<meta http-equiv=“Content-Type”>を探すとResponse HeaderのContent-Typeをそれに合わせて変更していました。

そしてmetaタグが見つからないと

Content-Type: application/xhtml+xml;charset=UTF-8

としてResponse Headerを返していて、これが原因でスクリプトが全コメントアウトされてしまっていました。

ASP特有の動きも合わせての挙動だったのでハマりましたが、Response Headerがapplication/xhtml+xmlの場合はインラインスクリプト冒頭に<!–を入れるとコメントアウトとして認識されてしまうということはハマりそうなのでまとめてみました。

新規では特別な理由がない限りapplication/xhtml+xmlを使わないと思いますが、
古いシステム保守だったり、今回のようなどこかのASPに乗っかる時にJavaScriptが動かずハマったらContent-Typeを確認してみてください。