how to obfuscator the code?

[allran]

How to obfuscator the project codes when I use vite and typescript. For example, use javascript-obfuscator to obfuscator codes. But i don't find the way to do it, can you help me, thanks。

[Shinigami92]

I think you can try to do this with writing a plugin on your own 🙂

https://vitejs.dev/guide/api-plugin.html

[Niputi]

try out https://github.com/getkey/rollup-plugin-obfuscator

[allran]

code at router.ts look like this:

  {
    path: '/login',
    name: Route.LOGIN,
    component: () => import('@/views/Login'),
    meta: {
      layout: 'auth'
    }
  },

and when use this obfuscator plugins, then I get follow error:

TypeError: Failed to resolve module specifier '@/views/Login?import'
    at component (router.ts:51)
    at extractComponentsGuards (vue-router.esm-bundler.js:1996)
    at vue-router.esm-bundler.js:3085

Please help me, how to dynamic import ? Thank you.

[cliqer]

Same question.

Using vue-router-next and dynamic route imports.
The below obfuscates the file but dynamic imports do not work.

// vite.config.ts
  build: {
    outDir: 'dist',
    rollupOptions: {
      plugins: [
        obfuscator({
          transformObjectKeys: true,
          unicodeEscapeSequence: true,
          numbersToExpressions: true,
          shuffleStringArray: true,
          splitStrings: true,
          stringArrayThreshold: 1,
          identifierNamesGenerator: 'hexadecimal'
        })
      ]
    },

How do we need to set up rollupOptions.input/output to obfuscate all the output files and have dynamic imports work too?

[soylomass]

@allran @cliqer Were you able to solve this?

[cliqer]

@soylomass, indeed I did:

// vite.config.ts
import obfuscator from 'rollup-plugin-obfuscator';
import { defineConfig } from 'vite'
module.exports = defineConfig({
  build: {
    rollupOptions: {
      output: { 
        plugins: [ // <-- use plugins inside output to not merge chunks on one file
          obfuscator({
            fileOptions: {
               // options
            })
        ]
      }
    },
    minify: 'terser',
    target: 'es2019',
    terserOptions: {
      compress: {
        defaults: false,
      }
    }

// ../src/ts/router.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const login = () => import('../views/login.vue');
const hosts = () => import('../views/hosts.vue');
const notFound = () => import('../views/notFound.vue');

const routes: Array<RouteRecordRaw> = [
  { path: '/login', component: login, name:'login'},
 children: [
    { path: 'hosts', component: dashHosts, name: 'hosts' }
  ]},
  { path: '/:pathMatch(.*)*', component: notFound }
];
const router = createRouter({
  history: createWebHistory(),
  routes
});

[logue]

For the time being, the following code worked, but with Vite4 the build passes, but the generated code does not work. Also, if you set the obfuscator setting stringArray to true, you will not be able to read the Vue stylesheet.

import { defineConfig, type Plugin, type UserConfig } from 'vite';
import obfuscatorModule, {
  type RollupPluginObfuscatorOptions,
} from 'rollup-plugin-obfuscator';
import type { ObfuscatorOptions } from 'javascript-obfuscator';

/** obfuscator */
const obfuscator: (override: Partial<RollupPluginObfuscatorOptions>) => Plugin =
  (obfuscatorModule as any).default;

/**
 * Obfuscator Config 
 *
 * @see {@link https://github.com/javascript-obfuscator/javascript-obfuscator#preset-options}
 */
const obfuscatorConfig = Object.assign(
  // Insert javascript-obfuscator's default preset-options
  {
    compact: true,
    controlFlowFlattening: false,
    deadCodeInjection: false,
    debugProtection: false,
    debugProtectionInterval: 0,
    disableConsoleOutput: false,
    identifierNamesGenerator: 'hexadecimal',
    log: false,
    numbersToExpressions: false,
    renameGlobals: false,
    selfDefending: false,
    simplify: true,
    splitStrings: false,
    stringArray: true,
    stringArrayCallsTransform: false,
    stringArrayCallsTransformThreshold: 0.5,
    stringArrayEncoding: [],
    stringArrayIndexShift: true,
    stringArrayRotate: true,
    stringArrayShuffle: true,
    stringArrayWrappersCount: 1,
    stringArrayWrappersChainedCalls: true,
    stringArrayWrappersParametersMaxCount: 2,
    stringArrayWrappersType: 'variable',
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false,
  },
  // Insert own setting.
  {
    stringArray: false,  // fix for vue inline stylesheet
  }
) as ObfuscatorOptions;

export default defineConfig(async ({ command, mode }): Promise<UserConfig> => {
  const config: UserConfig = {
    // ...
    build: {
      // ...
      rollupOptions: {
        // ...
        output: {
          // ...
          plugins: [
            // ...
            obfuscator({
              globalOptions: obfuscatorConfig,
            })
          ]
        }
      }
    }
  };
  return config;
});

Does anyone know the settings for Vite4 to build successfully?

[plcdnl]

have you found a solution?

[logue]

Yes.

It seems rollup-plugin-obfuscator is useless. Using rollup-obfuscator directly as a Vite plugin worked fine.

import { defineConfig, type UserConfig } from 'vite';
import { obfuscator } from 'rollup-obfuscator';
import type { ObfuscatorOptions } from 'javascript-obfuscator';

/**
 * Obfuscator Config 
 *
 * @see {@link https://github.com/javascript-obfuscator/javascript-obfuscator#preset-options}
 */
const obfuscatorConfig = Object.assign(
  // Insert javascript-obfuscator's default preset-options
  {
    // ...
  },
  // Insert own setting.
  {
    stringArray: false,  // fix for vue inline stylesheet
  }
);

export default defineConfig(async ({ command, mode }): Promise<UserConfig> => {
  const config: UserConfig = {
    // ...
    plugins: [
      // ...
      obfuscator({
        global: true,
        exclude: ['./node_modules/**/*'],
        ...obfuscatorConfig,
      }) 
    ]
    // ...
  };
  return config;
});

However, it's not enough because the stringArray option, which was most effective at obfuscation, can't be used because it breaks.

[plcdnl]

Thank you!

[zanzara]

@logue Sry, for pinging u in such an old thread.... but I really struggle in understanding obfuscating vue/vite projects.

If I have only SFC vue files my project... does obfuscating make sense at all?
Because default include are only js/ts files, which I don't have in the frontend prj.
https://github.com/ghostdevv/rollup-obfuscator#config

And regarding the docs there, exclude/include works only having set global: false

So I would wonder how should obfuscation work, if the Javascript code is inside the vuefiles ?!
Or does this all be handled by vite ?

Appreciating any hints and advices. TIA

[customautosys]

Hi I'm currently using https://github.com/elmeet/vite-plugin-javascript-obfuscator

The problem I am facing now is that user plugins cannot run after the post-build plugins including minifier. I think this is what is causing all the problems including stringArray. The obfuscator should be the final step.

Is there any way to force a plugin to run after the vite post build plugins such as minifier?

[AmraniCh]

have you found any solution ?

[lingster]

would something like this work:

import { defineConfig } from 'vite';

function myCustomPostBuildPlugin() {
    return {
        name: 'my-custom-post-build-plugin', // a unique name for your plugin
        writeBundle() {
            // Code here will execute after all files have been processed and written out.
            console.log('All build processes, including minification, are complete.');
            // Implement your post-processing logic here
        }
    };
}

export default defineConfig({
    plugins: [
        myCustomPostBuildPlugin()
    ],
    build: {
        // build-specific configurations
    }
});

[customautosys]

I have created a new PR here: elmeet/vite-plugin-javascript-obfuscator#20

Basically it uses the generateBundle hook. I could not get emitFile to work in writeBundle.

However, there is a serious drawback as I currently cannot figure out how to add the sourcemap in emitFile.