JavaScriptの動的生成

【PHP TIPS】 12. JavaScriptをPHPで記述しよう:ITpro

JavaScriptを使用したスクリプトを記述していて、条件による分岐を いちいち記述していくのが面倒だなーと思ったことはないでしょうか。 そんなときにちょっぴり役に立つ技を紹介したいと思います。 それは読み込むJavaScriptファイルをPHPで記述してしまう方法です。 これを使えば、面倒なJavaScriptPHPスクリプトで動的に変化させる ことができるようになります。

JavaScriptを動的に生成することが是非がはてなブックマークでも議論になっているが、私もこの問題について考えてみた。私はスクリプトの動的生成には否定的な立場である。その理由を書いてみよう。

サンプルプログラムの提示するもの

サンプルとして定時されたプログラムは、GETパラメータflagの内容にしたがって、alert('aaa')とalert('bbb')を切り替えるものである。
サンプルなので仕方ないのかもしれないが、もう少し現実的なものを提示してもらわないと、有用性がよくわからない。JavaScriptだけでやっても大して変わらないのではないか?おそらく、この方法で効果が出るのは、もっと大きなスクリプトの場合だろうと思う。しかし、大きなJavaScriptの開発やテストは結構大変だ。
ということから、

JavaScriptのソースが確定しないのでテストがやりにくい

大規模なJavaScriptを開発する際には、いくつかの関数に分解した上で、単体テストをしっかり実施したい。しかし、スクリプトの動的生成をおこなうと、この単体テストがやりづらくなるのではないか。スクリプト自体が、アプリケーションの条件によって変化するからである。

モジュール間の独立性が下がる

Ajaxの場合を持ち出すまでもなく、Webアプリケーションはサーバーサイドのアプリケーション(この場合はPHP)とクライアント側のスクリプト(JavaScript)が連携して動作する。メンテナビリティという観点から、できるだけ両者を疎結合にして、独立性を高く保ちたい。具体的には、両者のインプットとアウトプットを明確に、かつ最小限にすることである。
しかるに、PHPJavaScriptを生成するというのは密結合の極致であって、インターフェースがはなはだ不明確になる。小さなプログラムならよいかもしれないが、大きくて複雑になるとメンテが大変だろう。

セキュリティ上の問題

スクリプトを動的生成すると、動的なパラメータ(GET/POSTに限らない)をスクリプト上に展開する可能性が高い。そこにXSSなどのセキュリティ上の問題が発生する可能性がある。外部からのパラメータはhiddenフィールドなどに押し込めることが望ましい。
スクリプト内でのエスケープ処理は、hiddenフィールドの場合に比べて複雑になるし、hiddeフィールドに動的なパラメータを押し込めることによって、対策の必要な箇所が明確に限定できる。

2007/05/12 17:48追記
JavaScriptのセキュリティ上の問題については、XSS対策:JavaScriptなどのエスケープ - ockeghem(徳丸浩)の日記も参照のこと。