动态导入（import()）是ESM中唯一安全的运行时模块加载机制，仅接受可控路径字符串，返回Promise并受CSP、CORS及MIME校验约束，需配合白名单校验、构建预扫描与类型断言保障安全性。
在 ES Modules（ESM）中，动态导入（import()）是唯一支持运行时模块解析的机制，它天然设计为异步、安全且受控。所谓“动态上下文”，指模块路径不能在编译期静态确定（如拼接字符串、变量驱动、用户输入或配置决定），此时 import() 是合规且推荐的方式；而 eval、new Function 或非标准加载器均不可取，会破坏模块隔离、绕过 CSP、引发安全风险。
动态导入的基本用法与安全边界
import() 返回一个 Promise，只接受字符串字面量或可静态分析的表达式（现代打包工具如 Vite/Webpack 能识别简单模板字符串）。它在调用时才发起网络请求，且仅限于合法模块路径（以 ./、../、/ 或协议开头），浏览器会校验 MIME 类型并强制执行 CORS 和 CSP 策略。
- ✅ 安全写法（路径可控）：
import(`./pages/${pageName}.js`)（若pageName来自白名单或已校验） - ❌ 危险写法（路径不可控）：
import(userInput)或import(`https://malicious.com/${x}.js`) - ⚠️ 注意：即使使用模板字符串，也需确保插值内容被严格约束（如正则匹配、枚举校验），避免路径遍历（
../../../）或跨域注入
配合 TypeScript 类型安全增强
ESM 动态导入默认返回 any 类型，但可通过类型断言或 import type 提前声明接口，提升类型可靠性：
- 定义统一模块接口：
interface PageModule { render(): void; destroy?(): void; } - 安全调用：
const mod = await import(`./pages/${safeName}.js`) as unknown as PageModule; - 更优方式（TS 5.0+）：
const mod = await import(`./pages/${safeName}.js`) as typeof import('./pages/home.js');
构建时与运行时协同保障
纯运行时无法完全杜绝恶意路径，需结合构建阶段约束：
立即学习“Java免费学习笔记（深入）”；
- Vite/Rollup 支持
import.meta.glob预扫描目录，生成有限路径集合，避免任意字符串导入 - Webpack 的
require.context（虽属 CommonJS 遗留）可类比实现受限动态加载 - 服务端可对模块请求做路径白名单拦截（如只允许
/assets/pages/*.js）
CSP 与部署环境加固
动态导入仍需 Content-Security-Policy 配合：
- 必须设置
script-src 'self' 'unsafe-eval'—— 但注意：import()不需要'unsafe-eval'，它走的是模块加载机制，不是 eval - 正确策略应为：
script-src 'self' https:; connect-src 'self';，并禁止data:或blob:模块源 - 生产环境禁用
eval相关指令，确保所有动态行为都经由import()显式触发
