Si vous avez déjà dû écrire un projet réel, des préoccupations de sécurité existent — ou du moins devraient l’être. À mesure que la technologie progresse, nous pouvons écrire des systèmes incroyables, puissants et performants en peu de temps, mais cela signifie aussi que les personnes et technologies malveillantes deviennent plus puissantes et difficiles à surmonter. C’est pourquoi il est essentiel de se protéger contre toutes les vulnérabilités courantes lors du développement de systèmes aujourd’hui.
Angular gère beaucoup de sécurité dès la sortie : il dispose de son propre système de protection variable et de fonctionnalités de désinfection qui empêchent le code malveillant de s’exécuter dans votre application. Une autre fonctionnalité est la compression de code.
Minimisation et confusion
La compression de code est une technique qui réduit la taille du code source en supprimant des caractères inutiles tels que les espaces et les commentaires, améliorant ainsi les performances de chargement du code source. Ce processus est courant dans le développement web pour JavaScript, CSS et fichiers HTML, et il ajoute d’une certaine manière une couche de sécurité en obscurcissant le code. Le code compressé est extrêmement difficile à lire, c’est pourquoi il est considéré comme une sorte d’obfuscation. Cependant, l’outil peut décompresser le code pour le rendre lisible, ce qui peut ensuite être rétro-ingénié. C’est là que la confusion intervient.
En complément de la compression, l’obfuscation du code est une technique qui rend le code source difficile à comprendre et à rétroconcevoir. Il est souvent utilisé pour protéger la propriété intellectuelle, prévenir la falsification et dissuader l’ingénierie inverse, rendant difficile pour les attaquants de comprendre la logique du code et d’identifier les vulnérabilités potentielles. Il convertit le code lisible en versions plus complexes et obscures sans en modifier la fonctionnalité. Les outils d’obfuscation de code peuvent également ajouter du code mort pour induire les attaquants en erreur, rendant la compréhension de la base de code logicielle plus difficile.
Eh bien, confondons notre application Angular si cela vous semble utile.
Obfuscateur webpack
Angular utilise Webpack pendant la phase de packaging et dispose de ses propres paramètres par défaut pour les modules que vous développez. Nous en profiterons pour personnaliser la manière dont Webpack empaquete les applications Angular. Tout d’abord, installez les packages suivants :
JavaScript-obfuscator : Un puissant obfuscateur JavaScript libre avec une variété de fonctionnalités pour protéger votre code source.
tandis que webpack-obfuscator l’utilise comme un plugin pour fournir des fonctionnalités à Webpack. Vous pouvez trouver le code JavaScript obfuscator ici, et le plugin Webpack obfuscator ici.La connexion hyperlientérée est visible.
Ensuite, créez un fichier custom-webpack.config.js avec la configuration personnalisée que nous souhaitons appliquer lors du processus de regroupement. Voici un exemple simple :
Vous pouvez proposer de nombreuses options de configuration différentes pour des plugins, webpacks-obfuscateur pour affiner la sortie confuse. C’est la solution la plus simple pour ajouter DebugProtection à votre code, ce qui rend difficile l’utilisation de la console pour suivre les variables et fonctions de votre application.
Note : Le second dans WebpackObfuscatorLes paramètres de tableau sont des fichiers qui excluent l’obfuscation。
Jusqu’à présent, nous avons configuré la configuration pour Webpack. Maintenant, il faut l’utiliser. Nous avons aussi besoin d’une autre dépendance :
Cela nous aidera à intégrer notre constructeur de webpacks personnalisé avec Angular afin que nous puissions continuer à construire des structures avec Angular. Une fois le package installé, il ne nous reste plus qu’à modifier le fichier angular.json. Recherchez l’attribut de construction et ajoutez ce qui suit :
En remplaçant builderfrom par @angular-devkit/build-angular :browser en @angular-builders/custom-webpack :browser, nous pouvons toujours construire pour le navigateur, mais nous pouvons désormais injecter notre configuration personnalisée de webpack. La propriété customWebpackConfig établit la référence au fichier afin qu’Angular puisse l’utiliser.
Si tout est bien configuré, vos commandes de compilation devraient fonctionner sans problème, et le résultat sera une application Angular confuse !
défaut
Cependant, veuillez noter que cette méthode présente des inconvénients en termes de taille de paquet. L’obfuscation de code rend plus difficile l’ingénierie inverse du code, mais la façon dont elle déclare les variables utilise plus de caractères, ce qui entraîne une augmentation de la taille du package – presque dans le sens inverse de la minimisation du code.
Voilà. Assurez-vous de l’utiliser de manière intentionnelle et apprenez à remédier aux lacunes de cette technologie !
Langue source:La connexion hyperlientérée est visible.
Référence:La connexion hyperlientérée est visible. |
Publié le 23-12-2024 à 11:06:14
|
|
|
