innerHTML 真的是前端世界里最"顺手也最危险"的按钮之一。 它方便到让人上瘾------也脆弱到让攻击者一旦把恶意内容塞进你的数据里，你的页面就会"热情执行"。
比如这种经典投毒：
go
<img src=x onerror=alert(1)>只要你把它丢进 innerHTML，浏览器就会毫不犹豫地配合演出。
下面这 3 种替代方案，才是更接近现代"正确姿势"的做法：有标准方向、有工业级方案、也有最安全的"根治法"。
1）未来标准派：Sanitizer API 的 setHTML()
如果你确实需要渲染 HTML 字符串 ，又不想自己写一堆过滤规则，那么 Element.setHTML() 是一个非常直球的方向：它会把 HTML 解析后进行清理，移除被认为不安全的元素/属性，再插入 DOM。
用法像这样：
go
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 边界等）。
用法也很简单：
go
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。
go
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 脚本等专栏，案例驱动实战学习，点击二维码了解更多详情。
最后：