停止使用 innerHTML：3 种安全渲染 HTML 的替代方案
innerHTML真的是前端世界里最“顺手也最危险”的按钮之一。 它方便到让人上瘾——也脆弱到让攻击者一旦把恶意内容塞进你的数据里，你的页面就会“热情执行”。
比如这种经典投毒：
<img src=x onerror=alert(1)>只要你把它丢进innerHTML，浏览器就会毫不犹豫地配合演出。
下面这 3 种替代方案，才是更接近现代“正确姿势”的做法：有标准方向、有工业级方案、也有最安全的“根治法”。
1）未来标准派：Sanitizer API 的setHTML()
如果你确实需要渲染HTML 字符串，又不想自己写一堆过滤规则，那么Element.setHTML()是一个非常直球的方向：它会把 HTML 解析后进行清理，移除被认为不安全的元素/属性，再插入 DOM。
用法像这样：
const dirtyInput = '<img src=x onerror=alert(1)> <b>Hello</b>'; const el = document.getElementById('target'); // 会自动清掉 onerror 这类危险属性 el.setHTML(dirtyInput);你要注意两点现实问题：
它目前仍是实验性特性，MDN 也明确提示要看兼容性表，别盲目上生产。
这套 API 目前出自 WICG 的孵化规范，并非已进入 W3C 标准轨道的“最终标准”。
一句话：方向很对，但上生产前先确认你的目标浏览器。
2）行业标准：DOMPurify
因为setHTML()还没做到“全平台稳用”，现实世界里更常见的安全做法是：先净化，再插入。
而 DOMPurify 基本就是这条路上的“事实标准”：它专门用来清洗不可信 HTML，去掉潜在 XSS 内容（脚本、危险属性、奇怪的 SVG/MathML 边界等）。
用法也很简单：
import DOMPurify from 'dompurify'; const dirty = '<script>alert("hack")</script><div>Safe Content</div>'; const clean = DOMPurify.sanitize(dirty); element.innerHTML = clean;注意：这里你还是用了innerHTML，但关键差别是——你插入的已经是“被清洗过的字符串”。
安全侧的共识也很明确：当你需要做 HTML Sanitization 时，要用成熟方案、遵循安全指导（OWASP 的 XSS 预防原则里也强调了输出编码与必要时的净化）。
一句话：要渲染富文本，现在就用 DOMPurify，别自研“简易过滤器”。
3）最安全的方法： document.createElement()
如果你并不需要把“HTML 字符串”当 HTML 渲染出来，那最安全的路线其实是：别让浏览器把输入当成可执行结构。
直接用 DOM API 构建节点，用textContent填内容——浏览器会把它当文本，不会当脚本，也就天然避免 XSS。
const div = document.createElement('div'); div.textContent = userInput; // 默认安全：只会当文字 div.classList.add('my-class'); document.body.appendChild(div);这招的气质就是：你不需要“清洗”，因为你根本不给它“执行的机会”。
最后
纯文本：优先
textContent（又快又安全）必须渲染富文本（今天就要上线）：用 DOMPurify
想跟上未来标准：关注/试用
setHTML()，但先过兼容性这关
全栈AI·探索：涵盖动效、React Hooks、Vue 技巧、LLM 应用、Python 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。
最后：
CSS终极指南
Vue 设计模式实战指南
20个前端开发者必备的响应式布局
深入React:从基础到最佳实践完整攻略
python 技巧精讲
React Hook 深入浅出
CSS技巧与案例详解
vue2与vue3技巧合集