¿Qué es JSON?

JSON (JScript Object N

Ventajas clave:

Parseo básico con JSON.parse

// JSON recibido del servidor (string)
const payload = '{"nombre":"Ana","edad":28,"activo":true}';
// Convertir a objeto JavaScript
const usuario = JSON.parse(payload);
console.log(usuario.nombre); // → Ana
console.log(usuario.edad);   // → 28

Si el string no es válido, JSON.parse lanza una excepción SyntaxError. Es buena práctica envolver la llamada en try / catch:

try {
  const data = JSON.parse(payload);
  // … usar data
} catch (e) {
  console.error('JSON inválido:', e.message);
}

Serializar objetos con JSON.stringify

const config = {
  modo: 'producción',
  debug: false,
  servidores: ['api.example.com', 'cdn.example.com']
};
const json = JSON.stringify(config, null, 2); // pretty‑print con 2 espacios
console.log(json);

Parámetros avanzados:

• replacer: función o array para filtrar propiedades.
• space: número o cadena para formatear la salida (muy útil en logs).

Ejemplo con replacer para eliminar claves sensibles:

function hideSensitive(key, value) {
  return key === 'password' ? undefined : value;
}
const safeJson = JSON.stringify(usuario, hideSensitive, 2);

Validación y sanitización de JSON

Antes de parsear datos externos, considera:

1. Validar la estructura con JSON Schema usando librerías como ajv o joi.
2. Limitar el tamaño del payload para evitar ataques de denegación de servicio (DoS).
3. Escapar caracteres peligrosos si el JSON será insertado en HTML (prevención de XSS).

Ejemplo rápido con ajv (Node.js):

const Ajv = require('ajv');
const ajv = new Ajv();
const schema = {
  type: 'object',
  required: ['nombre', 'edad'],
  properties: {
    nombre: {type: 'string'},
    edad: {type: 'integer', minimum: 0}
  }
};
const validar = ajv.compile(schema);
const datos = JSON.parse(payload);
if (!validar(datos)) {
  console.error('Errores de validación:', validar.errors);
}

Seguridad al trabajar con JSON

• Never eval JSON: Evita eval() o new Function() para convertir texto a objeto; usa siempre JSON.parse.
• Content‑Security‑Policy (CSP): Configura CSP que bloquee la ejecución de scripts inline que puedan intentar inyectar JSON malicioso.
• Escapar al insertar en HTML: Utiliza textContent o librerías como DOMPurify cuando muestres datos JSON dentro del DOM.

Ejemplo de inserción segura:

const div = document.getElementById('resultado');
div.textContent = JSON.stringify(usuario, null, 2);

Rendimiento y buenas prácticas

En aplicaciones de alto tráfico, el manejo de JSON puede convertirse en cuello de botella. Algunas recomendaciones:

• Reutiliza objetos cuando sea posible, evitando crear estructuras temporales en bucles intensivos.
• Usa JSON.parse con reviver solo si necesitas transformar valores (por ejemplo, fechas). Un reviver mal escrito puede degradar el rendimiento.
• Compresión HTTP: Habilita gzip o brotli en el servidor; JSON comprime muy bien debido a su alta redundancia.
• Streaming JSON: Para respuestas muy grandes, considera JSON Lines o ReadableStream en el cliente.

Depuración y troubleshooting

Los errores más comunes al parsear JSON:

1. Comas finales (`{ "a":1, }`) – no permitido.
2. Comillas simples (`{'a':1}`) – JSON requiere comillas dobles.
3. Caracteres no escapados (`"texto con "comillas""`).

Herramientas útiles:

• JSON.stringify(obj, null, 2) para imprimir de forma legible.
• Extensión del navegador JSON Viewer para inspeccionar respuestas.
• Validadores online como JSONLint.

Caso de uso: Consumo de una API REST con fetch

async function cargarProductos() {
  try {
    const respuesta = await fetch('https://api.example.com/productos', {
      headers: { 'Accept': 'application/json' }
    });
    if (!respuesta.ok) throw new Error(`HTTP ${respuesta.status}`);
    // Validar tamaño máximo (ej. 1 MB)
    const contenidoTipo = respuesta.headers.get('content-length');
    if (contenidoTipo && Number(contenidoTipo) > 1_048_576) {
      throw new Error('Payload demasiado grande');
    }
    const datos = await respuesta.json(); // Internamente usa JSON.parse
    // Opcional: validar contra schema
    console.log('Productos:', datos);
  } catch (err) {
    console.error('Error al cargar productos:', err);
  }
}
cargarProductos();

El método response.json() es la forma más segura y cómoda, ya que gestiona automáticamente la codificación UTF‑8 y el parseo.