Jeśli kiedykolwiek musiałeś pisać prawdziwy projekt, istnieją obawy dotyczące bezpieczeństwa — albo przynajmniej powinny istnieć. Wraz z postępem technologii możemy w krótkim czasie pisać niesamowite, potężne i wysokowydajne systemy, ale oznacza to też, że złośliwe osoby i technologie stają się coraz potężniejsze i trudniejsze do pokonania. Dlatego właśnie ważne jest, aby chronić się przed wszystkimi powszechnymi lukami podczas tworzenia systemów dzisiaj.
Angular od razu dba o wiele zabezpieczeń: posiada własny system ochrony zmiennej oraz funkcje oczyszczające, które zapobiegają uruchamianiu złośliwego kodu w aplikacji. Kolejną funkcją jest kompresja kodu.
Minimalizacja i zamieszanie
Kompresja kodu to technika zmniejszająca rozmiar kodu źródłowego poprzez usunięcie zbędnych znaków, takich jak space i komentarze, poprawiając wydajność ładowania kodu źródłowego. Ten proces jest powszechny w tworzeniu stron internetowych dla plików JavaScript, CSS i HTML, a także dodaje warstwę bezpieczeństwa poprzez zaciemnianie kodu. Skompresowany kod jest niezwykle trudny do odczytania, dlatego uważa się go za formę zaciemnienia. Jednak narzędzie może dekompresować kod, aby uczynić go czytelnym, co następnie można odtworzyć i odwrócić. I tu pojawia się zamieszanie.
Uzupełniając kompresję, obfuskacja kodu to technika, która utrudnia zrozumienie i inżynierię wsteczną kodu źródłowego. Często jest wykorzystywany do ochrony własności intelektualnej, zapobiegania manipulacjom oraz zapobiegania inżynierii wstecznej, co utrudnia atakującym zrozumienie logiki kodu i identyfikację potencjalnych luk. Przetwarza czytelny kod na bardziej złożone i niejasne wersje bez zmiany jego funkcjonalności. Narzędzia do zaciemniania kodu mogą również dodawać martwy kod, wprowadzając atakujących w błąd, utrudniając zrozumienie bazy kodu oprogramowania.
No to pomylmy naszą aplikację Angular, jeśli uważasz ją za przydatną.
Obfuskator Webpacka
Angular używa Webpacka podczas fazy pakowania i ma własne domyślne ustawienia do pakowania modułów, które tworzysz. Wykorzystamy to i dostosujemy sposób pakowania aplikacji Angular w Webpacku. Po pierwsze, zainstaluj następujące pakiety:
javascript-obfuscator: potężny, darmowy obfuskator JavaScript z różnorodnymi funkcjami chroniącymi Twój kod źródłowy.
natomiast webpack-obfuscator używa go jako wtyczki do udostępniania funkcjonalności Webpackowi. Kod JavaScript obfuscator znajdziesz tutaj, a wtyczkę Webpack obfuscator tutaj.Logowanie do linku jest widoczne.
Następnie stwórz plik custom-webpack.config.js z niestandardową konfiguracją, którą chcemy zastosować podczas procesu bundlowania. Oto prosty przykład:
Możesz podać wiele różnych opcji konfiguracyjnych dla wtyczek, webpack-obfuscator, aby precyzyjnie dostroić zamieszane wyjście. To najprostszy sposób na dodanie debugProtection do kodu, co utrudnia użycie konsoli do śledzenia zmiennych i funkcji aplikacji.
Uwaga: Drugi w WebpackObfuscatorParametry tablicy to pliki, które wykluczają zaciemnianie。
Na razie ustawiliśmy konfigurację dla Webpacka. Teraz musimy go wykorzystać. Potrzebujemy też kolejnej zależności:
To pomoże nam zintegrować nasz niestandardowy kreator webpacków z Angularem, abyśmy nadal mogli budować struktury w Angular. Po zainstalowaniu pakietu wystarczy zmienić plik angular.json. Wyszukaj atrybut build i dodaj następujące:
Zastępując builderfrom @angular-devkit/build-angular:browser na @angular-builders/custom-webpack:browser, nadal możemy budować pod przeglądarkę, ale teraz możemy wstrzyknąć naszą niestandardową konfigurację webpacka. Własność customWebpackConfig ustawia odwołanie do pliku, aby Angular mógł z niego korzystać.
Jeśli wszystko jest poprawnie skonfigurowane, twoje komendy budowania powinny działać poprawnie, a efekt będzie mylącą aplikacją Angular!
niedociągnięcie
Należy jednak pamiętać, że ta metoda ma wady pod względem rozmiaru opakowania. Obfuskacja kodu utrudnia inżynierię wsteczną kodu, ale sposób deklarowania zmiennych wymaga większej liczby znaków, co skutkuje wzrostem rozmiaru pakietu – niemal w przeciwnym kierunku niż minimalizacja kodu.
To wszystko. Pamiętaj, by używać go celowo i naucz się, jak radzić sobie z niedociągnięciami tej technologii!
Oryginał:Logowanie do linku jest widoczne.
Odniesienie:Logowanie do linku jest widoczne. |
Opublikowano 2024-12-23 11:06:14
|
|
|
