Si alguna vez has tenido que escribir un proyecto real, existen — o al menos deberían existir preocupaciones de seguridad. A medida que avanza la tecnología, podemos crear sistemas increíbles, potentes y de alto rendimiento en poco tiempo, pero también significa que las personas y tecnologías maliciosas se vuelven más poderosas y difíciles de superar. Por eso es esencial proteger contra todas las vulnerabilidades comunes al desarrollar sistemas hoy en día.
Angular se encarga de mucha seguridad desde el primer momento: tiene su propio sistema de protección variable y funciones de sanitización que impiden que el código malicioso se ejecute en tu app. Otra característica es la compresión de código.
Minimización y confusión
La compresión de código es una técnica que reduce el tamaño del código fuente eliminando caracteres innecesarios como espacios y comentarios, mejorando así el rendimiento de carga del código fuente. Este proceso es común en el desarrollo web para archivos JavaScript, CSS y HTML, y de alguna manera añade una capa de seguridad al ofuscar el código. El código comprimido es extremadamente difícil de leer, por eso se considera una especie de ofuscación. Sin embargo, la herramienta puede descomprimir el código para hacerlo legible, lo que luego puede ser invertido. Aquí es donde surge la confusión.
Complementando la compresión, la ofuscación de código es una técnica que dificulta la comprensión y la ingeniería inversa del código fuente. A menudo se utiliza para proteger la propiedad intelectual, prevenir manipulaciones y disuadir la ingeniería inversa, dificultando que los atacantes comprendan la lógica del código e identifiquen posibles vulnerabilidades. Convierte código legible en versiones más complejas y oscuras sin alterar su funcionalidad. Las herramientas de ofuscación de código también pueden añadir código muerto para engañar a los atacantes, dificultando la comprensión de la base de código del software.
Bueno, confundamos nuestra app Angular si te resulta útil.
Ofuscador webpack
Angular utiliza Webpack durante la fase de empaquetado y tiene sus propios ajustes por defecto para empaquetar los módulos que desarrollas. Aprovecharemos esto y personalizaremos cómo Webpack empaqueta las aplicaciones de Angular. Primero, instala los siguientes paquetes:
JavaScript-Obfuscator: Un potente ofuscador de JavaScript libre con una variedad de funciones para proteger tu código fuente.
mientras que webpack-obfuscator lo utiliza como un plugin para proporcionar funcionalidad a Webpack. Puedes encontrar el código JavaScript de ofuscador aquí, y el plugin de ofuscador de Webpack aquí.El inicio de sesión del hipervínculo es visible.
Después de eso, crea un archivo custom-webpack.config.js con la configuración personalizada que queremos aplicar durante el proceso de empaquetado. Aquí tienes un ejemplo sencillo:
Puedes ofrecer muchas opciones de configuración diferentes para plugins, webpack-obfuscator para afinar la salida confusa. Esta es la opción más sencilla para añadir DebugProtection a tu código, lo que dificulta el uso de la consola para controlar las variables y funciones de tu aplicación.
Nota: El segundo en WebpackObfuscatorLos parámetros del array son archivos que excluyen la ofuscación。
Hasta ahora, hemos configurado la configuración de Webpack. Ahora tenemos que usarla. También necesitamos otra dependencia:
Esto nos ayudará a integrar nuestro creador de webpacks personalizado con Angular para poder seguir construyendo estructuras usando Angular. Una vez instalado el paquete, solo tenemos que cambiar el archivo angular.json. Busca el atributo de construcción y añade lo siguiente:
Al reemplazar builderfrom por @angular-devkit/build-angular:browser a @angular-builders/custom-webpack:browser, podemos seguir compilando para el navegador, pero ahora podemos inyectar nuestra configuración personalizada de webpack. La propiedad customWebpackConfig establece la referencia al archivo para que Angular pueda usarlo.
Si todo está configurado correctamente, tus comandos de construcción deberían funcionar bien y el resultado será una aplicación Angular confusa.
defecto
Sin embargo, ten en cuenta que este método tiene inconvenientes en cuanto al tamaño del paquete. La ofuscación de código dificulta la ingeniería inversa del código, pero la forma en que declara las variables utiliza más caracteres, lo que resulta en un aumento del tamaño del paquete, casi en la dirección opuesta a la minimización del código.
Eso es todo. ¡Asegúrate de usarlo con propósito y aprender a abordar las carencias de esta tecnología!
Texto original en:El inicio de sesión del hipervínculo es visible.
Referencia:El inicio de sesión del hipervínculo es visible. |
Publicado el 23-12-2024 11:06:14
|
|
|
