Webpack refactor

apps/playground/src/App.tsx

@@ -119,7 +119,7 @@ function App() {
       ...result.files.map((file) =>
         monaco.editor.createModel(
           file.code,
-          'javascript',
+          file.path.endsWith('.json') ? 'json' : 'javascript',
           monaco.Uri.file(file.path),
         ),
       ),

apps/playground/src/components/FileNode.tsx

@@ -4,21 +4,38 @@ interface Props extends TreeNode {
   onClick?: () => void;
 }
 
+// Icons are from https://github.com/vscode-icons/vscode-icons
 export default function FileNode(props: Props) {
   function handleClick(event: Event) {
     event.stopPropagation();
     props.onClick?.();
   }
 
+  const icon = () =>
+    props.name.endsWith('.json') ? (
+      <svg width="16" height="16" class="inline" viewBox="0 0 32 32">
+        <path
+          d="M4.014,14.976a2.51,2.51,0,0,0,1.567-.518A2.377,2.377,0,0,0,6.386,13.1,15.261,15.261,0,0,0,6.6,10.156q.012-2.085.075-2.747a5.236,5.236,0,0,1,.418-1.686,3.025,3.025,0,0,1,.755-1.018A3.046,3.046,0,0,1,9,4.125,6.762,6.762,0,0,1,10.544,4h.7V5.96h-.387a2.338,2.338,0,0,0-1.723.468A3.4,3.4,0,0,0,8.709,8.52a36.054,36.054,0,0,1-.137,4.133,4.734,4.734,0,0,1-.768,2.06A4.567,4.567,0,0,1,6.1,16a3.809,3.809,0,0,1,1.992,1.754,8.861,8.861,0,0,1,.618,3.865q0,2.435.05,2.9A1.755,1.755,0,0,0,9.264,25.7a2.639,2.639,0,0,0,1.592.337h.387V28h-.7a5.655,5.655,0,0,1-1.773-.2,2.97,2.97,0,0,1-1.324-.93,3.353,3.353,0,0,1-.681-1.63A24.175,24.175,0,0,1,6.6,22.006,16.469,16.469,0,0,0,6.386,18.9a2.408,2.408,0,0,0-.805-1.361,2.489,2.489,0,0,0-1.567-.524Z"
+          style="fill:#f5de19"
+        />
+        <path
+          d="M27.986,17.011a2.489,2.489,0,0,0-1.567.524,2.408,2.408,0,0,0-.805,1.361,16.469,16.469,0,0,0-.212,3.109,24.175,24.175,0,0,1-.169,3.234,3.353,3.353,0,0,1-.681,1.63,2.97,2.97,0,0,1-1.324.93,5.655,5.655,0,0,1-1.773.2h-.7V26.04h.387a2.639,2.639,0,0,0,1.592-.337,1.755,1.755,0,0,0,.506-1.186q.05-.462.05-2.9a8.861,8.861,0,0,1,.618-3.865A3.809,3.809,0,0,1,25.9,16a4.567,4.567,0,0,1-1.7-1.286,4.734,4.734,0,0,1-.768-2.06,36.054,36.054,0,0,1-.137-4.133,3.4,3.4,0,0,0-.425-2.092,2.338,2.338,0,0,0-1.723-.468h-.387V4h.7A6.762,6.762,0,0,1,23,4.125a3.046,3.046,0,0,1,1.149.581,3.025,3.025,0,0,1,.755,1.018,5.236,5.236,0,0,1,.418,1.686q.062.662.075,2.747a15.261,15.261,0,0,0,.212,2.947,2.377,2.377,0,0,0,.805,1.355,2.51,2.51,0,0,0,1.567.518Z"
+          style="fill:#f5de19"
+        />
+      </svg>
+    ) : (
+      <svg width="16" height="16" class="inline" viewBox="0 0 32 32">
+        <path
+          d="M18.774,19.7a3.727,3.727,0,0,0,3.376,2.078c1.418,0,2.324-.709,2.324-1.688,0-1.173-.931-1.589-2.491-2.272l-.856-.367c-2.469-1.052-4.11-2.37-4.11-5.156,0-2.567,1.956-4.52,5.012-4.52A5.058,5.058,0,0,1,26.9,10.52l-2.665,1.711a2.327,2.327,0,0,0-2.2-1.467,1.489,1.489,0,0,0-1.638,1.467c0,1.027.636,1.442,2.1,2.078l.856.366c2.908,1.247,4.549,2.518,4.549,5.376,0,3.081-2.42,4.769-5.671,4.769a6.575,6.575,0,0,1-6.236-3.5ZM6.686,20c.538.954,1.027,1.76,2.2,1.76,1.124,0,1.834-.44,1.834-2.15V7.975h3.422V19.658c0,3.543-2.078,5.156-5.11,5.156A5.312,5.312,0,0,1,3.9,21.688Z"
+          style="fill:#f5de19"
+        />
+      </svg>
+    );
+
   return (
     <li>
       <a title={props.path} onClick={handleClick}>
-        <svg width="16" height="16" class="inline" viewBox="0 0 32 32">
-          <path
-            d="M18.774,19.7a3.727,3.727,0,0,0,3.376,2.078c1.418,0,2.324-.709,2.324-1.688,0-1.173-.931-1.589-2.491-2.272l-.856-.367c-2.469-1.052-4.11-2.37-4.11-5.156,0-2.567,1.956-4.52,5.012-4.52A5.058,5.058,0,0,1,26.9,10.52l-2.665,1.711a2.327,2.327,0,0,0-2.2-1.467,1.489,1.489,0,0,0-1.638,1.467c0,1.027.636,1.442,2.1,2.078l.856.366c2.908,1.247,4.549,2.518,4.549,5.376,0,3.081-2.42,4.769-5.671,4.769a6.575,6.575,0,0,1-6.236-3.5ZM6.686,20c.538.954,1.027,1.76,2.2,1.76,1.124,0,1.834-.44,1.834-2.15V7.975h3.422V19.658c0,3.543-2.078,5.156-5.11,5.156A5.312,5.312,0,0,1,3.9,21.688Z"
-            style="fill:#f5de19"
-          />
-        </svg>
+        {icon()}
         {props.name}
       </a>
     </li>

apps/playground/src/context/DeobfuscateContext.tsx

@@ -1,4 +1,4 @@
-import type { ParentProps} from 'solid-js';
+import type { ParentProps } from 'solid-js';
 import { createContext, createSignal, useContext } from 'solid-js';
 import type { Options } from 'webcrack';
 import { evalCode } from '../sandbox';

apps/playground/src/webcrack.worker.ts

@@ -1,4 +1,4 @@
-import type { Options, Sandbox} from 'webcrack';
+import type { Options, Sandbox } from 'webcrack';
 import { webcrack } from 'webcrack';
 
 export type WorkerRequest =

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

@@ -0,0 +1,15 @@
+import type { Binding } from '@babel/traverse';
+import type * as t from '@babel/types';
+
+/**
+ * Remove a referencePath from a binding and decrement the amount of references.
+ */
+export function dereference(binding: Binding, reference: t.Node) {
+  const index = binding.referencePaths.findIndex(
+    (ref) => ref.node === reference,
+  );
+  if (index !== -1) {
+    binding.referencePaths.splice(index, 1);
+    binding.dereference();
+  }
+}

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

@@ -49,7 +49,7 @@ export const iife = matchIife();
 export const emptyIife = matchIife([]);
 
 /**
- * Matches both identifier properties and string literal computed properties
+ * Matches either `object.property` or `object['property']`
  */
 export function constMemberExpression(
   object: string | m.Matcher<t.Expression>,
@@ -107,6 +107,25 @@ export function findPath<T extends t.Node>(
   return path.find((path) => matcher.match(path.node)) as NodePath<T> | null;
 }
 
+/**
+ * Matches a function expression or arrow function expression with a block body.
+ */
+export function anyFunctionExpression(
+  params?:
+    | m.Matcher<(t.Identifier | t.Pattern | t.RestElement)[]>
+    | (
+        | m.Matcher<t.Identifier>
+        | m.Matcher<t.Pattern>
+        | m.Matcher<t.RestElement>
+      )[],
+  body?: m.Matcher<t.BlockStatement>,
+): m.Matcher<t.FunctionExpression | t.ArrowFunctionExpression> {
+  return m.or(
+    m.functionExpression(undefined, params, body),
+    m.arrowFunctionExpression(params, body),
+  );
+}
+
 /**
  * Function expression matcher that captures the parameters
  * and allows them to be referenced in the body.

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

@@ -5,6 +5,8 @@ import * as m from '@codemod/matchers';
 import { codePreview } from './generator';
 
 export function renameFast(binding: Binding, newName: string): void {
+  if (binding.identifier.name === newName) return;
+
   binding.referencePaths.forEach((ref) => {
     if (!ref.isIdentifier()) {
       throw new Error(

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

@@ -12,7 +12,7 @@ export async function applyTransformAsync<TOptions>(
   logger(`${transform.name}: started`);
   const state: TransformState = { changes: 0 };
 
-  await transform.run?.(ast, state, options);
+  await transform.run?.call(state, ast, options);
   if (transform.visitor)
     traverse(ast, transform.visitor(options), undefined, state);
 
@@ -28,7 +28,7 @@ export function applyTransform<TOptions>(
 ): TransformState {
   logger(`${transform.name}: started`);
   const state: TransformState = { changes: 0 };
-  transform.run?.(ast, state, options);
+  transform.run?.call(state, ast, options);
 
   if (transform.visitor) {
     const visitor = transform.visitor(
@@ -53,7 +53,7 @@ export function applyTransforms(
   const state: TransformState = { changes: 0 };
 
   for (const transform of transforms) {
-    transform.run?.(ast, state);
+    transform.run?.call(state, ast, state);
   }
 
   const traverseOptions = transforms.flatMap((t) => t.visitor?.() ?? []);
@@ -93,13 +93,13 @@ export interface Transform<TOptions = unknown> {
   name: string;
   tags: Tag[];
   scope?: boolean;
-  run?: (ast: Node, state: TransformState, options?: TOptions) => void;
+  run?: (this: TransformState, ast: Node, options?: TOptions) => void;
   visitor?: (options?: TOptions) => Visitor<TransformState>;
 }
 
 export interface AsyncTransform<TOptions = unknown>
   extends Transform<TOptions> {
-  run?: (ast: Node, state: TransformState, options?: TOptions) => Promise<void>;
+  run?: (this: TransformState, ast: Node, options?: TOptions) => Promise<void>;
 }
 
 export type Tag = 'safe' | 'unsafe';

packages/webcrack/src/deobfuscate/index.ts

@@ -26,7 +26,7 @@ export default {
   name: 'deobfuscate',
   tags: ['unsafe'],
   scope: true,
-  async run(ast, state, sandbox) {
+  async run(ast, sandbox) {
     if (!sandbox) return;
 
     const logger = debug('webcrack:deobfuscate');
@@ -44,29 +44,29 @@ export default {
     const decoders = findDecoders(stringArray);
     logger(`String Array Encodings: ${decoders.length}`);
 
-    state.changes += applyTransform(ast, inlineObjectProps).changes;
+    this.changes += applyTransform(ast, inlineObjectProps).changes;
 
     for (const decoder of decoders) {
-      state.changes += applyTransform(
+      this.changes += applyTransform(
         ast,
         inlineDecoderWrappers,
         decoder.path,
       ).changes;
     }
 
     const vm = new VMDecoder(sandbox, stringArray, decoders, rotator);
-    state.changes += (
+    this.changes += (
       await applyTransformAsync(ast, inlineDecodedStrings, { vm })
     ).changes;
 
     if (decoders.length > 0) {
       stringArray.path.remove();
       rotator?.remove();
       decoders.forEach((decoder) => decoder.path.remove());
-      state.changes += 2 + decoders.length;
+      this.changes += 2 + decoders.length;
     }
 
-    state.changes += applyTransforms(
+    this.changes += applyTransforms(
       ast,
       [mergeStrings, deadCode, controlFlowObject, controlFlowSwitch],
       { noScope: true },

packages/webcrack/src/deobfuscate/inline-decoded-strings.ts

@@ -10,7 +10,7 @@ export default {
   name: 'inline-decoded-strings',
   tags: ['unsafe'],
   scope: true,
-  async run(ast, state, options) {
+  async run(ast, options) {
     if (!options) return;
 
     const calls = options.vm.decoders.flatMap((decoder) =>
@@ -27,6 +27,6 @@ export default {
         call.addComment('leading', 'webcrack:decode_error');
     }
 
-    state.changes += calls.length;
+    this.changes += calls.length;
   },
 } satisfies AsyncTransform<{ vm: VMDecoder }>;

packages/webcrack/src/deobfuscate/inline-decoder-wrappers.ts

@@ -10,14 +10,14 @@ export default {
   name: 'inline-decoder-wrappers',
   tags: ['unsafe'],
   scope: true,
-  run(ast, state, decoder) {
+  run(ast, decoder) {
     if (!decoder?.node.id) return;
 
     const decoderName = decoder.node.id.name;
     const decoderBinding = decoder.parentPath.scope.getBinding(decoderName);
     if (decoderBinding) {
-      state.changes += inlineVariableAliases(decoderBinding).changes;
-      state.changes += inlineFunctionAliases(decoderBinding).changes;
+      this.changes += inlineVariableAliases(decoderBinding).changes;
+      this.changes += inlineFunctionAliases(decoderBinding).changes;
     }
   },
 } satisfies Transform<NodePath<t.FunctionDeclaration>>;

packages/webcrack/src/index.ts

@@ -154,23 +154,15 @@ export async function webcrack(
       }),
     options.mangle && (() => applyTransform(ast, mangle)),
     // TODO: Also merge unminify visitor (breaks selfDefending/debugProtection atm)
-    (options.deobfuscate || options.jsx) &&
-      (() => {
-        return applyTransforms(
-          ast,
-          [
-            // Have to run this after unminify to properly detect it
-            options.deobfuscate ? [selfDefending, debugProtection] : [],
-            options.jsx ? [jsx, jsxNew] : [],
-          ].flat(),
-          { noScope: true },
-        );
-      }),
+    options.deobfuscate &&
+      (() =>
+        applyTransforms(ast, [selfDefending, debugProtection], {
+          noScope: true,
+        })),
     options.deobfuscate && (() => applyTransform(ast, mergeObjectAssignments)),
-    () => (outputCode = generate(ast)),
-    // Unpacking modifies the same AST and may result in imports not at top level
-    // so the code has to be generated before
     options.unpack && (() => (bundle = unpackAST(ast, options.mappings(m)))),
+    options.jsx && (() => applyTransforms(ast, [jsx, jsxNew])),
+    () => (outputCode = generate(ast)),
   ].filter(Boolean) as (() => unknown)[];
 
   for (let i = 0; i < stages.length; i++) {

packages/webcrack/src/unpack/bundle.ts

@@ -21,6 +21,7 @@ export class Bundle {
     this.modules = modules;
   }
 
+  // TODO: remove/deprecate (use module onResolve instead)
   applyMappings(mappings: Record<string, m.Matcher<unknown>>): void {
     const mappingPaths = Object.keys(mappings);
     if (mappingPaths.length === 0) return;
@@ -85,6 +86,4 @@ export class Bundle {
       }),
     );
   }
-
-  applyTransforms(): void {}
 }

packages/webcrack/src/unpack/index.ts

@@ -1,40 +1,30 @@
-import { parse } from '@babel/parser';
 import traverse, { visitors } from '@babel/traverse';
 import type * as t from '@babel/types';
 import type * as m from '@codemod/matchers';
+import debug from 'debug';
 import { unpackBrowserify } from './browserify';
 import type { Bundle } from './bundle';
-import { unpackWebpack } from './webpack';
-import debug from 'debug';
+import unpackWebpack4 from './webpack/unpack-webpack-4';
+import unpackWebpack5 from './webpack/unpack-webpack-5';
+import unpackWebpackChunk from './webpack/unpack-webpack-chunk';
 
 export { Bundle } from './bundle';
 
-export function unpack(
-  code: string,
-  mappings: Record<string, m.Matcher<unknown>> = {},
-): Bundle | undefined {
-  const ast = parse(code, {
-    sourceType: 'unambiguous',
-    allowReturnOutsideFunction: true,
-    plugins: ['jsx'],
-  });
-  return unpackAST(ast, mappings);
-}
-
 export function unpackAST(
   ast: t.Node,
   mappings: Record<string, m.Matcher<unknown>> = {},
 ): Bundle | undefined {
   const options: { bundle: Bundle | undefined } = { bundle: undefined };
   const visitor = visitors.merge([
-    unpackWebpack.visitor(options),
+    unpackWebpack4.visitor(options),
+    unpackWebpack5.visitor(options),
+    unpackWebpackChunk.visitor(options),
     unpackBrowserify.visitor(options),
   ]);
   traverse(ast, visitor, undefined, { changes: 0 });
   // TODO: applyTransforms(ast, [unpackWebpack, unpackBrowserify]) instead
   if (options.bundle) {
     options.bundle.applyMappings(mappings);
-    options.bundle.applyTransforms();
     debug('webcrack:unpack')('Bundle:', options.bundle.type);
   }
   return options.bundle;

packages/webcrack/src/unpack/module.ts

@@ -1,6 +1,10 @@
 import type * as t from '@babel/types';
+import { posix } from 'node:path';
 import { generate } from '../ast-utils';
 
+// eslint-disable-next-line @typescript-eslint/unbound-method
+const { normalize, extname } = posix;
+
 export class Module {
   id: string;
   isEntry: boolean;
@@ -15,7 +19,12 @@ export class Module {
     this.id = id;
     this.ast = ast;
     this.isEntry = isEntry;
-    this.path = `./${isEntry ? 'index' : id}.js`;
+    this.path =
+      extname(id) === '' && isEntry ? 'index.js' : this.normalizePath(id);
+  }
+
+  private normalizePath(path: string): string {
+    return normalize(extname(path) === '' ? `${path}.js` : path);
   }
 
   /**

packages/webcrack/src/unpack/path.ts

@@ -6,7 +6,7 @@ const { dirname, join, relative } = posix;
 export function relativePath(from: string, to: string): string {
   if (to.startsWith('node_modules/')) return to.replace('node_modules/', '');
   const relativePath = relative(dirname(from), to);
-  return relativePath.startsWith('.') ? relativePath : './' + relativePath;
+  return relativePath.startsWith('..') ? relativePath : './' + relativePath;
 }
 
 /**

packages/webcrack/src/unpack/test/__snapshots__/unpack.test.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`path mapping 1`] = `
 WebpackBundle {
+  "chunks": [],
   "entryId": "2",
   "modules": Map {
     "1" => WebpackModule {

packages/webcrack/src/unpack/test/commonjs.test.ts

@@ -0,0 +1,13 @@
+import { test } from 'vitest';
+import { testWebpackModuleTransform } from '.';
+
+const expectJS = testWebpackModuleTransform();
+
+test('rename module, exports and require', () =>
+  expectJS(`
+    __webpack_module__.exports = __webpack_require__("foo");
+    __webpack_exports__.foo = 1;
+  `).toMatchInlineSnapshot(`
+    module.exports = require("foo");
+    exports.foo = 1;
+  `));