如何防止ECMAScript模块修改全局对象以避免应用出现不可预测行为？

Great question—modifying the global object from ES modules defeats the whole purpose of encapsulation and modularity we rely on with native ESM. Let’s break down practical, actionable ways to stop this unwanted behavior and keep your app predictable:

1. Sandbox Untrusted Modules in Isolated Environments #

If you’re dealing with third-party modules you don’t fully trust, run them in a sandboxed environment where their global modifications won’t leak into your main app:

Using an <iframe> #

Create a lightweight, hidden iframe that runs the module. Since iframes have their own window context, any global changes stay contained there. You can communicate with the sandboxed module using postMessage:

// Create a hidden iframe
const sandboxIframe = document.createElement('iframe');
sandboxIframe.style.display = 'none';
document.body.appendChild(sandboxIframe);

// Load your module in the iframe's context
sandboxIframe.contentWindow.document.write(`
  <script type="module">
    import './untrusted-module.js';
    // Send status back to the main app
    window.parent.postMessage({ status: 'module_loaded_safely' }, '*');
  </script>
`);

// Listen for updates from the sandbox
window.addEventListener('message', (event) => {
  if (event.data.status === 'module_loaded_safely') {
    console.log('Untrusted module executed without polluting global scope');
  }
});

Pros: Complete isolation, zero risk of global pollution.
Cons: Adds minor performance overhead, requires message passing for data sharing between the sandbox and main app.

Using a Web Worker #

Web Workers run in a separate thread with their own isolated global scope (no window object here). For modules that don’t need DOM access, this is a leaner sandbox option:

// Main app code
const worker = new Worker('worker-wrapper.js', { type: 'module' });

worker.addEventListener('message', (event) => {
  if (event.data.status === 'done') {
    console.log('Module ran safely in worker');
  }
});

// worker-wrapper.js
import './untrusted-module.js';
self.postMessage({ status: 'done' });

2. Static Analysis & Linting (Catch Issues Early) #

For your own codebase or trusted dependencies, enforce rules that block global object modifications during development:

Custom ESLint Rules #

Use ESLint to flag any attempts to assign to window properties. You can leverage built-in rules or create a custom one for stricter control:

// .eslintrc.json
{
  "rules": {
    "no-global-assign": ["error", { "exceptions": [] }],
    "no-undef-init": "error"
  }
}

This will throw linting errors whenever someone writes window.foo = 'bar' in their code, stopping bad practices before they make it to production.

Build-Time Checks with Transpilers #

Use tools like Babel or Rollup with custom plugins to scan module code during builds. For example, a Babel plugin can traverse the abstract syntax tree (AST) and throw an error if it detects assignments to window.

3. Runtime Interception & Protection #

If you need to catch unexpected modifications at runtime, wrap the window object in a Proxy to block or warn about unauthorized changes:

const protectedWindow = new Proxy(window, {
  set(target, property, value) {
    // Define a list of explicitly allowed global properties (if any)
    const allowedProps = ['authorizedGlobalVar'];
    if (!allowedProps.includes(property)) {
      throw new Error(`Illegal global modification: Attempted to set window.${property}`);
    }
    // Allow the assignment only if it's in the allowed list
    return Reflect.set(target, property, value);
  }
});

// Replace the global window with the proxy (test thoroughly first!)
// Note: Some browser APIs may rely on the original window, so validate compatibility
window = protectedWindow;

Pros: Catches edge cases that static analysis might miss.
Cons: Can interfere with legitimate global usage, requires careful configuration of allowed properties.

4. Vet & Audit Dependencies #

For third-party modules, always do your due diligence before importing:

• Review the module’s source code directly (use npm show <package> repository to find its repo)
• Scan for global modifications with simple tools (e.g., grep for window\. in the module’s source files)
• Stick to well-maintained packages with active communities and transparent codebases

内容的提问来源于stack exchange，提问作者Guerric P