Если вам когда-либо приходилось писать настоящий проект, вопросы безопасности существуют — или, по крайней мере, должны быть. По мере развития технологий мы можем создавать удивительные мощные, высокопроизводительные системы за короткое время, но это также означает, что злонамеренные люди и технологии становятся сильнее и труднее для преодоления. Именно поэтому сегодня крайне важно защищать от всех распространённых уязвимостей при разработке систем.
Angular сразу же обеспечивает большую часть безопасности: у него есть собственная система переменной защиты и функции дезинфекции, которые предотвращают работу вредоносного кода в вашем приложении. Ещё одна функция — сжатие кода.
Минимизация и путаница
Сжатие кода — это техника, которая уменьшает размер исходного кода за счёт удаления ненужных символов, таких как пробелы и комментарии, что повышает производительность загрузки исходного кода. Этот процесс распространён в веб-разработке для JavaScript, CSS и HTML-файлов, и каким-то образом добавляет уровень безопасности, скрывая код. Сжатый код чрезвычайно трудно читать, поэтому его считают своего рода обфускации. Однако инструмент может распаковать код, чтобы сделать его читаемым, что затем можно реконструировать. Вот тут и возникает путаница.
Дополняя сжатие, обфускация кода — это техника, которая затрудняет понимание и обратное проектирование исходного кода. Он часто используется для защиты интеллектуальной собственности, предотвращения вмешательства и предотвращения обратного инжиниринга, что затрудняет злоумышленникам понимание логики кода и выявление потенциальных уязвимостей. Он преобразует читаемый код в более сложные и редкие версии, не изменяя его функциональность. Инструменты обфускации кода также могут добавлять мёртвый код, чтобы ввести злоумышленников в заблуждение, что усложняет понимание программного кода.
Давайте запутаем наше приложение Angular, если оно вам полезно.
Обфускатор вебпака
Angular использует Webpack на этапе упаковки и имеет собственные настройки по умолчанию для упаковки разработанных вами модулей. Мы воспользуемся этой возможностью и настроим адаптацию, как Webpack упаковывает приложения Angular. Сначала установите следующие пакеты:
JavaScript-обфускатор: мощный бесплатный JavaScript-обфускатор с множеством функций для защиты исходного кода.
в то время как webpack-obfuscator использует его как плагин для предоставления функциональности Webpack. Код JavaScript-обфускатора можно найти здесь, а плагин Webpack obfuscator — здесь.Вход по гиперссылке виден.
После этого создаём custom-webpack.config.js-файл с пользовательской конфигурацией, которую мы хотим применить в процессе объединения. Вот простой пример:
Вы можете предложить множество вариантов конфигурации плагинов, например, вебпак-обфускатор, чтобы тонко настроить запутанный выход. Это самый простой способ добавить debugProtection в ваш код, что затрудняет использование консоли для отслеживания переменных и функций приложения.
Примечание: Второй в WebpackObfuscatorПараметры массива — это файлы, исключающие обфускацию。
Пока что мы настроили конфигурацию для Webpack. Теперь нам нужно её использовать. Нам также нужна ещё одна зависимость:
Это поможет нам интегрировать наш кастомный конструктор вебпаков с Angular, чтобы мы могли строить конструкции с помощью Angular. После установки пакета нужно изменить только angular.json файла. Найдите атрибут сборки и добавьте следующее:
Заменив builderfrom на @angular-devkit/build-angular:browser на @angular-builders/custom-webpack:browser, мы всё ещё можем строить для браузера, но теперь можем внедрять нашу собственную конфигурацию вебпака. Свойство customWebpackConfig задаёт ссылку на файл так, чтобы Angular мог его использовать.
Если всё настроено правильно, ваши команды сборки должны работать нормально, и в итоге получится запутанное приложение Angular!
недостаток
Однако обратите внимание, что у этого метода есть недостатки с точки зрения размера упаковки. Обфускация кода усложняет обратное проектирование, но способ объявления переменных использует больше символов, что приводит к увеличению размера пакета — почти в противоположном направлении по сравнению с минимизацией кода.
Ну вот. Обязательно используйте её целенаправленно и научитесь исправлять недостатки этой технологии!
Исходный текст:Вход по гиперссылке виден.
Ссылка:Вход по гиперссылке виден. |
Опубликовано 2024-12-23 11:06:14
|
|
|
