Hvis du nogensinde har været nødt til at skrive et egentligt projekt, findes der sikkerhedsbekymringer — eller bør i det mindste være det. Efterhånden som teknologien udvikler sig, kan vi skrive fantastiske, kraftfulde, højtydende systemer på kort tid, men det betyder også, at ondsindede mennesker og teknologier bliver mere kraftfulde og svære at overvinde. Derfor er det essentielt at beskytte mod alle almindelige sårbarheder, når man udvikler systemer i dag.
Angular tager sig af meget sikkerhed fra starten: det har sit eget variable beskyttelsessystem og saniteringsfunktioner, der forhindrer ondsindet kode i at køre i din app. En anden funktion er kodekomprimering.
Minimering og forvirring
Kodekomprimering er en teknik, der reducerer størrelsen af kildekoden ved at fjerne unødvendige tegn som mellemrum og kommentarer, hvilket forbedrer indlæsningsevnen af kildekoden. Denne proces er almindelig i webudvikling af JavaScript-, CSS- og HTML-filer, og den tilføjer på en eller anden måde et sikkerhedslag ved at skjule koden. Den komprimerede kode er ekstremt svær at læse, hvilket er grunden til, at den betragtes som en form for obfuskering. Værktøjet kan dog dekomprimere koden, så den bliver læsbar, hvilket derefter kan reverse-engineeres. Her opstår forvirringen.
Som supplement til komprimering er kodeobfuskering en teknik, der gør kildekoden vanskelig at forstå og reverse engineere. Den bruges ofte til at beskytte intellektuel ejendom, forhindre manipulation og afskrække reverse engineering, hvilket gør det vanskeligt for angribere at forstå kodens logik og identificere potentielle sårbarheder. Den konverterer læsbar kode til mere komplekse og obskure versioner uden at ændre dens funktionalitet. Kodeobfuskeringsværktøjer kan også tilføje død kode for at vildlede angribere, hvilket gør det sværere at forstå softwarekoden.
Lad os forvirre vores Angular-app, hvis du finder den nyttig.
Webpack-obfuskeren
Angular bruger Webpack under pakningsfasen og har sine egne standardindstillinger for at pakke de moduler, du udvikler. Vi vil udnytte dette og tilpasse, hvordan Webpack pakker Angular-apps. Først installer følgende pakker:
javascript-obfuscator: En kraftfuld gratis JavaScript-obfuscator med en række funktioner til at beskytte din kildekode.
hvorimod webpack-obfuscator bruger det som et plugin til at give funktionalitet til Webpack. Du kan finde JavaScript-obfuscator-koden her, og Webpack obfuscator-plugin'et her.Hyperlink-login er synlig.
Derefter opretter vi en custom-webpack.config.js-fil med den brugerdefinerede konfiguration, vi ønsker at anvende under bundtningsprocessen. Her er et simpelt eksempel:
Du kan tilbyde mange forskellige konfigurationsmuligheder for plugins, webpack-obfuscator for at finjustere det forvirrede output. Dette er den nemmeste måde at tilføje debugProtection til din kode, hvilket gør det svært at bruge konsollen til at holde styr på din applikations variabler og funktioner.
Bemærk: Den anden i WebpackObfuscatorArray-parametre er filer, der udelukker obfuskation。
Indtil videre har vi sat konfigurationen op for Webpack. Nu skal vi bruge det. Vi har også brug for en anden afhængighed:
Dette vil hjælpe os med at integrere vores tilpassede webpack-bygger med Angular, så vi stadig kan bygge strukturer med Angular. Når pakken er installeret, skal vi kun ændre filen angular.json. Søg efter build-attributten og tilføj følgende:
Ved at erstatte builderfrom med @angular-devkit/build-angular:browser til @angular-builders/custom-webpack:browser kan vi stadig bygge til browseren, men nu kan vi injicere vores brugerdefinerede webpack-konfiguration. Egenskaben customWebpackConfig sætter referencen til filen, så Angular kan bruge den.
Hvis alt er sat op korrekt, burde dine build-kommandoer fungere fint, og resultatet bliver en forvirrende Angular-app!
mangel
Bemærk dog, at denne metode har ulemper med hensyn til pakkestørrelse. Kodeobfuskering gør det sværere at reverse engineere kode, men måden den deklarerer variabler på bruger flere tegn, hvilket resulterer i en forøgelse af pakkens størrelse – næsten i modsat retning af kodeminimering.
Det er det. Sørg for at bruge den målrettet og lær, hvordan du kan løse manglerne ved denne teknologi!
Oprindelig:Hyperlink-login er synlig. Henvisning:Hyperlink-login er synlig. |