|
|
Veröffentlicht am 23.12.2024, 11:06:14
|
|
|
Wenn Sie jemals ein echtes Projekt schreiben mussten, bestehen Sicherheitsbedenken – oder sollten es zumindest sein. Mit dem technologischen Fortschritt können wir in kurzer Zeit erstaunliche, leistungsstarke und leistungsstarke Systeme schreiben, aber das bedeutet auch, dass böswillige Menschen und Technologien mächtiger und schwerer zu überwinden werden. Deshalb ist es bei der heutigen Systementwicklung unerlässlich, sich gegen alle gängigen Schwachstellen zu schützen.
Angular sorgt von Anfang an für viele Sicherheiten: Es verfügt über ein eigenes variables Schutzsystem und Sanierungsfunktionen, die verhindern, dass bösartiger Code in Ihrer App läuft. Eine weitere Funktion ist die Code-Kompression.
Minimierung und Verwirrung
Codekompression ist eine Technik, die die Größe des Quellcodes verringert, indem unnötige Zeichen wie Leerzeichen und Kommentare entfernt werden und so die Ladeleistung des Quellcodes verbessert wird. Dieser Prozess ist in der Webentwicklung für JavaScript-, CSS- und HTML-Dateien üblich und fügt irgendwie eine Sicherheitsebene hinzu, indem er den Code obfuskiert. Der komprimierte Code ist extrem schwer zu lesen, weshalb er als eine Art Verschleierung gilt. Das Tool kann jedoch den Code dekomprimieren, um ihn lesbar zu machen, der dann rückentwickelt werden kann. Hier kommt die Verwirrung ins Spiel.
Als Ergänzung zur Kompression ist Code-Obfuskation eine Technik, die Quellcode schwer verständlich und rückentwickelnd macht. Es wird häufig verwendet, um geistiges Eigentum zu schützen, Manipulationen zu verhindern und Reverse Engineering zu verhindern, was es Angreifern erschwert, die Logik des Codes zu verstehen und potenzielle Schwachstellen zu identifizieren. Es wandelt lesbaren Code in komplexere und obskurere Versionen um, ohne dessen Funktionalität zu verändern. Code-Verschleierungstools können außerdem toten Code hinzufügen, um Angreifer in die Irre zu führen, was das Verständnis des Software-Codes erschwert.
Nun, verwirren wir unsere Angular-App, wenn du sie nützlich findest.
Webpack-Obfuscator
Angular verwendet Webpack während der Verpackungsphase und hat eigene Standardeinstellungen für die Verpackung der von dir entwickelten Module. Wir nutzen das und passen die Art und Weise an, wie Webpack Angular-Apps paketiert. Installieren Sie zunächst die folgenden Pakete:
javascript-obfuscator: Ein leistungsstarker kostenloser JavaScript-Obfuscator mit verschiedenen Funktionen zum Schutz Ihres Quellcodes.
während webpack-obfuscator es als Plugin nutzt, um Webpack Funktionalität bereitzustellen. Den JavaScript-Obfusator-Code findest du hier und das Webpack-Obfusator-Plugin hier.Der Hyperlink-Login ist sichtbar.
Danach erstelle eine custom-webpack.config.js-Datei mit der benutzerdefinierten Konfiguration, die wir während des Bündelprozesses anwenden möchten. Hier ein einfaches Beispiel:
Man kann viele verschiedene Konfigurationsoptionen für Plugins anbieten, Webpack-Obfuscator, um die verwirrte Ausgabe zu feinjustieren. Dies ist der einfachste Weg, um DebugProtection zu Ihrem Code hinzuzufügen, was es schwierig macht, die Konsole zu nutzen, um die Variablen und Funktionen Ihrer Anwendung zu verfolgen.
Hinweis: Die zweite in WebpackObfuscatorArray-Parameter sind Dateien, die Verschleierung ausschließen。
Bisher haben wir die Konfiguration für Webpack eingerichtet. Jetzt müssen wir es nutzen. Wir brauchen auch eine weitere Abhängigkeit:
Das hilft uns, unseren individuellen Webpack-Builder mit Angular zu integrieren, sodass wir weiterhin Strukturen mit Angular bauen können. Sobald das Paket installiert ist, müssen wir nur noch die Datei angular.json ändern. Suche nach dem Build-Attribut und füge Folgendes hinzu:
Indem wir builderfrom durch @angular-devkit/build-angular:browser durch @angular-builders/custom-webpack:browser ersetzen, können wir weiterhin für den Browser bauen, aber jetzt unsere eigene Webpack-Konfiguration injizieren. Die customWebpackConfig-Eigenschaft setzt die Referenz auf die Datei, sodass Angular sie verwenden kann.
Wenn alles richtig eingerichtet ist, sollten deine Build-Befehle einwandfrei funktionieren, und das Ergebnis wird eine verwirrende Angular-App sein!
Mangel
Bitte beachten Sie jedoch, dass diese Methode auch Nachteile hinsichtlich der Paketgröße hat. Code-Verschleierung erschwert das Reverse Engineern von Code, aber die Deklaration von Variablen verwendet mehr Zeichen, was zu einer Vergrößerung der Paketgröße führt – fast in die entgegengesetzte Richtung der Codeminimierung.
Das wars. Nutzen Sie sie gezielt und lernen Sie, wie Sie die Schwächen dieser Technologie beheben können!
Original:Der Hyperlink-Login ist sichtbar.
Referenz:Der Hyperlink-Login ist sichtbar. |
Vorhergehend:Rufen Sie die Alibaba Cloud OpenAPI API auf, um die Servernutzung zu erhaltenNächster:.NET/C# ist mit der Leistung von StackExchange.Redis optimiert
|
