应通过运行时探针和代码级检查识别动态注入script行为，包括document.write、innerhtml/insertadjacenthtml插入script、eval/function执行远程js等废弃方式，推荐用grep命令筛查并集成eslint阻断构建。
如何识别页面里还在用 document.write() 这类废弃脚本加载方式
直接搜 document.write( 很容易漏掉变体，比如换行、空格、模板字符串拼接。真正要抓的是「运行时动态注入 script 标签」这一行为模式——它在现代浏览器中已被禁用或降级（尤其在 defer/async 场景下），且无法被 CSP 拦截之外的任何机制兜底。
推荐用这条命令快速筛查：
grep -r -n "document\.write\|innerHTML.*<script .>
<p>注意：<code>innerHTML = "<script>..." 和 <code>insertAdjacentHTML("beforeend", "<script>...") 都属于隐式废弃加载，比 <code>document.write 更隐蔽，但同样破坏解析顺序、触发重排、绕过模块系统。
<ul>
<li><code>document.write 在 defer/async 脚本中调用会清空整个文档（Chrome 90+ 已报 <code>DOMException: document.write() is not supported in module scripts）
<li><code>innerHTML 插入 script 不会执行，除非显式调用 <code>eval 或创建新 <code><script> 元素并 append —— 这种写法在 CSP strict-dynamic 下直接失败
<li>所有这类操作在 Shadow DOM 内完全无效，axe 扫描时也默认忽略，必须靠代码级检查
<H3><code>eval() 和 <code>Function() 加载远程脚本是否算废弃？
<p>不算 W3C 明确废弃，但属于事实废弃：它们绕过所有模块加载机制、无法 tree-shake、无法 sourcemap、无法被 webpack/vite 识别，且在严格 CSP 环境下直接抛 <code>SyntaxError: Failed to execute 'eval' on 'Window': Refused to evaluate a string as JavaScript。
<p>真实项目中最常踩的坑是这类写法：
<pre class="brush:php;toolbar:false;">fetch("/api/config.js").then(r => r.text()).then(code => eval(code))</script>
它看起来像“动态加载”，实则等于把服务器当 CDN 用，且无缓存、无错误边界、无法调试。
- 替代方案必须用
import()动态导入（支持 Promise、可 await、能 catch 错误） - 若后端真返回 JS 字符串，应改用
new Function(...)+try/catch包裹，但依然不推荐 - CI/CD 中可用
eslint-plugin-no-eval插件拦截，规则项为no-eval和no-implied-eval
自动化检查工具链怎么集成进构建流程
单纯 grep 只能发现表层问题，真正要阻断上线，得让检查成为构建失败条件。HTMLHint 本身不查脚本加载逻辑，需配合自定义规则或 ESLint。
最小可行配置（ESLint + eslint-plugin-security）：
npm install eslint eslint-plugin-security --save-dev
在 .eslintrc.js 中加：
module.exports = {
plugins: ["security"],
rules: {
"security/detect-object-injection": "error",
"security/detect-non-literal-fs-filename": "error",
"security/detect-eval-with-expression": "error",
"security/detect-dangerous-regex": "warn"
}
}
关键点：detect-eval-with-expression 会标记所有含变量拼接的 eval 和 Function 调用，而不仅是字面量。
- HTML 文件里的内联脚本需启用
eslint-plugin-html，否则 ESLint 默认跳过 - Webpack 构建中可通过
eslint-webpack-plugin在编译时触发检查，比 postbuild 脚本更早暴露问题 - 不要依赖
html-validate查这个——它只校验 HTML 结构，不分析 JS 执行逻辑
为什么 document.currentScript 不算废弃但实际不可靠
它没被标准废弃，但几乎所有现代加载场景下都返回 null：模块脚本（type="module"）、动态 import、worker 内执行、甚至某些 polyfill 注入顺序都会让它失效。
典型误用：
<script src="loader.js"></script> // loader.js 里： const script = document.currentScript; const url = script.dataset.src; fetch(url).then(...)
这段代码在 type="module" 页面里必定失败，因为 document.currentScript 在模块上下文中始终为 null。
- 安全替代方案：用
document.scripts倒序遍历找最后一个未执行的 script，或干脆改用显式传参（<script src="loader.js"></script>） - Playwright 测试中模拟该场景时，必须手动设置
page.addInitScript注入 mock，否则测试永远过不了 - axe 扫描不会报这个，但 Lighthouse 的 “Avoid document.write()” 审计项会连带提示
currentScript依赖风险
document.write，而是那些靠字符串拼接、模板引擎渲染、甚至服务端注入生成的动态 script 加载逻辑——它们躲得过静态扫描，只在特定用户路径下触发。必须结合运行时探针（如重写 document.write 方法并 throw）和 E2E 覆盖才能兜住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
