i-mobile
次へ下へ

Everyday Pieces ::

ありふれたカケラ::人生というジグソーパズルのピースたち

立体物に精密印刷な転写技術
USBハブなKVMスイッチ

JavaScriptのコードをPNGに偽装!?

プログラム
公開日:2015年5月13日

JavaScript を PNG に圧縮する

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

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

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

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

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

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

1
2
direct call: inner
indirect call: outer

それにしても、もともとは読み込み時間を短くするために、
Closure Compiler とかを使ってJavaScriptコードを圧縮す


i-mobile
上へ次へ