参考サイト
- https://github.com/elmeet/vite-plugin-javascript-obfuscator
- https://www.npmjs.com/package/javascript-obfuscator
インストール
次のコマンドを実行すれば良い。
npm install vite-plugin-javascript-obfuscator
vite.config.js の編集
開発用サーバを起動するnpm run devコマンドと、
ビルドするnpm run buildコマンドで実行する内容を分けているので、optionsのapplyは指定しない。
下記内容をpluginsの配列へ追加する。
obfuscatorPlugin({
options: {
exclude: [/node_modules/],
debugProtection: true,
},
}),
debugProtectionについて
https://github.com/javascript-obfuscator/javascript-obfuscator?tab=readme-ov-file#debugprotection
結果確認
ReactRouterで設定した404ページ用のコンポーネントの内容を比較しながら見ると、
難読化の目的は達成できているので良しとする。
難読化していないコード
import {j as e} from "./Demo-D_zvdyIk.js";
function t() {
return e.jsx("div", {
className: "flex justify-center",
children: e.jsxs("div", {
className: "flex flex-col items-center pt-20",
children: [e.jsx("div", {
className: "text-9xl",
children: "404"
}), e.jsx("div", {
className: "my-4 text-2xl",
children: "Not Found"
})]
})
})
}
export {t as T};
難読化したコード
import {j as u} from "./jsx-runtime-C0Rai-_4.js";
(function(n, e) {
for (var t = r, x = n(); ; )
try {
var c = parseInt(t(386)) / 1 + parseInt(t(365)) / 2 + parseInt(t(360)) / 3 + -parseInt(t(372)) / 4 + -parseInt(t(385)) / 5 * (-parseInt(t(378)) / 6) + parseInt(t(373)) / 7 + parseInt(t(380)) / 8 * (-parseInt(t(381)) / 9);
if (c === e)
break;
x.push(x.shift())
} catch {
x.push(x.shift())
}
}
)(i, 982619);
var f = function() {
var n = !0;
return function(e, t) {
var x = n ? function() {
var c = r;
if (t) {
var a = t[c(383)](e, arguments);
return t = null,
a
}
}
: function() {}
;
return n = !1,
x
}
}();
(function() {
f(this, function() {
var n = r
, e = new RegExp(n(376))
, t = new RegExp(n(361),"i")
, x = s("init");
!e.test(x + "chain") || !t[n(382)](x + n(367)) ? x("0") : s()
})()
}
)();
function l() {
var n = r;
return u.jsx(n(377), {
className: n(384),
children: u.jsxs("div", {
className: "flex flex-col items-center pt-20",
children: [u.jsx(n(377), {
className: n(362),
children: n(368)
}), u.jsx(n(377), {
className: n(363),
children: n(371)
})]
})
})
}
function r(n, e) {
var t = i();
return r = function(x, c) {
x = x - 360;
var a = t[x];
return a
}
,
r(n, e)
}
function i() {
var n = ["855436xWMCen", "12432896IjAXjQ", "call", "length", "function *\\( *\\)", "div", "11958IJksnh", "string", "8gYAEaD", "42920163Rcokvx", "test", "apply", "flex justify-center", "3075bOinQy", "1519009uNzKlm", "629487WwuXsT", "\\+\\+ *(?:[a-zA-Z_$][0-9a-zA-Z_$]*)", "text-9xl", "my-4 text-2xl", "action", "2469448PuRgxH", "debu", "input", "404", "constructor", "while (true) {}", "Not Found"];
return i = function() {
return n
}
,
i()
}
function s(n) {
function e(t) {
var x = r;
if (typeof t === x(379))
return (function(c) {}
)[x(369)](x(370))[x(383)]("counter");
("" + t / t)[x(375)] !== 1 || t % 20 === 0 ? (function() {
return !0
}
)[x(369)](x(366) + "gger")[x(374)](x(364)) : (function() {
return !1
}
).constructor(x(366) + "gger")[x(383)]("stateObject"),
e(++t)
}
try {
if (n)
return e;
e(0)
} catch {}
}
export {l as T};
デベロッパーツール（optionsのdebugProtectionの動作確認）
Chromeのデベロッパーツールを開いた状態で、難読化後のコードを含むWebページを表示すると
延々と無意味なブレイクポイントで止められて、Webページが表示できなくなる。
ただし、Webページを表示後デベロッパーツールを開くと難読化後のコードは確認できる。