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()，但先过兼容性这关

阅读原文：原文链接