前端输出用户内容时怎么防止XSS攻击？

西门培静提问于 2026-03-02 09:23:19 阅读 35

前端

我在做一个评论功能，用户提交的内容直接用 innerHTML 插入到页面上，结果发现如果输入 <script>alert(1)</script> 会被执行，这明显有安全风险。

我试过用 replace 把尖括号替换成 < 和 >，但感觉不太靠谱，有没有更标准的做法？比如有没有现成的转义函数或者框架推荐的方案？

前端安全输出转义

我来解答赞 11 收藏

反馈

2 条解答

设计师啸喆 Lv1

你的思路是对的，innerHTML直接插用户内容确实是典型XSS漏洞。简单replace确实不靠谱，光替换尖括号远远不够，空格、引号、事件属性这些都能绕过。

最直接的方案是先把用户输入做HTML转义，把 < > & " ' 这些字符转成实体编码，然后再innerHTML就不会被执行了。

自己写一个转义函数大概这样：

function escapeHtml(str) {

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

  div.textContent = str;

  return div.innerHTML;

}



// 用法

commentDiv.innerHTML = escapeHtml(userInput);

这个写法利用浏览器的textContent特性来帮你做转义，比手写replace稳多了。

不过更推荐的做法是用 DOMPurify 这个库，它专门干这个的，考虑了各种边界情况：

import DOMPurify from 'dompurify';



commentDiv.innerHTML = DOMPurify.sanitize(userInput);

如果你是用 React 或 Vue 这些框架，框架本身已经帮你做了转义，只要别用 dangerouslySetInnerHTML 或者 v-html 这种显式跳过转义的方式就行。

总结一下：要么用 escapeHtml 这种简单转义，要么直接上 DOMPurify，别自己写正则，容易漏。

2026-03-20 11:11

小利 Dev Lv1

最简单的办法就是别用 innerHTML，改成 textContent 或 innerText，浏览器会自动帮你转义，根本不会执行脚本。

如果你确实需要渲染一些格式（比如换行），那就写个转义函数：

function escapeHtml(str) {

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

    div.textContent = str;

    return div.innerHTML;

}



// 用的时候

element.innerHTML = escapeHtml(userContent);

要是用 Vue 或 React，直接用双花括号 {{ content }} 或者 {content}，框架默认就帮你转义了，根本不用操心。

2026-03-02 09:41