Als je ooit een echt project hebt moeten schrijven, bestaan er beveiligingszorgen — of zouden die er in ieder geval moeten zijn. Naarmate de technologie vordert, kunnen we in korte tijd geweldige, krachtige en high-performance systemen schrijven, maar dat betekent ook dat kwaadaardige mensen en technologieën krachtiger en moeilijker te overwinnen worden. Daarom is het essentieel om je te beschermen tegen alle veelvoorkomende kwetsbaarheden bij het ontwikkelen van systemen vandaag.
Angular zorgt direct voor veel beveiliging: het heeft een eigen variabele beschermingssysteem en sanitisatiefuncties die voorkomen dat kwaadaardige code in je app draait. Een andere functie is codecompressie.
Minimalisatie en verwarring
Codecompressie is een techniek die de grootte van broncode verkleint door onnodige tekens zoals spaties en opmerkingen te verwijderen, waardoor de laadprestaties van broncode worden verbeterd. Dit proces is gebruikelijk in webontwikkeling voor JavaScript-, CSS- en HTML-bestanden, en het voegt op de een of andere manier een beveiligingslaag toe door de code te verhullen. De gecomprimeerde code is extreem moeilijk te lezen, daarom wordt het als een soort verhulling beschouwd. De tool kan echter de code decomprimeren om deze leesbaar te maken, die vervolgens kan worden gereverse-engineerd. Hier komt de verwarring om de hoek kijken.
Als aanvulling op compressie is code-obfuscatie een techniek die broncode moeilijk te begrijpen en reverse engineeren maakt. Het wordt vaak gebruikt om intellectueel eigendom te beschermen, manipulatie te voorkomen en reverse engineering te ontmoedigen, waardoor het voor aanvallers moeilijk wordt om de logica van de code te begrijpen en potentiële kwetsbaarheden te identificeren. Het zet leesbare code om in complexere en obscurere versies zonder de functionaliteit te veranderen. Code-obfuscatietools kunnen ook dode code toevoegen om aanvallers te misleiden, waardoor het moeilijker wordt om de softwarecode te begrijpen.
Laten we onze Angular-app verwarren als je hem nuttig vindt.
Webpack-obfuscator
Angular gebruikt Webpack tijdens de verpakkingsfase en heeft zijn eigen standaardinstellingen voor het verpakken van de modules die je ontwikkelt. We maken hier gebruik van en passen aan hoe Webpack Angular-apps verpakt. Installeer eerst de volgende pakketten:
JavaScript-obfuscator: Een krachtige gratis JavaScript-obfuscator met diverse functies om je broncode te beschermen.
terwijl webpack-obfuscator het als plugin gebruikt om functionaliteit aan Webpack te bieden. Je kunt hier de JavaScript-obfuscatorcode vinden, en de Webpack obfuscator-plugin hier.De hyperlink-login is zichtbaar.
Daarna maak je een custom-webpack.config.js-bestand aan met de aangepaste configuratie die we willen toepassen tijdens het bundelproces. Hier is een eenvoudig voorbeeld:
Je kunt veel verschillende configuratieopties bieden voor plugins, webpack-obfuscator om de verwarde output fijn af te stemmen. Dit is de eenvoudigste manier om debugProtection aan je code toe te voegen, wat het lastig maakt om de console te gebruiken om de variabelen en functies van je applicatie bij te houden.
Opmerking: De tweede in WebpackObfuscatorArrayparameters zijn bestanden die obfuscatie uitsluiten。
Tot nu toe hebben we de configuratie voor Webpack ingesteld. Nu moeten we het gebruiken. We hebben ook een andere afhankelijkheid nodig:
Dit helpt ons onze aangepaste webpack builder te integreren met Angular, zodat we toch structuren kunnen bouwen met Angular. Zodra het pakket is geïnstalleerd, hoeven we alleen het bestand angular.json te wijzigen. Zoek naar het build-attribuut en voeg het volgende toe:
Door builderfrom te vervangen door @angular-devkit/build-angular:browser door @angular-builders/custom-webpack:browser, kunnen we nog steeds voor de browser bouwen, maar nu onze aangepaste webpack-configuratie injecteren. De customWebpackConfig-eigenschap stelt de referentie naar het bestand in zodat Angular het kan gebruiken.
Als alles correct is ingesteld, zouden je build-commando's prima moeten werken, en het resultaat zal een verwarrende Angular-app zijn!
gebrek
Houd er echter rekening mee dat deze methode nadelen heeft qua verpakkingsgrootte. Code-obfuscatie maakt het moeilijker om code te reverse-engineeren, maar de manier waarop variabelen worden declareerd gebruikt meer tekens, wat resulteert in een toename van de grootte van het pakket - bijna in de tegenovergestelde richting van codeminimalisatie.
Dat is het. Zorg ervoor dat je het doelbewust gebruikt en leer hoe je de tekortkomingen van deze technologie kunt aanpakken!
Origineel:De hyperlink-login is zichtbaar. Referentie:De hyperlink-login is zichtbaar. |