JavaScriptのコードを難読化する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのコードを難読化する方法について解説しています。ここではプログラムの難読化を行う目的、JavaScriptを難読化するツールについて説明します。難読化に挑戦する際の参考にしてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
この記事を書いた人
テックアカデミーマガジン編集部
JavaScriptのコードを難読化する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
コードを難読化する方法について詳しく説明していくね！
お願いします！
難読化とは
その言葉通り、コードを読み難くする行為のことをいいます。読み難くするだけで、コードの動きには影響を与えません。今まで通り動くことが大事です。
また、パズルの様な扱いで難読化コードを公開すような場合もあります。良かったら、挑戦してみて下さい。
難読化するメリット
普通にプログラムを勉強していると、プログラムは読みやすくするように習うかと思います。実際、その方が良いばいいが多いです。しかし、では何故あえて「難読化」などをするのでしょうか？
読みやすくするのは、他の人が再利用したり問題点を見つけやすくしたりする為に行います。その逆に他の人が再利用したり、内容を理解出来ない様にするのが目的です。
主にJavaScriptはブラウザーで動くため、必ず公開されるプログラムとなってしまいます。そのため、苦労して考えたコードも誰でもマネできてしまう状況になっています。これらを簡単にさせないために、「難読化」が必要になりました。
最近では、JavaScriptだけでなく様々な言語でも利用される技術となっています。
難読化と暗号化の違い
ここで、暗号化とは違うの？という疑問が湧くかもしれません。暗号化と違うのは、「読み難いが読めるもの」と、「完全に読むことができないもの」の違いとなります。
暗号化された状況では、プログラムが動くことができません。また、圧縮や最適化といったプログラムの変換作業もあります。圧縮はプログラムを軽くするもので、最適化はプログラムを早くするものです。
難読化する方法
難読化には、ツールを使うのが一般的です。Javascriptで利用できるツールを幾つか紹介します。
■Javascript Obfuscator
恐らく、一番普及していると思われるツールです。初心者でも利用しやすくなっています。
■Closure Compiler
Googleが提供しているものです。圧縮や最適化がメインと思われます。
■jjencode
デコーダーがあるので、元に戻すことも容易です。一度は試してみるのもいいかと思います。
コード難読化の実行方法
ここでは実際にJavascript Obfuscatorを使ってコードを難読化してみましょう。
Javascript Obfuscatorは Node.js などでも利用可能ですが、今回は簡単に利用するために CDN 経由で利用します。
<script src="https://cdn.jsdelivr.net/npm/javascript-obfuscator/dist/index.browser.js"></script>
<script>
const obfuscationResult = JavaScriptObfuscator.obfuscate(
`
(function(){
const answer = 10 / 2;
console.log("Answer is " + answer);
})();
`,
{
compact: false,
controlFlowFlattening: true,
controlFlowFlatteningThreshold: 1,
numbersToExpressions: true,
simplify: true,
stringArrayShuffle: true,
splitStrings: true,
stringArrayThreshold: 1
}
);
console.log(obfuscationResult.getObfuscatedCode());
</script>
変換する JavaScirpt のコードは以下のたった4行のコードです
(function(){ const answer = 10 / 2; console.log("Answer is " + answer); })();ちなみにこの JavaScript を実行すると
Answer is 5
という処理結果になります。
上記 HTML をブラウザで開いて、開発者ツールで確認するとコンソールに以下の通り変換されたコードが出力されます。
function _0x511f(_0x2b227d, _0x29331f) {
const _0x1d32cd = _0x4192();
return _0x511f = function (_0x30cf84, _0x5c79d1) {
_0x30cf84 = _0x30cf84 - (0xab * 0x11 + 0x1634 + -0x1fd2);
let _0x652507 = _0x1d32cd[_0x30cf84];
return _0x652507;
}, _0x511f(_0x2b227d, _0x29331f);
}
(function (_0x4ad4e7, _0x2a408d) {
const _0x1c96ec = _0x511f, _0x4b23c6 = _0x4ad4e7();
while (!![]) {
try {
const _0x3d53bf = -parseInt(_0x1c96ec(0x1cb)) / (-0x2 * -0xcfa + 0x1652 + -0x55d * 0x9) + -parseInt(_0x1c96ec(0x1c5)) / (0xa8d * -0x1 + 0x18f2 + -0xe63) * (parseInt(_0x1c96ec(0x1c6)) / (0x24f7 + 0x12ce + -0x37c2)) + -parseInt(_0x1c96ec(0x1c3)) / (-0xf * 0x26e + -0x1df0 + 0x4266) + parseInt(_0x1c96ec(0x1bd)) / (-0x2 * -0x1345 + 0x1317 + 0xc * -0x4cd) * (parseInt(_0x1c96ec(0x1cc)) / (-0x1 * -0x259f + 0x2017 + -0x22d8 * 0x2)) + -parseInt(_0x1c96ec(0x1bf)) / (-0xf26 + -0x1429 + 0x2356) * (parseInt(_0x1c96ec(0x1c0)) / (-0x56f * -0x7 + 0x212a + -0x472b)) + parseInt(_0x1c96ec(0x1c8)) / (-0x57 * 0x45 + 0x1fe4 + -0x1 * 0x868) * (-parseInt(_0x1c96ec(0x1ca)) / (-0x1aea + 0x1 * 0x1afe + 0x5 * -0x2)) + parseInt(_0x1c96ec(0x1be)) / (0xd01 + -0x14 * 0xd + 0x5f9 * -0x2);
if (_0x3d53bf === _0x2a408d)
break;
else
_0x4b23c6['push'](_0x4b23c6['shift']());
} catch (_0x527883) {
_0x4b23c6['push'](_0x4b23c6['shift']());
}
}
}(_0x4192, -0x1aa82 + 0x54ebd + 0x27326), (function () {
const _0x5db334 = _0x511f, _0x5b8bd = {
'xFRLT': function (_0x3b72d4, _0x61bf16) {
return _0x3b72d4 / _0x61bf16;
},
'HtrFa': function (_0x1906f5, _0x18caae) {
return _0x1906f5 + _0x18caae;
},
'tBxto': _0x5db334(0x1c2)
}, _0x50777c = _0x5b8bd[_0x5db334(0x1c9)](0x150 + 0x13be + -0x1504, 0x8ed + -0x857 + -0x94);
console[_0x5db334(0x1c1)](_0x5b8bd[_0x5db334(0x1c4)](_0x5b8bd[_0x5db334(0x1c7)], _0x50777c));
}()));
function _0x4192() {
const _0x4673a6 = [
'207uvJuUq',
'xFRLT',
'187030YunZzf',
'190756QbJzXP',
'1429368NnURfF',
'10XDiQfG',
'21477093BWIyIt',
'14455YiwPAS',
'2344BYlfpt',
'log',
'Answer\x20is\x20',
'2121684WaHLNU',
'HtrFa',
'2owKkrv',
'819981kduanS',
'tBxto'
];
_0x4192 = function () {
return _0x4673a6;
};
return _0x4192();
}
入力として与えた4行のコードとは似ても似つかないコードになりましたね。
しかしこちらを実行するとちゃんと
Answer is 5
という処理結果となり、同じ結果が得られることがわかります。
まとめ
本記事では、Javascriptのコードを難読化する方法について解説しました。
- 難読化とは
- 難読化のメリット
- 難読化と暗号化の違い
- 難読化する方法
- コード難読化の実行方法
コードの難読化を理解することで、プログラムの盗作やセキュリティ的な防御を実現できます。
ぜひ使いこなせるように覚えておきましょう。
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
