Om du någonsin har behövt skriva ett riktigt projekt finns säkerhetsbekymmer – eller borde åtminstone göra det. När teknologin utvecklas kan vi skriva fantastiska, kraftfulla och högpresterande system på kort tid, men det innebär också att illvilliga människor och teknologier blir kraftfullare och svårare att övervinna. Därför är det avgörande att skydda mot alla vanliga sårbarheter när man utvecklar system idag.
Angular tar hand om mycket säkerhet direkt från början: det har ett eget variabelt skyddssystem och saneringsfunktioner som förhindrar skadlig kod från att köras i din app. En annan funktion är kodkomprimering.
Minimering och förvirring
Kodkomprimering är en teknik som minskar källkodens storlek genom att ta bort onödiga tecken som mellanslag och kommentarer, vilket förbättrar laddningsprestandan för källkoden. Denna process är vanlig inom webbutveckling för JavaScript-, CSS- och HTML-filer, och den tillför på något sätt ett säkerhetslager genom att fördunkla koden. Den komprimerade koden är extremt svår att läsa, vilket är anledningen till att den anses vara någon form av fördunkling. Verktyget kan dock dekomprimera koden för att göra den läsbar, vilket sedan kan reverse-engineeras. Det är här förvirringen kommer in.
Som komplement till komprimering är kodfördunkling en teknik som gör källkoden svår att förstå och bakåtkonstruera. Den används ofta för att skydda immateriella rättigheter, förhindra manipulation och avskräcka från reverse engineering, vilket gör det svårt för angripare att förstå kodens logik och identifiera potentiella sårbarheter. Den omvandlar läsbar kod till mer komplexa och obskyra versioner utan att ändra dess funktionalitet. Kodfördunklingsverktyg kan också lägga till död kod för att vilseleda angripare, vilket gör det svårare att förstå mjukvarukodbasen.
Låt oss förvirra vår Angular-app om du tycker den är användbar.
Webpack-obfuskern
Angular använder Webpack under paketeringsfasen och har egna standardinställningar för att paketera de moduler du utvecklar. Vi kommer att dra nytta av detta och anpassa hur Webpack paketerar Angular-appar. Installera först följande paket:
JavaScript-obfuscator: En kraftfull gratis JavaScript-obfuscator med en mängd funktioner för att skydda din källkod.
medan webpack-obfuscator använder det som ett plugin för att tillhandahålla funktionalitet till Webpack. Du kan hitta JavaScript-obfusatorkoden här, och Webpack-obfuscator-pluginet här.Inloggningen med hyperlänken är synlig.
Efter det skapar du en custom-webpack.config.js-fil med den anpassade konfiguration vi vill använda under paketeringsprocessen. Här är ett enkelt exempel:
Du kan erbjuda många olika konfigurationsalternativ för plugins, webpack-obfuscator för att finjustera den förvirrade utgången. Detta är det enklaste sättet att lägga till debugProtection i din kod, vilket gör det svårt att använda konsolen för att hålla koll på applikationens variabler och funktioner.
Notera: Den andra i WebpackObfuscatorArrayparametrar är filer som utesluter obfuskation。
Hittills har vi satt upp konfigurationen för Webpack. Nu måste vi använda den. Vi behöver också ett annat beroende:
Detta hjälper oss att integrera vår anpassade webpack-byggare med Angular så att vi fortfarande kan bygga strukturer med Angular. När paketet är installerat behöver vi bara ändra filen angular.json. Sök efter byggattributet och lägg till följande:
Genom att ersätta builderfrom med @angular-devkit/build-angular:browser till @angular-builders/custom-webpack:browser kan vi fortfarande bygga för webbläsaren, men nu kan vi injicera vår anpassade webpack-konfiguration. Egenskapen customWebpackConfig sätter referensen till filen så att Angular kan använda den.
Om allt är korrekt inställt borde dina byggkommandon fungera bra, och resultatet blir en förvirrande Angular-app!
brist
Observera dock att denna metod har nackdelar vad gäller paketstorlek. Kodfördunkling gör det svårare att bakåtkonstruera kod, men sättet den deklarerar variabler använder fler tecken, vilket leder till en ökning av paketets storlek – nästan i motsatt riktning mot kodminimering.
Det är allt. Se till att använda den medvetet och lär dig hur du åtgärdar bristerna i denna teknik!
Original:Inloggningen med hyperlänken är synlig. Hänvisning:Inloggningen med hyperlänken är synlig. |