feat: configurable smart rename (#100)

Author: j4k0xb

apps/docs/src/guide/api.md

@@ -18,7 +18,7 @@ const result = await webcrack('const a = 1+1;');
 console.log(result.code); // 'const a = 2;'
 ```
 
-Save the deobufscated code and the unpacked bundle to the given directory:
+Save the deobfuscated code and the unpacked bundle to the given directory:
 
 ```js
 import fs from 'fs';
@@ -57,6 +57,14 @@ await webcrack(code, {
 });
 ```
 
+Only mangle variable names that match a filter:
+
+```js
+await webcrack(code, {
+  mangle: (id) => id.startsWith('_0x'),
+});
+```
+
 ## Customize Paths
 
 Useful for reverse-engineering and tracking changes across multiple versions of a bundle.

apps/playground/src/App.tsx

@@ -22,12 +22,14 @@ import { debounce } from './utils/debounce';
 import { downloadFile } from './utils/files';
 import type { DeobfuscateResult } from './webcrack.worker';
 
+export type MangleMode = 'off' | 'all' | 'hex' | 'short';
+
 export const [config, setConfig] = createStore({
   deobfuscate: true,
   unminify: true,
   unpack: true,
   jsx: true,
-  mangle: false,
+  mangleMode: 'off' as MangleMode,
 });
 
 function App() {

apps/playground/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Show } from 'solid-js';
-import { config, setConfig } from '../App';
+import { config, setConfig, type MangleMode } from '../App';
 import { useDeobfuscateContext } from '../context/DeobfuscateContext';
 import FileTree from './FileTree';
 
@@ -205,15 +205,19 @@ export default function Sidebar(props: Props) {
           <path d="M10 8v6a2 2 0 1 0 4 0v-1a2 2 0 1 0 -4 0v1" />
           <path d="M20.732 12a2 2 0 0 0 -3.732 1v1a2 2 0 0 0 3.726 1.01" />
         </svg>
-        <span class="label-text ml-4 mr-auto hidden sm:inline">
-          Mangle Variables
-        </span>
-        <input
-          type="checkbox"
-          class="checkbox checkbox-sm hidden sm:inline"
-          checked={config.mangle}
-          onClick={(e) => setConfig('mangle', e.currentTarget.checked)}
-        />
+        <span class="label-text ml-4 mr-auto hidden sm:inline">Mangle</span>
+        <select
+          class="select select-sm select-bordered ml-4 flex-1 w-full"
+          value={config.mangleMode}
+          onChange={(e) =>
+            setConfig('mangleMode', e.currentTarget.value as MangleMode)
+          }
+        >
+          <option value="off">Off</option>
+          <option value="hex">Hex (_0x)</option>
+          <option value="short">Short Names</option>
+          <option value="all">All Names</option>
+        </select>
       </label>
 
       <FileTree

apps/playground/src/context/DeobfuscateContext.tsx

@@ -1,6 +1,7 @@
 import type { ParentProps } from 'solid-js';
 import { createContext, createSignal, useContext } from 'solid-js';
 import type { Options } from 'webcrack';
+import type { MangleMode } from '../App';
 import { evalCode } from '../sandbox';
 import type {
   DeobfuscateResult,
@@ -15,7 +16,7 @@ const postMessage = (message: WorkerRequest) => worker.postMessage(message);
 
 interface Props {
   code: string | undefined;
-  options: Options;
+  options: Options & { mangleMode: MangleMode };
   onResult: (result: DeobfuscateResult) => void;
 }
 

apps/playground/src/webcrack.worker.ts

@@ -1,8 +1,13 @@
 import type { Options, Sandbox } from 'webcrack';
 import { webcrack } from 'webcrack';
+import type { MangleMode } from './App';
 
 export type WorkerRequest =
-  | { type: 'deobfuscate'; code: string; options: Options }
+  | {
+      type: 'deobfuscate';
+      code: string;
+      options: Options & { mangleMode: MangleMode };
+    }
   | { type: 'sandbox'; result: unknown };
 
 export type WorkerResponse =
@@ -45,6 +50,7 @@ self.onmessage = async ({ data }: MessageEvent<WorkerRequest>) => {
       sandbox,
       onProgress,
       ...data.options,
+      mangle: convertMangleMode(data.options.mangleMode),
     });
     const files = Array.from(result.bundle?.modules ?? [], ([, module]) => ({
       code: module.code,
@@ -56,3 +62,18 @@ self.onmessage = async ({ data }: MessageEvent<WorkerRequest>) => {
     postMessage({ type: 'error', error: error as Error });
   }
 };
+
+function convertMangleMode(mode: MangleMode) {
+  const HEX_IDENTIFIER = /_0x[a-f\d]+/i;
+
+  switch (mode) {
+    case 'off':
+      return false;
+    case 'all':
+      return true;
+    case 'hex':
+      return (id: string) => HEX_IDENTIFIER.test(id);
+    case 'short':
+      return (id: string) => id.length <= 2;
+  }
+}

packages/webcrack/package.json

@@ -47,7 +47,6 @@
     "@babel/traverse": "^7.24.7",
     "@babel/types": "^7.24.7",
     "@codemod/matchers": "^1.7.1",
-    "babel-plugin-minify-mangle-names": "^0.5.1",
     "commander": "^12.1.0",
     "debug": "^4.3.5",
     "isolated-vm": "^5.0.0"

packages/webcrack/src/ast-utils/scope.ts

@@ -0,0 +1,24 @@
+import type { Scope } from '@babel/traverse';
+import { toIdentifier } from '@babel/types';
+
+/**
+ * Like scope.generateUid from babel, but without the underscore prefix and name filters
+ */
+export function generateUid(scope: Scope, name: string = 'temp'): string {
+  let uid = '';
+  let i = 1;
+  do {
+    uid = toIdentifier(i > 1 ? `${name}${i}` : name);
+    i++;
+  } while (
+    scope.hasLabel(uid) ||
+    scope.hasBinding(uid) ||
+    scope.hasGlobal(uid) ||
+    scope.hasReference(uid)
+  );
+
+  const program = scope.getProgramParent();
+  program.references[uid] = true;
+  program.uids[uid] = true;
+  return uid;
+}

packages/webcrack/src/index.ts

@@ -42,7 +42,7 @@ export interface WebcrackResult {
   code: string;
   bundle: Bundle | undefined;
   /**
-   * Save the deobufscated code and the extracted bundle to the given directory.
+   * Save the deobfuscated code and the extracted bundle to the given directory.
    * @param path Output directory
    */
   save(path: string): Promise<void>;
@@ -73,7 +73,7 @@ export interface Options {
    * Mangle variable names.
    * @default false
    */
-  mangle?: boolean;
+  mangle?: boolean | ((id: string) => boolean);
   /**
    * Assigns paths to modules based on the given matchers.
    * This will also rewrite `require()` calls to use the new paths.
@@ -156,7 +156,13 @@ export async function webcrack(
       (() => {
         applyTransforms(ast, [transpile, unminify]);
       }),
-    options.mangle && (() => applyTransform(ast, mangle)),
+    options.mangle &&
+      (() =>
+        applyTransform(
+          ast,
+          mangle,
+          typeof options.mangle === 'boolean' ? () => true : options.mangle,
+        )),
     // TODO: Also merge unminify visitor (breaks selfDefending/debugProtection atm)
     (options.deobfuscate || options.jsx) &&
       (() => {

packages/webcrack/src/transforms/babel-plugin-minify-mangle-names.d.ts

@@ -2,6 +2,7 @@ import * as t from '@babel/types';
 import * as m from '@codemod/matchers';
 import type { Transform } from '../ast-utils';
 import { codePreview, constMemberExpression } from '../ast-utils';
+import { generateUid } from '../ast-utils/scope';
 
 const DEFAULT_PRAGMA_CANDIDATES = [
   'jsx',
@@ -55,7 +56,7 @@ export default {
           if (convertibleName.match(type.current!)) {
             name = convertType(type.current);
           } else {
-            name = t.jsxIdentifier(path.scope.generateUid('Component'));
+            name = t.jsxIdentifier(generateUid(path.scope, 'Component'));
             const componentVar = t.variableDeclaration('const', [
               t.variableDeclarator(t.identifier(name.name), type.current),
             ]);