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