innerhtml仅在内容完全可信、仅含轻量富文本且启用trusted types+csp时可用；混入用户输入必须用dompurify净化或改用textcontent/框架插值/markdown解析，并强制前后端双校验与csp兜底。
直接用 innerHTML 渲染不可信内容，等于给攻击者开了执行脚本的后门。生产环境不能靠“小心点”来防 XSS，必须建立可验证、可拦截、可审计的清理规范。
明确 innerHTML 的安全边界
它只应在满足以下全部条件时使用：
- 内容完全由前端硬编码或服务端可信模板生成（不含任何用户输入、URL 参数、API 响应字段）
- 仅用于展示轻量富文本（如加粗、链接、换行），且已确认无动态属性拼接
- 所在上下文已启用 Trusted Types + CSP 强制策略（
require-trusted-types-for 'script'）
只要混入一个外部变量，例如 el.innerHTML = `<p>欢迎，${userName}！`</p>，就立刻退出安全区——此时应改用 textContent 或带白名单的净化流程。
不可信 HTML 必须走 DOMPurify 白名单净化
正则过滤、字符串替换、手动删 on* 属性，全部无效。真实攻击会绕过：<svg onload="alert(1)"></svg>、<a href="javascript:fetch()"></a>、<img src="x" onerror="..."> 等变体极多。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
正确做法：
- 前端：用
DOMPurify.sanitize(html, { ALLOWED_TAGS: ['b','i','a'], ALLOWED_ATTR: ['href','title'] }) - 后端：必须同步校验！Node.js 推荐
sanitize-html，配置allowedTags和allowedAttributes，禁用script、style、on*类属性 - 禁止把净化逻辑放在客户端后端不校验——攻击者可跳过 JS 直接发恶意 payload
替代方案优先级排序
能不用 innerHTML 就不用。按安全性和适用性排序：
-
纯文本更新 → 用
textContent：90% 场景适用，零解析、零执行、不重排、不丢事件监听器 -
需格式但可控 → 用框架插值：React 的
{text}、Vue 的{{ text }}自动转义，比手写innerHTML安全十倍 -
需渲染富文本 → 用 Markdown 解析器：如
marked或remark，比 HTML 白名单更易控、更难绕过 - 必须用 HTML → 先净化再赋值：且确保前后端双校验，CSP + Trusted Types 全开启
生产环境强制防护层
单靠代码习惯不可靠，必须靠基础设施兜底：
- CSP 头必须包含：
Content-Security-Policy: trusted-types default; require-trusted-types-for 'script'; default-src 'none'; script-src 'self' -
<meta http-equiv>不生效，必须由后端响应头注入 - 所有受控 sink 都要覆盖：不仅
innerHTML，还有insertAdjacentHTML、DOMParser.parseFromString、eval、setTimeout(string)等 - 框架组件（如 Ant Design 的
dangerouslySetInnerHTML）需确认其内部是否封装为TrustedHTML；旧版本或自定义渲染逻辑可能绕过
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
