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

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

前端

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

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

前端安全输出转义

我来解答赞 4 收藏

反馈

1 条解答

小利 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