应谨慎使用 innerHTML：仅对后端已净化的可信 HTML 使用；含用户数据时须先实体编码再拼接；高频混合场景推荐 textContent、DOM 方法或 DocumentFragment；富文本必须用 DOMPurify 净化并配合 CSP。
直接用 innerHTML 渲染大段模板数据确实快，但“快”不等于“安全”或“稳健”。关键不是禁用它，而是明确什么该塞、什么必须拦——尤其当数据含用户输入时。
只对可信内容用 innerHTML
如果你的数据完全来自服务端预处理、内部配置或静态资源（比如 CMS 后台导出的富文本、已审核的公告 HTML），且确认不含动态脚本、事件属性或危险标签，那 innerHTML 是合理选择。
- 确保后端已做过基础过滤（如移除
<script></script>、onerror、javascript:等） - 前端不再二次拼接变量，避免把用户昵称、评论正文等未清洗字段直接插进模板字符串
- 示例安全写法：
el.innerHTML = serverRenderedHtml;（serverRenderedHtml是后端返回的、已净化的完整 HTML 字符串）
含用户数据时，必须先转义再拼接
只要模板中存在任何来自用户的字段（哪怕只是用户名、标题、简介），就不能直接插入 ${userInput}。需先做 HTML 实体编码：
- 用轻量函数转义：创建一个
escapeHtml()，把→ <code><，>→>，&→&，"→" - 再用模板字符串拼结构：
el.innerHTML = `<div class="card"> <h3>${escapeHtml(title)}</h3> <p>${escapeHtml(content)}</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10560" title="生成HTML格式PPT"><img src="https://img.php.cn/upload/skill/000/000/081/179324117396599.jpg" alt="生成HTML格式PPT" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10560" title="生成HTML格式PPT">生成HTML格式PPT</a> <p>从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。</p> </div> <a href="/xiazai/skill10560" title="生成HTML格式PPT" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p> </div>`; - 注意：不要对整个拼好的 HTML 字符串转义，否则标签也会被编码失效；只转义用户字段本身
替代 innerHTML 的更优方案（推荐用于高频/混合场景）
当模板既含结构又含用户数据，且更新较频繁时，innerHTML 容易引发重绘、状态丢失和 XSS 风险。可改用以下方式：
-
纯文本优先：若只需显示内容（如列表项、提示语），一律用
textContent，天然防 XSS，性能更好 -
DOM 方法构造节点：用
document.createElement+appendChild，逐个设置textContent或安全属性，适合需要绑定事件或保留输入焦点的场景 - DocumentFragment 批量插入：循环创建节点后统一 append 到 fragment，最后一次性挂载，减少重排重绘
真要保留富文本？引入专用净化库
如果业务必须支持用户提交带格式的内容（如编辑器输出的 HTML），innerHTML 就不该是第一道防线：
- 前端使用 DOMPurify 对 HTML 字符串做实时净化：
const clean = DOMPurify.sanitize(dirtyHtml); el.innerHTML = clean; - 配合 CSP（Content-Security-Policy）响应头，禁止内联脚本执行，形成纵深防御
- 永远不信任客户端净化结果——后端仍需独立校验与存储时再次净化
