カテゴリー
技術

web2img – 一枚の画像ファイル内にパックしたウェブサイトを展開して動くツール

EtherDream/web2img は、ウェブサイトを一枚の画像内にまとめ、またそのまとめた画像をブラウザ上で展開して表示するツールです。

複数の html だけでなく、CSS ファイルや JavaScript ファイル、画像や動画などリソースファイルをすべてエンコードして一枚の画像が出てきます。

画像は簡易なリードオンリーのファイルシステムのように使われています。これを展開するためにはトップの html と JavaScript ファイル一つだけが必要で、これを置いたウェブページからは ServiceWorker 経由で先に作成した画像ファイルが読まれ、デコードされて格納されていた html/css/js/jpg/mp4 等を使った元々のウェブサイトが動きます。(ServiceWorker に対応しているブラウザで)

こちらに生成用のツールが公開されていて、実際に試せます。

Step 1 でローカルのウェブサイトのフォルダを指定すると、

フォルダに入っているファイルの情報と、ファイルをパックした画像が生成されます。

この画像ファイルをインターネット上の適当な場所に置いて、Step 3に入力すると、

この画像ファイルを展開して動かすための JavaScript ファイルを生成してくれます。

この js をこれを呼ぶ最小の html ファイルの二つを置くと、そのページではパックされた元々のウェブサイト/ページが表示されました。JavaScript を止めたり、ServiceWorker 非対応のブラウザで開くと何も表示されません。

とても面白いですが、これ何に使うんでしょう? Hacker News で紹介されてるタイトルはもっと直截で、「(画像掲示板の) imgur.com にウェブサイトをデプロイする(Deploy a website on imgur.com)」となっています。

ウェブ上に画像を無料や廉価で置けるサービスはたくさんあるので、この Web2img のようなものを使えばウェブサイトの本体部分をそうした画像置き場に置けてしまう、ということですね。Imgur を含めほとんどのサービスでは利用規約に触れるだろうとは思いますが。

サービス側でではアップロードされた画像がこの手の濫用に使われているものではないかをチェックする手間も増えますね。今でも違法なものをチェックして拒絶するために様々な努力がなされているはずですが。

今のジェネレーターではできあがった画像はランダムで意味がないものですが、画像としてもちゃんと意味があって復元できる上に、どこかにこういったファイル群が隠されているように作ることも難しいことではありません。

逆にいうと、アップロードした画像をそれとわからない程度に減色したり圧縮したりして保管して表示するサービスもありますが、その方がこういうhackな利用に耐性ができるということでしょうか。