Как обфусцировать React приложение?

Question

[Степан]

Для примера я создал простое React приложение:
npx create-react-app my-app
Затем мне надо обфусцировать js код. Сначала я нашёл прекрасный инструмент - Jscrambler, но он платный.Затем я погуглил про обфускацию webpack'ом и нашёл webpack-obfuscator. По их документации добавил в файл webpack.config.js строки:
В начало:

var WebpackObfuscator = require('webpack-obfuscator');

А в секцию module/rules добавил это:

{
    test: /\.js$/,
    exclude: [],
    enforce: 'post',
    use: {
        loader: WebpackObfuscator.loader,
        options: {
            rotateStringArray: true
        }
    }
},

После прописал npm run build, и сборка выполнилась успешно, но когда я задеплоил локально через serve -s build,то вместо картинки реакта пустая страница,а в консоли ошибка js кода. Наверное из-за кривой обфускаци кода, но что я сделал неверно?Может есть другие инструменты,чтобы обфусцировать React приложение?

Comments

[Vladimir Lewandowski]

в консоли ошибка js кода

Какая?

[Степан]

Vladimir Lewandowski, переменная t не объявлена,но эта переменная была в груде обфусцированного кода.А теперь,когда я захотел повторить npm run build вылетает ошибка

./src/App.css
TypeError: __webpack_require__(...) is not a function

Если обфускатор убрать,то билдится всё нормально. Может есть ещё способы обфускации?

[Vladimir Lewandowski]

А если WebpackObfuscator через плагины подключить?

[Степан]

Vladimir Lewandowski, вебпак был оказывается 4 версии,а для него другая версия обфускатора нужна.Я поставил и он мне выдал ошибку опять:

./src/index.js
Error: SyntaxError: Unexpected token (8:2)

А на 8 строке находится символ "<"

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Поэтому этот обфускатор, видимо, React не сможет обфусцировать :(

[Vladimir Lewandowski]

Степан, ну как бы jsx и не должен в бандл попадать. У вас перед обфускатором как js обрабатывается?

[Vladimir Lewandowski]

Степан, покажите кусок итогового js после сборки.

[Степан]

Vladimir Lewandowski,

(this["webpackJsonpmy-app"] = this["webpackJsonpmy-app"] || []).push([
    [0], {
        11: function(e, t, n) {
            "use strict";
            n.r(t);
            var c = n(1),
                s = n.n(c),
                r = n(3),
                a = n.n(r),
                o = (n(8), n.p + "static/media/logo.6ce24c58.svg"),
                i = (n(9), n(0));
            var p = function() {
                    return Object(i.jsx)("div", {
                        className: "App",
                        children: Object(i.jsxs)("header", {
                            className: "App-header",
                            children: [Object(i.jsx)("img", {
                                src: o,
                                className: "App-logo",
                                alt: "logo"
                            }), Object(i.jsxs)("p", {
                                children: ["Edit ", Object(i.jsx)("code", {
                                    children: "src/App.js"
                                }), " and save to reload."]
                            }), Object(i.jsx)("a", {
                                className: "App-link",
                                href: "https://reactjs.org",
                                target: "_blank",
                                rel: "noopener noreferrer",
                                children: "Learn React"
                            })]
                        })
                    })
                },
                l = function(e) {
                    e && e instanceof Function && n.e(3).then(n.bind(null, 12)).then((function(t) {
                        var n = t.getCLS,
                            c = t.getFID,
                            s = t.getFCP,
                            r = t.getLCP,
                            a = t.getTTFB;
                        n(e), c(e), s(e), r(e), a(e)
                    }))
                };
            a.a.render(Object(i.jsx)(s.a.StrictMode, {
                children: Object(i.jsx)(p, {})
            }), document.getElementById("root")), l()
        },
        8: function(e, t, n) {},
        9: function(e, t, n) {}
    },
    [
        [11, 1, 2]
    ]
]);
//# sourceMappingURL=main.8c5379e5.chunk.js.map

[Vladimir Lewandowski]

Степан, ну выглядит норм, jsx обработался. Только непонятно, где тут обфускация.

<meta charset="utf-8"> в head страницы есть?

[Степан]

Vladimir Lewandowski, так этот кусок кода без обфускации.Если подключить обратно обфускацию, то вылезет

./src/index.js
Error: SyntaxError: Unexpected token (8:2)

И дальше ничего не пойдёт,и файлов тоже не будет

<meta charset="utf-8"> есть

[Vladimir Lewandowski]

Степан,

вместо картинки реакта пустая страница,а в консоли ошибка js кода

В консоли браузера или терминала?

[Степан]

Vladimir Lewandowski, в консоли браузера.Только я не знаю как в предыдущий раз сборка прошла успешно,так как теперь оно не собирается вообще,хотя файлы в папке src я не менял

[Vladimir Lewandowski]

Степан, а нет кода на Гитхабе?

[Степан]

Vladimir Lewandowski, кода моего проекта?

[Степан]

Vladimir Lewandowski, https://github.com/Stepashka20/ObfusProblem

Тут подключаю обфускатор

Тут его использую

[Vladimir Lewandowski]

Степан, да. По отдельным фрагментам непонятно, хочется целиком сборку проекта увидеть.

[Степан]

Vladimir Lewandowski, только сейчас я не туда переместил кусок кода с использованием, так как не знал, куда именно его надо поставить

[Vladimir Lewandowski]

Степан,
1. Уберите WebpackObfuscator.loader;
2. Добавьте в плагины:

plugins: [
    isEnvProduction && new WebpackObfuscator(),
    /* ... */

[Степан]

Vladimir Lewandowski, спасибо огромное, получилось!!!