WebサイトのJavaScriptは丸裸です。Webブラウザーには、JavaScriptのコードを見たり、実行を止めて一行ずつ実行するステップ実行の機能が付いています。そのため、容易に何がどのように実行されるのかを調べることができてしまいます。そこで、JavaScriptの処理を隠すために、難読化が行われます。

　前回は、変数名や関数名を無意味なものにして、プログラムを読みにくくする難読化について紹介しました。今回は、少し趣向を変えて、画像ファイルの中に、JavaScriptのプログラムを埋め込んでしまうというテクニックを紹介します。

画像にプログラムを埋め込む方法

　ちなみに、本連載では、以前にも、PNGファイルの中に、データを埋め込むという手法を紹介しました（関連記事：PNGファイルに重要データを埋め込むツールを作ろう）。

　ただし、その際は、JavaScriptの実行環境Node.jsと専用モジュールを使って、バイナリファイルの構造を解析して書き換えるという手段を用いて処理しました。この方法は、Node.jsだからできた手法であり、Webブラウザーではバイナリファイルの扱いが不自由です。

　そこで、今回は、画像の画素の一点に、プログラムの一文字を埋め込むという手法で挑戦してみます。どういうことかと言うと、画像は点の集まりで出来ています。256ピクセル×256ピクセルの画像であれば、65536（=256×256）の点の集合で画像を表現しているということです。

　しかも、PNG形式の画像であれば、一つの点を表すのに、1677万色（24ビットフルカラー）を利用することができます。ちなみに、アルファベット１文字であれば8ビット、日本語1文字であれば16ビットで表現できます。つまり、画像の中にJavaScriptのプログラムを、色情報として埋め込むことが可能ということです。

　加えて、今回調べてみると、PNGファイルの中にJavaScriptを埋め込むという手法は、JavaScriptで図形の描画が可能になった当初から、実験されており興味深いものです。