拖拽本地HTML文件到网页后不能直接执行，必须手动读取（如file.text()）、解析（DOMParser）、清除script和内联事件以防范XSS，脚本需沙箱化执行且禁用敏感API。
拖拽本地 HTML 文件到网页后直接解析运行，关键不是“能不能”，而是“怎么安全地做”。浏览器不会自动把拖进来的 .html 文件当代码执行——它只是个 File 对象，内容得你手动读、手动解析、手动隔离执行。
drop 事件里拿不到 file.content？因为根本没这属性
常见错误是写 event.dataTransfer.files[0].content，结果返回 undefined。浏览器的 File 对象没有 content 属性，必须显式调用读取方法。
- 正确做法：用
file.text()（返回Promise），或file.arrayBuffer()（适合二进制处理） - 必须先阻止默认行为：
event.preventDefault()在dragover和drop中都要调用，否则浏览器会直接打开文件或跳转 - 只处理
text/html类型或扩展名匹配/\.html?$/i的文件，避免误读其他格式 -
file.text()自动处理 BOM 和 UTF-8 编码声明，不用额外解码
用 DOMParser 解析 HTML 片段时如何防 XSS？
不能直接 innerHTML = htmlString，也不能用 document.adoptNode() 后挂载——内联事件（如 onclick）、<script></script> 标签都会被触发，造成执行污染。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用
new DOMParser().parseFromString(htmlString, "text/html")创建独立文档上下文 - 立即清除所有
<script></script>：doc.querySelectorAll("script").forEach(s => s.remove()) - 批量移除内联事件属性：
doc.body.querySelectorAll("[onerror],[onclick],[onload]").forEach(el => { el.removeAttribute("onerror"); el.removeAttribute("onclick"); el.removeAttribute("onload"); }) - 若需保留样式，可复制
和，但注意后者不会发起网络请求，CSS 不会生效
想运行 HTML 里的 script 怎么沙箱化？
用户拖进来的 HTML 常含 <script></script>，但直接 eval() 或注入 <script></script> 标签等于开放 XSS 入口。iframe.sandbox 也不行——它无法访问父页面 DOM，破坏“即时渲染+运行”闭环。
- 只允许保留的
<script></script>内容，用new Function(scriptText)包裹，并传入受限上下文（例如仅提供console和一个空document引用） - 执行前用正则粗筛敏感调用：
/fetch\s*\(|localStorage\s*\.|document\.cookie/i，命中即拒绝 - 不支持
import、await等语法（new Function不支持顶层 await），纯同步 JS 才能跑通
真正难的不是读取或解析，而是判断哪些脚本该留、哪些该删、哪些该重写上下文——这个边界没有银弹，得结合业务场景人工权衡。比如 demo 演示可以宽松些，但 CMS 后台必须严格过滤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
