JavaScriptの仕様を活用した難読化ツールを作りました。
Webフロントエンドを想定しています。本体はこちらです。
そのJavaScriptの仕様とは？
それは、「関数の巻き上げ」です。
巻き上げというのは総称で正式名称ではないのですが、このような機能があります。
この機能についてはこう書かれています。
JavaScript の巻き上げ (Hoisting) は、インタープリターがコードの実行前に、関数、変数、クラス、インポートの宣言をそのスコープの先頭に移動するように見えるプロセスを指します。
これをわかりやすく言うと、実行時に宣言が全て上に行くということです。
それを用いてどう難読化するのか？
実行時に宣言が全て上に行くということは、スコープ内の関数宣言はスコープ内のどこに書いてもいいということです。
ということで、関数宣言位置をランダムにすることで難読化します。
なぜ難読になるのか？
JavaScriptプログラムは、最小化されていてもある程度の傾向が読めます。
例えばWebフレームワークではスクリプトの最後に、DOMにマウントするコードがあるなど。
Vueであればkl(ql).mount("#app")という構文から
createApp(App).mount("#app")という構文が見えるはずです。
それらを関数として包んでどこかコードの果てに飛ばせば、解析も多少は困難になるはずです。
その程度で難読になるのか？
Webフロントエンドにおいて、"解析できない"というのは無いです。
見られる前提で作るべきなんです。
今回作ったのは、一発見て「あ、これVueだ」とならないようにするだけの難読化です。
そして、これのような本格的な難読化は、最終的なコード量が超肥大化してしまい、速度も犠牲になってしまいます。
そのため、少し程度であるべきなんでｓ
実装はどうなの？
acornというJavaScriptパーサーでASTにして、それを操作して関数をシャッフルした後にescodegenで元に戻します。
余計なことしてない？
クレジットコメントがへばりついてたので、ついでにAST化→escodegenを使って戻すことですべてのコメントを排除できるようにしました。
使うには？
acornとescodegenをインストールする必要があります。
$ npm i -D acorn escodegen
# or
$ bun i -D acorn escodegen
そしてTypeScriptで出来ているため、もしJavaScript環境で使いたいなら型宣言を頑張って消してください。