Обфускація застосунку Nuxt

Nuxt 3 збирає бандл через Vite, а AfterPack інтегрується на рівні бандлера, тож @afterpack/nuxt — це тонкий модуль Nuxt: він викликає addVitePlugin, щоб зареєструвати @afterpack/vite у конфігурації Vite вашого Nuxt, і клієнтський бандл обфускується в generateBundle Vite, ще до запису збірки.

Проєкти на Nuxt 2 збираються через webpack. Для них натомість використовуйте @afterpack/webpack.

Встановлення

$ npm install -D @afterpack/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@afterpack/nuxt"],
  afterpack: {
    seed: "git",
  },
});

Параметри задаються під ключем конфігурації afterpack.

Збірка

nuxt generate (статика) або nuxt build (SSR) тепер видає обфускований результат. nuxt dev не зачіпається, бо плагін працює лише на generateBundle Vite. Для кожного середовища Vite (клієнтського і серверного) реєструється окремий екземпляр плагіна @afterpack/vite, і кожен обфускує власний бандл, перш ніж Vite його запише.

Статика чи сервер

Статика / попередній рендеринг (nuxt generate): обфускується попередньо відрендерений клієнтський бандл у .output/public/_nuxt/. Це рекомендована форма для випуску захищеного клієнтського коду.
Сервер (SSR): клієнтський бандл обфускується так само; серверний бандл Nitro — це ваш власний артефакт розгортання.

Закріпіть seed: "git", коли хочете, щоб клієнтські частини одного релізу збиралися з одного сіду, або коли збірка має бути відтворюваною до байта (влучання в кеш, еталонні знімки). Збірки та CI описують цей компроміс. Nuxt також генерує новий buildId для кожної збірки.

Перевірка

export default defineNuxtConfig({
  modules: ["@afterpack/nuxt"],
  afterpack: { protectionMap: { enabled: true } },
});

Записує об'єднану Protection Map у .afterpack/protectionMap.html, внесений у gitignore. Побічний ефект із source map і правила поводження з ними такі самі, як у @afterpack/vite.

entitlements.jslight · complexity 5Open full size

entitlements.js, 54 lines, built at the light preset with a directive around the signature check. Click any token to see what was applied to it.

Параметри

Будь-який ключ конфігурації можна передати під ключем конфігурації afterpack; він без змін пересилається в @afterpack/vite, наприклад afterpack: { preset: "hard", complexity: 40 }. Псевдонім типу AfterpackNuxtOptions дорівнює AfterpackViteOptions.

Директиви

Маркер /* @afterpack … */ усередині файлу .vue не зчитується. Натомість розмістіть директиву у звичайному модулі .ts/.js (composable, файл у utils/), який імпортує компонент.

Далі

Фреймворки: повна матриця.
Vite: плагін, який виконує основну роботу.
Vue: звичайний застосунок на Vue 3 + Vite.
Protection Map: як читати звіт.
Збірки та CI: сіди, dev проти prod, просування тих самих байтів.