JavaScriptの難読化・圧縮を行うClosure Compiler

HTML5が世間に広まってからもう10年以上が経ち、ウェブシステムのフロントエンドはHTML / CSS / JavaScriptで構成することが一般的になりました。公開されているサイトは動的なものが増え、Ajaxによりデータを取得するためその処理はJavaScriptで書かれています。しかし、JavaScriptは非常に注意しなければいけないファイルです。JavaScriptのファイルは誰でも見ることができますので、ソースコードを改ざんされ、最悪の場合、大切なデータを全て抜き取り・改ざんにつながることもあります。

セキュリティを高める

ではセキュリティを高めるにはどうすればいいのでしょうか。JavaScriptが誰でも見れるファイルであることは仕方がないので、見られることを前提でシステムを考えなければいけません。大きく分けると、次の2つが挙げられます。

  1. システムにおいてコアな処理はサーバサイドで行う
    例えば、ECサイトでお金を払ったかどうかの処理をJavaScriptだけで行っているサイトはありません。なぜならJavaScriptだけだとチートし放題になってしまい、お金を払わずに購入手続きができてしまうからです。そのため、購入手続きは必ずサーバサイドで行います。これと同じようにチートされて困るような処理は、必ずサーバサイドで行うようにします。
  2. JavaScriptのソースコードを難読化する
    多くのブラウザゲームは、その処理をJavaScriptで行います。それはJavaScriptでなければスムーズな動きを演出することができないからです。20世紀のブラウザゲームであれば技術がなく1アクション毎にサーバにアクセスすることがあったかもしれないですが、近年のHTML5ゲームではありえません。そのためJavaScriptのソースコードを難読化し、簡単にチートできないようにします。

実際の現場では、1・2の両方を組み合わせて利用しています。1. についてはシステム毎に変わる内容ですので、ここでは2. についてその方法を紹介します。

JavaScriptソースコードの難読化

一言に難読化と言ってもどのようなことが行われるのでしょうか。主に次のような処理が行われます。

  • 変数名を短くする
  • 改行, スペース, タブ, コメントの削除
  • コードの冗長性を排除

これにより次のようなメリットも得られます。

  • 変数名からその役割を判断できなくなる
  • ソースコードの圧縮によりロード時間を短縮できる

このJavaScriptの難読化を行うツールは数多く存在しますが、ここではGoogleが提供しているClosure Compilerを紹介します。

Closure Compiler
https://closure-compiler.appspot.com/home

Closure Compiler

それでは実際にどの程度の難読化・圧縮ができるのか試してみましょう。難読化に用いたJavaScriptのソースコードはjQuery 3.3.1開発版のものです。

https://code.jquery.com/jquery-3.3.1.js

Closure Compiler

Closure Compilerの画面左にオリジナルのソースコードを入力します。そしてソースコードの上にある「Compile」を押下すると、数秒後に右の画面に難読化されたソースコードが表示されます。パット見ただけでもソースコードを読み取ることが難しくなったことが判るかと思います。その圧縮率(gzipなし)は約66.6%と約2/3にまで短くなりました。さらにgzipを利用していると約60%まで小さくなります。
あとは画面右側に表示されているソースコードをコピーして、元のソースコードと入れ替えるだけで対応完了です。

実際の開発の現場では、いちいちこの画面を利用するのは面倒ですので、このClosure Compilerを統合開発環境に組み込みます。それ用に「closure-compiler-v2018xxxx.jar」も提供されています。Closure Compilerは多くの統合開発環境でサポートされていますので、ぜひご利用下さい。

https://developers.google.com/closure/compiler/?hl=ja

まとめ

JavaScriptの難読化・圧縮が重要な作業であることが判って頂けましたでしょうか。またその作業も難しいものではなく、Closure Compilerを利用するとコピペだけで済むものでした。サイトを健全に運営するには必要な作業ですので、ぜひ開発の一連の作業に組み込んで下さい。

» お仕事のご依頼はこちら