JavaScriptのコードを難読化する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのコードを難読化する方法について解説しています。ここではプログラムの難読化を行う目的、JavaScriptを難読化するツールについて説明します。難読化に挑戦する際の参考にしてください。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
この記事を書いた人
テックアカデミーマガジン編集部
JavaScriptのコードを難読化する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
コードを難読化する方法について詳しく説明していくね！
お願いします！
難読化とは
その言葉通り、コードを読み難くする行為のことをいいます。読み難くするだけで、コードの動きには影響を与えません。今まで通り動くことが大事です。
また、パズルの様な扱いで難読化コードを公開すような場合もあります。良かったら、挑戦してみて下さい。
難読化するメリット
普通にプログラムを勉強していると、プログラムは読みやすくするように習うかと思います。実際、その方が良いばいいが多いです。しかし、では何故あえて「難読化」などをするのでしょうか？
読みやすくするのは、他の人が再利用したり問題点を見つけやすくしたりする為に行います。その逆に他の人が再利用したり、内容を理解出来ない様にするのが目的です。
主にJavaScriptはブラウザーで動くため、必ず公開されるプログラムとなってしまいます。そのため、苦労して考えたコードも誰でもマネできてしまう状況になっています。これらを簡単にさせないために、「難読化」が必要になりました。
最近では、JavaScriptだけでなく様々な言語でも利用される技術となっています。
難読化と暗号化の違い
ここで、暗号化とは違うの？という疑問が湧くかもしれません。暗号化と違うのは、「読み難いが読めるもの」と、「完全に読むことができないもの」の違いとなります。
暗号化された状況では、プログラムが動くことができません。また、圧縮や最適化といったプログラムの変換作業もあります。圧縮はプログラムを軽くするもので、最適化はプログラムを早くするものです。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
難読化する方法
難読化には、ツールを使うのが一般的です。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サービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
