[Решено] Обфускация кода Vite и Webpack в проекте Vue
[Решено] Обфускация кода Vite и Webpack в проекте Vue
Вставьте картинку сюда описывать
Вставьте картинку сюда описывать

Предисловие

В Интернете есть множество случаев обфускации кода.,90%Все вышеперечисленноедаWebpackАктуально для обработки обфускации кода.,дляViteиз Очень мало случаев,Решая путаницу в коде проекта Vite, я потратил некоторое время на поиск подходящего плагина для решения этой проблемы.,окончательный выборrollup-plugin-obfuscator。Кроме того, в главе 4 представленыWebpack Обработка сценариев обфускации кода.

rollup-plugin-obfuscator из npm адрес:прямая ссылка

javascript-obfuscator из githup адрес:прямая ссылка

1. Знакомство с плагином

rollup-plugin-obfuscator да Rollup Инструмент сборки из плагина для JavaScript Код запутан и сжат. Его основной эффект заключается в увеличении JavaScript Код безопасности и уменьшенный размер генерируемого файла.

1. Принцип и метод работы:

  • Обфускация кода: плагины запутываются с помощью различных методов. JavaScript код,Это затрудняет понимание и обратный инжиниринг. Эти методы включают переименование имен переменных, извлечение функций, замену строк и т. д. Например,Он может изменить имена переменных и имена функций в исходном коде на бессмысленные имена.,Тем самым увеличивая сложность кода.
  • Сжатие кода: за пределами обфускации,Плагины также могут сжимать код.,Удалите ненужные пробелы, комментарии и сократите имена переменных.,Чтобы уменьшить размер создаваемого файла. Это помогает веб-страницам загружаться быстрее.
  • Конфигурация опций: плагины обычно предоставляют множество конфигураций опций.,Позволяет разработчикам настраивать степень запутывания и сжатия. Эти параметры включают настройку функций для сохранения, исключение определенных файлов или модулей и т. д.

2. Особенности:

  • Повышение безопасности: обфускация затрудняет понимание кода другими.,Снижает риск кражи, взлома или изменения кода. Это полезно для защиты интеллектуальной собственности и конфиденциальных данных.
  • Оптимизация размера файла. Плагин помогает уменьшить размер создаваемых файлов за счет сжатия кода, тем самым сокращая время передачи по сети и повышая скорость загрузки веб-страниц.
  • Подходит для фронтенд-проектов.:rollup-plugin-obfuscator 特别Подходит для фронтенд-проектов.,например веб-приложение,Для повышения безопасности клиентского кода.
  • Настраиваемость: плагины обычно предоставляют широкий спектр возможностей для удовлетворения потребностей различных проектов, и разработчики могут настраивать их в соответствии с конкретными ситуациями.
  • Сохранять функциональность: запутанный код обычно сохраняет исходную функциональность.,Убедитесь, что приложение по-прежнему работает правильно.

Обфускация не является абсолютной мерой безопасности,Опытные хакеры все равно могут попытаться расшифровать код. поэтому,Когда требуется более высокий уровень безопасности,Нужны другие меры,Например, аутентификация и шифрование на стороне сервера.

2. Обфускация Vite

Среда проекта: Vue3+Vite

1. Установка

Язык кода:javascript
копировать
yarn add --dev rollup-plugin-obfuscator javascript-obfuscator
или
npm install --save-dev rollup-plugin-obfuscator javascript-obfuscator

Во время упаковки будет сообщено об ошибке. Вам необходимо установить следующие зависимости:

Язык кода:javascript
копировать
yarn add javascript-obfuscator -D

2. Введение

существоватьvite.config.tsВнедрение плагинов в,и настроить

Язык кода:javascript
копировать
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import obfuscator from 'rollup-plugin-obfuscator';
export default defineConfig({
  // base: "",
  build: {
    minify: 'esbuild', // по умолчанию
  },
  esbuild: {
    drop: ['console', 'отладчик'], // Удаление пакета
  },
  plugins: [
    vue(),
    obfuscator({
      global:false,
      // optionsЭлементы конфигурация на самом деле javascript-obfuscator варианты, подробности см. на https://github.com/javascript-obfuscator/javascript-obfuscator.
      options: {
        compact: true,
        controlFlowFlattening: true,
        controlFlowFlatteningThreshold: 0.75,
        numbersToExpressions: true,
        simplify: true,
        stringArrayShuffle: true,
        splitStrings: true,
        splitStringsChunkLength: 10,
        rotateUnicodeArray: true,
        deadCodeInjection: true,
        deadCodeInjectionThreshold: 0.4,
        debugProtection: false,
        debugProtectionInterval: 2000,
        disableConsoleOutput: true,
        domainLock: [],
        identifierNamesGenerator: "hexadecimal",
        identifiersPrefix: "",
        inputFileName: "",
        log: true,
        renameGlobals: true,
        reservedNames: [],
        reservedStrings: [],
        seed: 0,
        selfDefending: true,
        sourceMap: false,
        sourceMapBaseUrl: "",
        sourceMapFileName: "",
        sourceMapMode: "separate",
        stringArray: true,
        stringArrayEncoding: ["base64"],
        stringArrayThreshold: 0.75,
        target: "browser",
        transformObjectKeys: true,
        unicodeEscapeSequence: true,

        domainLockRedirectUrl: "about:blank",
        forceTransformStrings: [],
        identifierNamesCache: null,
        identifiersDictionary: [],
        ignoreImports: true,
        optionsPreset: "default",
        renameProperties: false,
        renamePropertiesMode: "safe",
        sourceMapSourcesMode: "sources-content",
       
        stringArrayCallsTransform: true,
        stringArrayCallsTransformThreshold: 0.5,
       
        stringArrayIndexesType: ["hexadecimal-number"],
        stringArrayIndexShift: true,
        stringArrayRotate: true,
        stringArrayWrappersCount: 1,
        stringArrayWrappersChainedCalls: true,
        stringArrayWrappersParametersMaxCount: 2,
        stringArrayWrappersType: "variable",
      }
    })
  ]
})

3. Пояснение элементов конфигурации

Список ниже да rollup-plugin-obfuscator Список опций конфигурации плагина, каждая опция используется для настройки метода обфускации и сжатия кода. Каждый вариант описан ниже:

Элементы конфигурации

описывать

global

Это далогическое значение, если установлено значение false,Запутывающий код глобальной области будет отключен.

compact

логическое значение, если установлено значение true,Затем дайте код возможности из компактного режима,Удалите ненужные пробелы и комментарии.

controlFlowFlattening

давать возможность Путаница в потоке управления,Усложнить код и поток управления.,Это усложняет понимание кода.

controlFlowFlatteningThreshold

Порог запутывания потока управления,влияют на степень путаницы.

numbersToExpressions

Если установлено значение true,Преобразование чисел в выражения,Увеличьте сложность кода.

simplify

давать Возможность упрощения, используемая для удаления ненужного кода.

stringArrayShuffle

Зашифруйте массив строк, чтобы их было труднее понять.

splitStrings

Разбить строку на мелкие кусочки,Увеличьте сложность кода.

splitStringsChunkLength

Управляет разделением строк и размером фрагмента.

rotateUnicodeArray

вращать Unicode Массив символов для увеличения путаницы в коде.

deadCodeInjection

Включите раздувание, при котором вставляется мертвый код, что делает код более сложным и затрудняет реверс-инжиниринг.

deadCodeInjectionThreshold

Порог внедрения мертвого кода.

debugProtection

Если установлено значение true,Волядавать Возможность отладки защиты.

debugProtectionInterval

Управляйте интервалом защиты от отладки.

disableConsoleOutput

Отключите вывод консоли.

domainLock

Ограничьте запуск сценария списком доменных имен.

identifierNamesGenerator

Управлять методом генерации запутанных имен идентификаторов,Например, «шестнадцатеричный».

identifiersPrefix

Префикс идентификатора для увеличения путаницы.

inputFileName

Введите имя файла.

log

данетдавать Возможность регистрации.

renameGlobals

да Нет, чтобы переименовать глобальные переменные.

reservedNames

Держите список имен идентификаторов.

reservedStrings

Держите список строк.

seed

Используется для генерации случайных чисел из семян.

selfDefending

Если установлено значение true,Волядавать Возможность режима самозащиты.

sourceMap

да Следует ли создавать файлы сопоставления источников.

stringArray

данетдавать Возможность обфускации строкового массива.

stringArrayEncoding

Массив строк из метода кодирования,Например, «base64».

stringArrayThreshold

Управляет порогом обфускации строкового массива.

target

Целевая среда, например «браузер».

transformObjectKeys

да Нет преобразования имен ключей объектов.

unicodeEscapeSequence

Включите escape-последовательности Unicode.

domainLockRedirectUrl

Перенаправление блокировки домена изURL.

forceTransformStrings

Привести строку из списка.

identifierNamesCache

Имя идентификатора из кэша.

identifiersDictionary

Словарь идентификаторов для пользовательских имен идентификаторов.

ignoreImports

да Нет игнорирует импортированные из модулей.

optionsPreset

Предопределенный набор параметров конфигурации,Например, «по умолчанию».

renameProperties

да Нет, чтобы переименовать свойства объекта.

renamePropertiesMode

Режим переименования свойств объекта, например «безопасный».

sourceMapSourcesMode

Сопоставление источника из режима.

stringArrayCallsTransform

да Нет вызова массива строк преобразования.

stringArrayCallsTransformThreshold

Преобразование вызовов строкового массива из порога.

stringArrayIndexesType

Индекс строкового массива по типу,Например, «шестнадцатеричное число».

stringArrayIndexShift

да Следует ли выполнять индексацию или смещение строкового массива.

stringArrayRotate

да Нет вращения строкового массива.

stringArrayWrappersCount

Обертка строкового массива из количества.

stringArrayWrappersChainedCalls

данетдавать Возможность оболочки строкового массива из цепочки вызовов.

stringArrayWrappersParametersMaxCount

Обертка строкового массива с максимальным количеством параметров.

stringArrayWrappersType

Тип оболочки строкового массива.

Уведомление,Когда проект относительно большой,Не рекомендуется включать расширение,То естьдаdeadCodeInjectionЗначениеfalse,Никаких настроек не требуетсяdeadCodeInjectionThresholdизценить

3. Аномальные проблемы, которые могут возникнуть при обработке обфускации Vite.

1、Uncaught SyntaxError: Unexpected token '<'

После упаковки,После развертывания на сервере,Ошибка консоли:Uncaught SyntaxError: Unexpected token '<'

Вставьте картинку сюда описывать
Вставьте картинку сюда описывать

После нажатия на нее появится следующее:

Вставьте картинку сюда описывать
Вставьте картинку сюда описывать

После запроса информации выяснилось, что возникла проблема со ссылкой на файлы статических ресурсов внутри даVue.

Код ошибки следующий:

Язык кода:javascript
копировать
let transWorker = new Worker(
    new URL("../until/transcode.worker.js", import.meta.url)
);
Вставьте картинку сюда описывать
Вставьте картинку сюда описывать

Решение:Воляtranscode.worker.jsвставитьpublicВнизизstatic文件夹Вниз,Затем измените приведенный выше код:

Язык кода:javascript
копировать
let transWorker = new Worker(
    new URL("/static/transcode.worker.js", import.meta.url)
);

4. Обфускация веб-пакета

Vue2используется в проектахWebpackкод混淆方案使用webpack-obfuscator + javascript-obfuscator

1、ПроверятьWebpackиз Версия

先ПроверятьWebpackиз Версия,другойwebpackУстановка версииизwebpack-obfuscatorВерсиядругой。

webpack4.x Используйте 2.xиз webpack-obfuscator webpack5.x Используйте 3.xиз webpack-obfuscator

Язык кода:javascript
копировать
yarn list webpack
Вставьте картинку сюда описывать
Вставьте картинку сюда описывать

2. Установка

  • webpack4.xyarn add webpack-obfuscator@2.6.0 javascript-obfuscator -Dyarn add webpack-obfuscator javascript-obfuscator -D3, размещение // vue.config.js
  • webpack5.x
Язык кода:javascript
копировать
var obfuscator = require('webpack-obfuscator');

module.exports = {
  configureWebpack: {
    plugins: [
      new obfuscator({
        rotateStringArray: true,
        /**[] Можно настроить Исключить запутанные файлы */
      }, [])
    ]
  },
}

Более подробную информацию об элементах конфигурации можно найти в третьем разделе главы 2. Эта конфигурация почти такая же, как и выше, при использовании Vite.

Язык кода:javascript
копировать
{
  // Сжатие, без разрывов строк
  compact: true,
  // данетдавать Сглаживание потока управления (возможность снижает скорость бега в 1,5 раза)
  controlFlowFlattening: false,
  // Вероятность приложения; в более крупных базах кода рекомендуется снизить это значение, поскольку большое количество преобразований потока управления может увеличить размер кода и снизить его скорость.
  controlFlowFlatteningThreshold: 0.75,
  // Случайные блоки мертвого кода (увеличенный размер запутанного кода)
  deadCodeInjection: false,
  // Мертвый блок кода из-за вероятности воздействия
  deadCodeInjectionThreshold: 0.4,
  // Эту опцию практически невозможно использовать в вкладке «Инструменты разработчика» на вкладке «Консоль».
  debugProtection: false,
  // Если этот флажок установлен, режим отладки принудительно включается с использованием интервалов на вкладке «Консоль», что затрудняет использование инструментов разработчика и других функций.
  debugProtectionInterval: false,
  // Отключите console.log, console.info, console.error и console.warn, заменив их пустыми функциями. Это усложняет использование отладчика.
  disableConsoleOutput: false,
  //Блокируем запутанный исходный код, чтобы он работал только на определенных доменах и/или поддоменах. Из-за этого кому-то очень сложно просто скопировать и вставить ваш исходный код и запустить его где-нибудь еще.
  domainLock: [],
  //Идентификатор метода путаницы шестнадцатеричный (шестнадцатеричный) искалеченный (короткий идентификатор)
  identifierNamesGenerator: 'hexadecimal',
  //Добавьте определенный префикс к глобальному идентификатору. Используйте эту опцию при запутывании нескольких файлов, загруженных на одной странице. Эта опция помогает избежать конфликтов между этими файлами и глобальными идентификаторами. Используйте разные префиксы для каждого файла
  identifiersPrefix: '',
  inputFileName: '',
  // Позволяет записывать информацию на консоль.
  log: false,
  // данетдавать Возможность глобальной переменной и имени функции из-за путаницы
  renameGlobals: false,
  // Отключить обфускацию и сгенерированные идентификаторы
  reservedNames: [],
  // Отключить строковый литерал при преобразовании
  reservedStrings: [],
  // Перемещайте массив по фиксированным и случайным (генерируемым при обфускации кода) позициям. Это затрудняет сопоставление последовательности удаленных строк с их исходными позициями. Этот вариант рекомендуется использовать, если исходный код невелик, поскольку вспомогательные функции могут привлечь внимание.
  rotateStringArray: true,
  // После обфускации код невозможно улучшить и его необходимо настроить. cpmpat:true;
  seed: 0,
  selfDefending: false,
  sourceMap: false,
  sourceMapBaseUrl: '',
  sourceMapFileName: '',
  sourceMapMode: 'separate',
  // Удалить строковые литералы и поместить их в специальный массив
  stringArray: true,
  // Закодируйте все строковые литералы в stringArray, используя base64 или rc4, и вставьте их в специальные коды, которые декодируют их обратно во время выполнения. true (логическое значение): stringArray использует закодированное значение base64; false (логическое значение): не кодирует значение stringArray; 'base64' (строка): stringArray использует закодированное значение base64; 'rc4' (строка): stringArray использует закодированное значение. rc4. Примерно на 30-50% медленнее base64, но сложнее получить начальное значение. Рекомендуется отключить unicodeEscapeSequence с опцией кодирования rc4, чтобы предотвратить очень большой запутанный код.
  stringArrayEncoding: false,
  // Настройка строковых литералов приведет к вставке stringArrayиз вероятности.
  stringArrayThreshold: 0.75,
  // Вы можете установить запутанный код в целевой среде в одно из следующих значений: Браузер;Браузер No Eval;Node
  target: 'browser',
  // данетдавать запутанные ключи объектавозможность
  transformObjectKeys: false,
  // позволятьдавать Возможность/Отключить преобразование строк в unicodeпоследовательность Выходные escape-последовательности Unicode значительно увеличивают размер кода и позволяют легко восстановить исходный вид строки. Рекомендуется только для передачи небольшого исходного кода. Возможность этого варианта.
  unicodeEscapeSequence: false
}

Я участвую в третьем этапе специального тренировочного лагеря Tencent Technology Creation 2023 с эссе, получившими приз, и сформирую команду, которая разделит приз!

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose