Introducción al análisis estático de JavaScript

Al escribir código JavaScript, el análisis estático es fundamental para mantener la calidad y legibilidad del código, y garantizar su seguridad. Se trata de un proceso automatizado que analiza y revisa el código fuente antes de ejecutarlo para ayudar a identificar patrones de programación problemáticos, errores, vulnerabilidades y fallas que podrían provocar problemas de seguridad graves o fallas en la aplicación.

JavaScript es un lenguaje conocido por su dinamismo y flexibilidad, por lo que el análisis estático puede ser particularmente valioso. Puede compensar la ausencia de un compilador tradicional y ofrecer a los desarrolladores una herramienta para detectar posibles problemas en las primeras etapas del ciclo de desarrollo. Probablemente esta sea una de las razones por las que has considerado adoptar TypeScript, ¿verdad?

Entender el análisis estático

El análisis estático, también conocido como análisis estático de código, es un método de depuración que examina automáticamente el código fuente antes de que se ejecute un programa. Analiza un conjunto de código con respecto a uno o varios conjuntos de reglas de programación.

El análisis estático consiste en inspeccionar el código fuente de una aplicación de software sin ejecutarla. A diferencia del análisis dinámico, que evalúa el código al ejecutarlo, el análisis estático se realiza en un entorno donde el programa no está en ejecución. Este método es fundamental para encontrar errores, fallas y otros problemas que podrían afectar la aplicación o su funcionalidad. También ayuda a los desarrolladores a entender la base de código, garantizar su calidad y mantener los estándares de programación en todo el proyecto.

En JavaScript, el análisis estático se puede realizar con herramientas como ESLint, JSHint y TSLint. Este es un ejemplo sencillo de cómo funciona ESLint:

var user = {};
console.log(user.name);

Al ejecutar ESLint en este código, mostrará una advertencia: Unexpected console statement no-console

Esta advertencia ayuda a los desarrolladores a evitar el uso de instrucciones console.log en el código de producción, lo cual se considera una mala práctica.

Análisis estático frente a análisis dinámico

Veamos en detalle el análisis estático y el dinámico, y el valor del análisis estático frente al dinámico en determinadas situaciones.

Este es un ejemplo de análisis estático con ESLint:

const ESLint = require('eslint');

const eslint = new ESLint({ fix: true });

async function lintCode() {
  const results = await eslint.lintFiles(["./**/*.js"]);
  await ESLint.outputFixes(results);
}

lintCode().catch((error) => {
  process.exitCode = 1;
  console.error(error);
});

Este script usa la API programática de ESLint para realizar un análisis estático de todos los archivos JavaScript de tu proyecto y corregir los problemas que pueda en el proceso.

¿Qué es el análisis dinámico?

Por otro lado, el análisis dinámico consiste en analizar una aplicación mientras se ejecuta. Ofrece una vista en tiempo real del rendimiento, el comportamiento y los resultados del sistema. A diferencia del análisis estático, el análisis dinámico requiere que el programa esté en ejecución. Se suele usar para depurar y encontrar problemas durante la ejecución que el análisis estático podría pasar por alto.

Por ejemplo, al usar JavaScript en el navegador o en un entorno de ejecución de Node.js, puedes usar console.time() y console.timeEnd() para hacer un análisis dinámico:

function someFunction() {
  // Some code here...
}

console.time('someFunction');

someFunction();

console.timeEnd('someFunction');

Este script mostrará cuánto tarda someFunction () en ejecutarse, lo que ofrece una forma sencilla de análisis dinámico.

Para las aplicaciones nativas de Node.js, puedes usar el módulo integrado node:perf_hooks para medir cuánto tarda en ejecutarse una función:

const { performance } = require('perf_hooks');

function someFunction() {
  // Some code here...
}

const start = performance.now();

someFunction();

const end = performance.now();

console.log(`Time taken: ${end - start}ms`);

En seguridad de aplicaciones, las herramientas de pruebas dinámicas de seguridad de aplicaciones (DAST) se usan para analizar aplicaciones web en ejecución. Pueden ayudar a identificar vulnerabilidades de seguridad, como ataques de inyección, cross-site scripting (XSS) y más. Lee más sobre SAST y DAST, y cómo combinarlos.

El valor del análisis estático frente al dinámico en determinadas situaciones

El análisis estático y el dinámico tienen ventajas únicas y suelen usarse juntos en distintas etapas del ciclo de vida del desarrollo de software para garantizar la calidad y seguridad del código. Sin embargo, en determinadas situaciones, el análisis estático tiene una ventaja clara sobre el análisis dinámico.

• Detección temprana de errores: el análisis estático se puede ejecutar tan pronto como se escribe el código, lo que permite detectar y corregir problemas en las primeras etapas del ciclo de desarrollo, incluso antes de que comiencen las pruebas. Esto puede ahorrar mucho tiempo y reducir costos.

• Cobertura completa del código: las herramientas de análisis estático analizan toda la base de código, a diferencia del análisis dinámico, que solo prueba las partes del código que se ejecutan durante una ejecución específica.

• Aplicación de estándares de programación: las herramientas de análisis estático aplican estándares y prácticas recomendadas de programación. Se pueden configurar para señalar desviaciones y ayudar a mantener una calidad de código uniforme.

Uso del análisis estático en JavaScript

JavaScript, que suele usarse para crear aplicaciones web interactivas, es un lenguaje dinámico y de tipado débil. Esto significa que las variables de JavaScript pueden contener valores de cualquier tipo sin que se apliquen comprobaciones de tipos. Esta flexibilidad también puede dar lugar a errores y vulnerabilidades que pasan inadvertidos.

Por ejemplo, considera el siguiente código JavaScript:

function addNumbers(a, b) {
  return a+b;
}

console.log(addNumbers(1, 2));
// Outputs: 3

console.log(addNumbers(1, "2"));
// Outputs: "12"

En el ejemplo anterior, addNumbers está diseñada para sumar dos números. Sin embargo, debido al sistema de tipos débil de JavaScript, también concatena cadenas de texto y números, lo que probablemente no sea el comportamiento esperado. Este ejemplo destaca la importancia del análisis estático en JavaScript.

En JavaScript, el análisis estático es fundamental para mantener la seguridad del código. Puede ayudar a descubrir vulnerabilidades ocultas en el código que podrían aprovechar actores maliciosos. Dada la creciente importancia de la ciberseguridad, usar herramientas de análisis estático en tu proceso de desarrollo es más una necesidad que una opción.

Cómo mejora el análisis estático la calidad y seguridad del código en JavaScript

Calidad del código

El análisis estático ayuda a aplicar estándares y estilos de programación, lo que hace que el código sea más uniforme, fácil de leer y entender. También puede detectar posibles problemas, como variables sin usar, código inalcanzable y condiciones redundantes, para que tu código sea más limpio y eficiente.

Por ejemplo, considera el siguiente código JavaScript:

let x;
if (x = 10) {
  console.log("x is 10");
} else {
  console.log("x is not 10");
}

Al ejecutar ESLint en este código, mostrará un error: Expected a conditional expression and instead saw an assignment no-cond-assign

Este error ayuda a los desarrolladores a evitar errores comunes, como usar un solo signo igual para comparar, cuando en realidad es un operador de asignación.

Seguridad del código

Las herramientas de análisis estático pueden detectar una amplia variedad de vulnerabilidades de seguridad, como ataques de inyección, cross-site scripting (XSS), generación insegura de números aleatorios y más. Permiten buscar estas vulnerabilidades automáticamente, de forma mucho más eficiente y confiable que una revisión manual del código.

Por ejemplo, considera el siguiente código de Node.js:

const express = require('express');
const Sequelize = require('sequelize');

const access_token = 'a_sample_token';
const app = express();
const sequelize = new Sequelize('database', 'username', 'password', {
  dialect: 'sqlite',
  storage: 'data/juiceshop.sqlite'
});

app.post('/login', function (req, res) {
  sequelize.query('SELECT * FROM Products WHERE name LIKE ' +  req.body.username);
});

app.get('/test', function(req,res) {
  const test = null;
  const dog = test?.dog;
  console.log(dog);
});

app.get('/some/path', function(req, res) {
  res.redirect(req.param("target"));
});

window.addEventListener("message", (event) => {
  console.log(event.data);
});

¿Puedes encontrar todas las vulnerabilidades?

Por suerte, si usas Snyk, es una tarea sencilla. Solo tienes que instalar la extensión de Snyk para VS Code en tu IDE para recibir comentarios en tiempo real sobre la seguridad de tu código. Después de guardar el archivo, verás los resultados del análisis de seguridad de Snyk en el editor, como en un linter.

Al ejecutar Snyk en este código, mostrará las siguientes advertencias:

• Inyección SQL en la ruta /login

• Secreto codificado directamente en el código para el token de acceso

Una vulnerabilidad de redirección abierta en la ruta /some/path

Y, de hecho, hay un par de problemas más ocultos. ¿Quieres encontrarlos? ¡Regístrate para obtener una cuenta gratuita de Snyk y pruébalo!

Introducción al árbol de sintaxis abstracta (AST)

El árbol de sintaxis abstracta, conocido como AST, es un concepto fundamental en la programación y la seguridad del código. Se puede definir como una representación en forma de árbol de la estructura sintáctica abstracta del código fuente escrito en un lenguaje de programación. Cada nodo del árbol representa una construcción presente en el código fuente.

En el análisis estático de JavaScript, el árbol de sintaxis abstracta cumple una función fundamental. El análisis estático consiste en examinar el código sin ejecutarlo. Es como una revisión automática del código que busca posibles errores, vulnerabilidades e incumplimientos de las convenciones de programación. Los AST son fundamentales en este proceso porque ofrecen una representación estructurada y más fácil de recorrer del código fuente. Permiten que las herramientas de análisis estático recorran el código de forma más eficiente e identifiquen patrones que podrían indicar errores o vulnerabilidades de seguridad.

Considera el siguiente código JavaScript:

function greet (name) {
  return `Hello, ${name}!`;
}

Una versión simplificada de su AST se vería así:

Program
  FunctionDeclaration
    Identifier (name: greet)
    BlockStatement
      ReturnStatement
        TemplateLiteral
          TemplateElement (value: Hello, )
          Identifier (name: name)
          TemplateElement (value: !)

Esta representación ayuda a las herramientas de análisis estático a entender la estructura y el flujo del código, lo que facilita la detección de posibles problemas.

Usar AST Explorer para entender la estructura del código JavaScript

AST Explorer es una herramienta eficaz que ayuda a los desarrolladores a entender cómo se transforma un fragmento de código en un árbol de sintaxis abstracta. Es compatible con varios lenguajes, incluido JavaScript, y es una excelente herramienta para aprender y depurar problemas relacionados con los AST.

Para usar AST Explorer con JavaScript, sigue estos pasos:

1. Ve a AST Explorer.

2. En el menú superior, selecciona «JavaScript» como lenguaje.

3. Pega o escribe código JavaScript en el panel izquierdo.

4. El panel derecho se actualizará automáticamente para mostrar el AST del código proporcionado.

Por ejemplo, si ingresas la función greet de nuestro ejemplo anterior:

function greet (name) {
  return `Hello, ${name}!`;
}

El AST correspondiente aparecerá en el panel derecho. Verás la estructura en árbol del código y podrás recorrerla para entender mejor cómo se interpreta.

Entender los AST es fundamental para dominar el análisis estático de JavaScript. Te permite comprender mejor cómo está estructurado tu código, cómo lo lee el motor de JavaScript y cómo lo interpretan las herramientas de análisis estático. Este conocimiento puede ayudarte a escribir código más eficiente y seguro, y con menos errores.

Tres herramientas de análisis estático para JavaScript

Las herramientas de análisis estático analizan el código sin ejecutarlo, de ahí el término «estático». Analizan el código fuente y crean un árbol de sintaxis abstracta (AST) para entender su estructura y semántica. Luego aplican diversas reglas y heurísticas al AST para detectar posibles problemas.

Hay varias herramientas populares de análisis estático para JavaScript. A continuación, veremos algunas.

1. Snyk Code

Snyk Code es una herramienta que puedes usar desde la CLI, el IDE o mediante una integración con Git para realizar análisis estático de seguridad. Además de las funciones estándar de análisis estático, Snyk Code ofrece un análisis profundo del código basado en IA simbólica. Esto le permite detectar vulnerabilidades complejas que se producen en varios pasos y que otras herramientas podrían pasar por alto.

Veamos un ejemplo de cómo el análisis estático puede ayudar a identificar un problema de seguridad común: la inyección SQL. Considera el siguiente fragmento de código JavaScript:

let query = "SELECT * FROM users WHERE name = '" + userInput + "'";

En el código anterior, userInput se concatena directamente en una consulta SQL. Si un atacante controla userInput, podría manipular la consulta para extraer información confidencial o realizar acciones maliciosas. Una herramienta de análisis estático como Snyk podría señalar este patrón como una posible vulnerabilidad de inyección SQL.

Para usar Snyk Code, tendrás que registrarte para obtener una cuenta gratuita de Snyk e instalar Snyk CLI, o usar la extensión de Snyk para VS Code para recibir comentarios en tiempo real sobre la seguridad de tu código:

npm install -g snyk
snyk auth
snyk test

En los comandos anteriores, instalamos Snyk CLI, nos autenticamos con nuestra cuenta de Snyk y ejecutamos una prueba de Snyk en nuestro código.

2. ESLint para el análisis estático de JavaScript

ESLint revisa tu código JavaScript en busca de problemas de estilo, posibles errores y vulnerabilidades de seguridad. Su arquitectura extensible permite a los desarrolladores definir y usar reglas personalizadas.

ESLint analiza los patrones de tu código y te avisa de posibles problemas que podrían provocar errores o inconsistencias, como variables sin usar, código inalcanzable y puntos y coma faltantes. Para hacerlo, analiza y verifica tu código con un conjunto de reglas que tú defines.

Esta es una configuración básica de .eslintrc.json para ESLint:

{
  "extends": ["eslint:recommended", "plugin:security/recommended"],
  "plugins": ["security"],
  "rules": {
     "security/detect-sql-injection": "warn"
  }
}

En la configuración anterior, usamos las reglas recomendadas de ESLint y las reglas recomendadas del complemento de seguridad. También habilitamos una advertencia para posibles vulnerabilidades de inyección SQL.

Puedes configurar ESLint para aplicar una amplia variedad de reglas de estilo, como la indentación, el uso de punto y coma, la longitud de las líneas y el uso de comillas simples o dobles para las cadenas. Por ejemplo, si prefieres una indentación de dos espacios, puedes configurar ESLint para que te avise cada vez que encuentre código que no cumpla esta regla.

Además, ESLint ayuda a prevenir errores al alertarte sobre equivocaciones comunes y posibles problemas en tu código. Si integras ESLint en tu flujo de desarrollo, podrás detectar y corregir errores antes de que lleguen a producción.

3. Prettier

Prettier es una biblioteca de JavaScript de código abierto que funciona como formateador de código con opiniones definidas. Ayuda a mantener un estilo de programación uniforme en todo el código base o proyecto. Como desarrollador, quizá hayas vivido desacuerdos sobre el estilo de código que distraen de lo realmente importante. Prettier se encarga de eso para que puedas enfocarte en escribir código, en lugar de preocuparte por su apariencia.

Prettier es compatible con muchos lenguajes, como JavaScript, TypeScript, CSS, HTML y Markdown, entre otros. Se integra con la mayoría de los editores y funciona sin configuración adicional, así que no necesitas dedicar tiempo a configurar archivos complejos. Prettier analiza tu código y lo convierte en un árbol de sintaxis abstracta (AST), que vimos anteriormente. Luego aplica reglas de formato y genera el código con el nuevo formato.

Este es un ejemplo del código antes y después de pasarlo por Prettier:

Antes de Prettier:

let foo=function( arg1, arg2 ) {
    if (arg1>arg2) {
        return arg1
    } else {
        return arg2
    }
}

Después de Prettier:

let foo = function(arg1, arg2) {
  if (arg1 > arg2) {
    return arg1;
  } else {
    return arg2;
  }
};

Como puedes ver, Prettier estandarizó los espacios y la ubicación de los corchetes, y agregó un punto y coma al final de las instrucciones return.

Mientras que Prettier se enfoca únicamente en dar formato al código, ESLint es una herramienta que busca patrones en el código JavaScript que podrían provocar errores. ESLint ofrece muchas opciones de configuración y se puede ajustar para aplicar estándares y convenciones de programación específicos.

Aquí es donde Prettier y ESLint se complementan. Prettier garantiza que el código tenga un formato uniforme, mientras que ESLint verifica que cumpla con las prácticas recomendadas y no contenga posibles errores. Usar estas dos herramientas en conjunto puede mejorar considerablemente la calidad de tu código.

Incluso puedes configurar Prettier para que dé formato a tu código cada vez que guardes un archivo en el editor, y hacer que ESLint revise el código para detectar posibles problemas. Así podrás detectar y corregir inconvenientes antes de que se conviertan en problemas.

Este es un ejemplo de cómo configurarlo en un archivo .eslintrc.json:

{
  "plugins": ["prettier"],
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

En esta configuración, ampliamos las reglas recomendadas de ESLint y agregamos Prettier como complemento. También configuramos la regla prettier/prettier como error, lo que significa que ESLint generará un error cada vez que el formato del código no se ajuste al de Prettier.