ユーザー入力文字列を識別子に使うのはやめよう

やあ子供たち。
ユーザーが入力した文字列を、IDに使おうなんて考えて痛い目にあったという話です。まーするわけないよね普通だったらね。でも惰性で作ってきてそうなっちゃったみたいな場合もあるわけで。そんなことしてたら、すくなくともこんな痛い目を見ましたという話。

すっかりユーザーが入力してくる文字列というものに注意を払ってないままに、入力結果を見てみると、例えば、30人に1人くらい「my name is "J"」という内容を打ち込んでくれたとしましょう。すると、以下のようなejs出力内容が、しれっとそのままブラウザに送信されてしまうことはごく当然の帰結として起こり得る、というか実際に起こってしまうことなのですが、

<body>
  // HTML部品を設置
  <h1 id="my name is &#34j&#34">"Hello HTML.&#34</h1>
  <script type="text/javascript">
    // プログラムを記述
    var h1 = document.getElementById("my name is &#34j&#34");// エラー
    //var h1 = document.getElementById("my name is \"j\"");// エラー発生せず
    h1.textContent = "OK. byebye";
  </script>
</body>

このコードは、ブラウザのgetElementById()の解釈で、エラーとなります(少なくともChromeで)。
ちなみにここで、アンパサンドシャープ34を、手動で修正して \" にすれば、エラーは発生しません。→何かしらの理由はあるのだろうがこれ以上深く考えたくない。となります。
ここでは素直に、「例えば、getElementById()は、アンパサンドシャープ34のような表記をうけつけないのだな」ということを学びましょう。わかりました。はい。そういうものなんですね。(アンパサンドシャープ34をそのまま半角でこの文章内に書いても、「"」となってしまう。ごめんね。)
そしてその学習の結果、獲得した教訓はこうでした。

  • ユーザーの入力には気をつけろってこと。
  • ユーザーが入力した文字列を何かの識別子には決して使わないこと。
  • getElementByIdの動作には何か理由があるのだろうがgetElementByIdは悪くないし、そこはもう深入りしない。

じゃっ、今日はこの辺で。
チャオ!