JavaScriptのコードをPNGに偽装！？

「JavaScript を PNG に圧縮する」

　これは面白い！
難読化というかステルスなJavaScriptとして使えそうです(^_^;)
DOM生成とかも全てJavaScriptでやれば、
一つのhtmlファイルだけで完結するアプリとか作れちゃいそうですね。
サーバー側の仕組みとか無しで、
クライアント側だけで出来ちゃうのがポイントですね。
仕組みとしては以下の様な感じのようです。
１）JSコードの文字列をcanvasのimagedataとして詰め込む。
２）自己解凍なコードをチャンクとして埋め込んでPNGにエンコードする。
３）拡張子をhtmlにしたファイルとして生成する。
JSコードに戻すには上記の逆をやれば良いことになりますが、
PNGのデコードはブラウザの方でやってくれるので、
１）の逆だけで済みますね。

　特定の公開フォルダに置いたPNGのMIMEがtext/htmlとして解釈されるように
サーバーの設定とか出来れば、画像が置かれているだけのように見えますね。
といってもサーバー管理者以外に意味なさそうですが(^_^;)

　自己解凍の仕組みがスゲー巧妙＆トリッキー！
バイナリであってもHTMLとして解析できれば動いちゃうのですね(^_^;)
こちらのデモでダウンロードした、png.html を png.png にリネームすると、
ちゃんと画像として表示できます。

　ときに、自己解凍のコードに (1,eval)(e) とあるのが気になりました。
そういえば自分は eval とか使ったこと無いなぁ。
こちらによると、間接のeval呼び出しはグローバルスコープで実行されることが保証されているそうです。
以下のようなコードを実行すると、

var x = 'outer';
(function() {
  var x = 'inner';
  eval('console.log("direct call: " + x)'); 
  (1,eval)('console.log("indirect call: " + x)'); 
})();

↓こんな結果になるそうです。一つ勉強になりました。

direct call: inner
indirect call: outer

　それにしても、もともとは読み込み時間を短くするために、
Closure Compiler とかを使ってJavaScriptコードを圧縮するわけですが、
意図せずしてコードの難読化にもなっていたりします。
とは言えテキストなので読もうと思えばナントカ読めます。
しかしバイナリ圧縮までされるともう読む気が失せますね(^_^;)
というか最近は Emscripten で変換したコードとかあって、
もはや人間が読めるような代物でないのもありますが(^_^;)

　ちなみに、jQueryは↓こんな画像になるようです。