Vite JavaScript Obfuscator Plugin

Common errors

• Files are not being obfuscated.

  cause The `include` and `exclude` options are not correctly configured, or the `apply` option prevents obfuscation in the current environment (e.g., 'serve' when building).
  fix Verify that `include` patterns correctly match the target files and `exclude` patterns are not overly broad. Ensure `apply` is set to 'build' (for production builds) or omitted (for both serve and build).

• Build fails after enabling obfuscation or application throws runtime errors.

  cause Aggressive obfuscation settings (e.g., `debugProtection`, `controlFlowFlattening`) may introduce breaking changes to the application's logic or incompatible syntax.
  fix Start with minimal obfuscation options and gradually enable more aggressive settings, testing thoroughly after each change. Specifically review `javascript-obfuscator` options that might interfere with reflection, string access, or environment-specific code.

• ReferenceError: defineConfig is not defined

  cause Missing the necessary import for `defineConfig` in `vite.config.js`.
  fix Add `import { defineConfig } from 'vite';` at the top of your `vite.config.js` file.

Warnings

• gotcha Extensive obfuscation, especially with aggressive settings like `debugProtection` or `controlFlowFlattening`, can significantly increase build times and runtime performance overhead. It also makes debugging deployed applications extremely difficult.
  Fix: Start with lighter obfuscation settings and gradually increase them while thoroughly testing the application after each change. Monitor build performance and runtime impact.
• gotcha Aggressive obfuscation can inadvertently break application functionality, particularly in areas involving reflection, specific string patterns, or third-party libraries that rely on predictable code structure.
  Fix: Thoroughly test all parts of your application, including edge cases and integrations, after applying obfuscation. Use a staging environment to catch issues before deployment. Utilize the `exclude` option for sensitive files or libraries.
• gotcha Obfuscation does not provide absolute security. While it makes reverse engineering harder, it cannot prevent a determined attacker from eventually understanding or modifying the code. It should be part of a broader security strategy.
  Fix: Combine obfuscation with other security measures such as server-side validation, secure API design, and regular security audits. Do not rely solely on client-side obfuscation for critical security.
• deprecated Older versions of `javascript-obfuscator` and consequently this plugin might have less effective obfuscation techniques or introduce new vulnerabilities. Always ensure you are using a relatively recent and well-maintained version.
  Fix: Regularly update `vite-plugin-javascript-obfuscator` and its core dependency `javascript-obfuscator` to benefit from improvements, bug fixes, and updated obfuscation strategies. Review their respective changelogs for breaking changes.

Install

• npm install vite-plugin-javascript-obfuscator npm
• yarn add vite-plugin-javascript-obfuscator yarn
• pnpm add vite-plugin-javascript-obfuscator pnpm

Imports

• obfuscatorPlugin
  wrong:

  import { obfuscatorPlugin } from 'vite-plugin-javascript-obfuscator';

  correct:

  import obfuscatorPlugin from 'vite-plugin-javascript-obfuscator';

  The plugin is exported as a default export.
• defineConfig

  import { defineConfig } from 'vite';

  Required in vite.config.js for type-safe configuration. Not part of this plugin but essential for its usage.

Quickstart

This configuration demonstrates how to integrate `vite-plugin-javascript-obfuscator` into a Vite project, applying comprehensive obfuscation settings to JavaScript/TypeScript files during the build process for enhanced code protection.

import { defineConfig } from 'vite';
import obfuscatorPlugin from 'vite-plugin-javascript-obfuscator';

export default defineConfig({
  plugins: [
    obfuscatorPlugin({
      // Apply obfuscation only during the build process
      apply: 'build',
      // Configure files to include (e.g., specific paths or regex)
      include: ['src/**/*.js', 'src/**/*.jsx', 'src/**/*.ts', 'src/**/*.tsx'],
      // Basic javascript-obfuscator options for robust protection
      options: {
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 1,
        debugProtection: true,
        debugProtectionInterval: true,
        disableConsoleOutput: true,
        identifierNamesGenerator: 'hexadecimal',
        log: false,
        numbersToExpressions: true,
        simplify: true,
        splitStrings: true,
        stringArray: true,
        stringArrayCallsTransform: true,
        stringArrayCallsTransformThreshold: 1,
        stringArrayEncoding: ['base64'],
        stringArrayIndexShift: true,
        stringArrayRotate: true,
        stringArrayShuffle: true,
        stringArrayWrappersCount: 5,
        stringArrayWrappersType: 'function',
        stringArrayThreshold: 1,
        transformObjectKeys: true,
        unicodeEscapeSequence: true
      }
    })
  ]
});