为什么用innerHTML渲染用户输入时会引发XSS漏洞？

FSD-宏旭提问于 2026-02-04 18:43:24 阅读 35

安全

最近在做论坛项目时，用innerHTML动态显示用户提交的评论内容，结果被测试工具提示存在XSS漏洞。我尝试过滤了输入里的尖括号和script关键字，但漏洞检测还是报错，这是为什么呢？

代码是这样的：


// 用户输入直接拼接到innerHTML
const userContent = document.querySelector('#user-input').value;
document.getElementById('comment-area').innerHTML += 
  &lt;div class="comment"&gt;
    ${userContent}
  &lt;/div&gt;
;

我明明做了输入过滤，为什么还是不安全？是不是过滤方法有问题？有没有更稳妥的替代方案？

我来解答赞 3 收藏

反馈

2 条解答

UE丶新利 Lv1

直接用 innerHTML 渲染用户输入确实不安全，就算你过滤了尖括号和 script 关键字，还是可能被绕过，比如通过事件属性 onerror 或者其他标签像 <img> 来执行恶意代码。稳妥的方法是用 textContent 替代，它会自动转义内容，不会解析 HTML。

我之前这样搞的：

// 使用 textContent 安全渲染

const userContent = document.querySelector('#user-input').value;

const newComment = document.createElement('div');

newComment.className = 'comment';

newComment.textContent = userContent;

document.getElementById('comment-area').appendChild(newComment);

如果非要支持部分富文本，可以用库比如 DOMPurify 来清理 HTML，但别自己手写过滤规则，太容易漏。

2026-02-15 14:05

慕容玉泽 Lv1

你那过滤方法太简单了，XSS绕过手段多得很。试试用textContent显示内容，浏览器会自动转义html标签。

const userContent = document.querySelector('#user-input').value;

const commentDiv = document.createElement('div');

commentDiv.className = 'comment';

commentDiv.textContent = userContent;

document.getElementById('comment-area').appendChild(commentDiv);

2026-02-04 19:02