Cómo Proteger una web Parte 1 La Ofuscación del Código
Proteger el código fuente de una web es importante para mantener la seguridad y privacidad de la lógica de la aplicación y los datos sensibles. En este artículo que es el primero de tres, te mostraré cómo proteger un sitio web utilizando ofuscación de código con JavaScript Obfuscator.
Configuración de la Ofuscación del Código
La ofuscación de código es una técnica que transforma el código fuente en un formato que es difícil de entender para los humanos, pero que sigue siendo ejecutable por la máquina. Esto ayuda a proteger la lógica de tu aplicación y a prevenir la ingeniería inversa.
Instalación de JavaScript Obfuscator
Para comenzar, primero necesitamos instalar la herramienta de ofuscación. JavaScript Obfuscator es una opción popular y eficiente para este propósito. Podemos instalarlo mediante npm:
npm install javascript-obfuscator --save-dev
Construcción de la Aplicación Angular
En mi caso he utilizado una web hecha en Angular por lo que usando el siguiente comando:
ng build --omit=dev
Obtengo una compilación con los archivos de producción en el directorio dist
.
Aplicación de la Ofuscación
Ahora, aplica la ofuscación al código JavaScript en el directorio generado dist
. Yo en mi caso he creado una línea en el package.json
y así lo puedo ejecutar luego del build
"obfuscate-dist": "javascript-obfuscator dist --output dist-obfuscated --compact true --self-defending true --string-array-rotate true && (xcopy /E /Y dist-obfuscated dist 2>nul || cp -R dist-obfuscated/* dist) && (rmdir /s /q dist-obfuscated || rm -rf dist-obfuscated)"
Este comando creará una nueva carpeta temporal que luego es renombrada a la original y dentro contiene el código ofuscado.
Los parámetros utilizados en el proceso:
-output dist-obfuscated
: Especifica el directorio de salida donde se guardará el código ofuscado.-compact true
: Minimiza el código, eliminando espacios en blanco y líneas nuevas innecesarias.-self-defending true
: Inserta código adicional que dificulta la depuración y el análisis del código ofuscado.-string-array-rotate true
: Activa la rotación del array de cadenas, lo que hace que el código sea más difícil de entender.
Pueden encontrar más opciones en los Docs del paquete
Conclusión
Al seguir estos pasos, habrás mejorado la seguridad de tu aplicación web mediante la ofuscación del código y el uso de variables de entorno gestionadas por Caddy Server. Estas prácticas no solo protegen tu código fuente sino que también facilitan la gestión de configuraciones en diferentes entornos de despliegue.
Paso 2: Uso de Variables de Entorno
Las variables de entorno son una manera efectiva de gestionar configuraciones sensibles y específicas del entorno de ejecución. En Angular, puedes utilizar archivos de entorno para definir variables que se sustituirán en tiempo de construcción.
Definición de Variables de Entorno en Angular
Angular permite definir diferentes archivos de configuración de entorno, como environment.ts
y environment.prod.ts
. Aquí tienes un ejemplo de cómo podrías definir tus variables:
environment.ts:
export const environment = {
production: false,
apiUrl: 'http://localhost:3000/api'
};
environment.prod.ts:
export const environment = {
production: true,
apiUrl: 'https://api.tu-dominio.com'
};
Uso de las Variables de Entorno en el Código
Puedes utilizar estas variables en tu código Angular de la siguiente manera:
import { environment } from '../environments/environment';
const apiUrl = environment.apiUrl;
Sustitución de Variables en Tiempo de Ejecución
Para sustituir las variables de entorno en tiempo de ejecución, puedes configurarlas en el servidor web. Vamos a utilizar Caddy Server para este propósito.
Paso 3: Configuración del Caddy Server
Caddy es un servidor web que facilita la gestión de configuraciones mediante archivos de configuración simples y directos.
Instalación de Caddy
Primero, instala Caddy siguiendo las instrucciones oficiales.
Configuración de Caddy con Variables de Entorno
Crea un archivo Caddyfile
en el directorio raíz de tu proyecto con la siguiente configuración:
caddyCopiar código
:80 {
root * /path/to/your/dist-obfuscated
encode gzip
@env {
path_regexp env ^/env.js$
}
handle @env {
respond `window.__env = {
apiUrl: "${API_URL}",
}` 200 {
content_type application/javascript
}
}
file_server
}
Luego, inicia Caddy con las variables de entorno definidas:
bashCopiar código
API_URL="https://api.tu-dominio.com" caddy run
Este Caddyfile
sirve los archivos ofuscados de tu aplicación y crea un endpoint /env.js
que devuelve las variables de entorno en un formato que puede ser utilizado por tu aplicación Angular.
Uso de las Variables de Entorno en Angular
Finalmente, modifica tu aplicación Angular para cargar estas variables de entorno en tiempo de ejecución:
env.service.ts:
typescriptCopiar código
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class EnvService {
public apiUrl: string;
constructor() {
this.apiUrl = window['__env'].apiUrl;
}
}
main.ts:
typescriptCopiar código
fetch('/env.js')
.then(response => response.text())
.then(envScript => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.text = envScript;
document.head.appendChild(script);
bootstrapAngularApp();
});
function bootstrapAngularApp() {
import('./app/app.module').then(({ AppModule }) => {
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
});
}
Con esta configuración, tu aplicación Angular utilizará las variables de entorno definidas en el servidor Caddy en tiempo de ejecución, y tu código estará ofuscado para dificultar su comprensión y manipulación.
Conclusión
Al seguir estos pasos, habrás mejorado significativamente la seguridad de tu aplicación Angular mediante la ofuscación del código y el uso de variables de entorno gestionadas por Caddy Server. Estas prácticas no solo protegen tu código fuente sino que también facilitan la gestión de configuraciones en diferentes entornos de despliegue.