Back

Cómo Proteger una web Parte 1 La Ofuscación del Código

May 21, 2024

4 min read

img

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:

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.