今回、Javascriptで簡単なWEBアプリを作ってみたのですが、現状、外部のjsファイルをhtmlファイルに読み込ませており、これではjsファイルのリンクをクリックするだけで読まれてしまいます。
しかし、Javascriptについてはまだまだ勉強中であることと、似たようなアプリの競合もいることから、ソースコードを見られたくないなあと思い、なんとか見られないようにする方法はないものかと考えてみました。
しかし、Javascriptがクライアントサイドスクリプトである以上、完全に見られないようにするのは難しいようです。
有償の暗号化ソフトもあるようなのですが、そこまでなかなか手も出せないので、せめてソースコードの難読化するために、無料でWEB上で使える「packer」を試してみました。
ただ、難読化したものを解読するソフトもあるようなので、これも完全ではありません。
あとで編集できるようにするため、念のためjsファイルのバックアップを取っておきます。
全文英語でとっつきにくい印象ですが、操作はいたって簡単で、圧縮したいソースコードをを元のjsファイルからコピーし、①にペーストします。
③の「Pack」ボタンをクリックします。
④に圧縮されたソースコードが表示されますので、あとは全文をコピーしjsファイルにペーストします。
最初「ready」となっている⑤の箇所に、圧縮率が表示されます。
これだけなのですが、少し注意しなければならないのは、②の「Base62 encode」と「Shrink variables」です。
「Shrink variables」は直訳すれば「変数の圧縮」ということで、「Shrink variables」にチェックを入れれば変数が圧縮されるのだなとなんとなく想像できますが、「Base62 encode」はわからなかったので調べてみると、「Base62 encode」にチェックを入れると「英数字のみのエンコード」または「圧縮率が高くなる」という説明でした。
これだけではわからなかったので、実際に自作のJavascriptのコードで試してみました。
まず、「Base62 encode」と「Shrink variables」の両方にチェックを入れないで圧縮してみたところ、改行と空白が削除されただけという内容で、圧縮率は約68％でした。
次に、「Base62 encode」だけにチェックを入れ圧縮したところ、変数が英数字に置き換わっているのと、データ部分の日本語と英字混じりになっていた箇所の英字部分が数字に置き換わっており、圧縮率は62％でした。
今度は「Shrink variables」だけにチェックを入れたところ、最初に試したのと同じく改行と空白だけが削除されただけといった内容で、圧縮率も同じ68％という結果でした。
最後に、「Base62 encode」と「Shrink variables」の両方にチェックを入れたところ、2番目に試したのとほぼ同じ内容で、かなり難読化されており、圧縮率も62％でした。
Javascriptの内容によっても異なるかと思いますが、今一つ、この「Base62 encode」と「Shrink variables」の使い方がわかりませんでしたが、圧縮率を最大にし、難読化もしたいという場合は、両方にチェックを入れればいいかと思いました。
ちなみに、⑥の「Decode」ボタンですが、これは、「Base62 encode」と「Shrink variables」の両方にチェックを入れるか、もしくはどちらか一方にチェックを入れ圧縮した後に「Decode」ボタンを押すと、「Base62 encode」と「Shrink variables」の両方にチェックを入れない場合の改行や空白だけが削除された状態に戻るようです。
難読化されたjsファイルで動作確認を行ったところ、問題なく動きました。
そして、htmlファイルの中でリンクされているこのjsファイルをクリックしてみると、横一列の長いコードとなっていました。
もちろん、このソースコードをメモ帳かterapadなどにコピペすれば全文を見ることができますので、プログラミングに慣れた人が見れば、すぐに解読されてしまうのかもしれませんが、あまりプログラミングに慣れていない人にとれば、横一列の長いコードを横スクロールで見ようとしないでしょうし、メモ帳にコピペして見てもある程度難読化されていますので、簡単には読めないのではないかと思います。
Javascriptの暗号化というのは無理としても、このように、プログラミングに慣れていない人に対して見えにくくする難読化程度でよいという場合、合わせてjsファイルの軽量化もできるこのpackerはとても便利かと思います。