前端如何防止用户输入的脚本被直接执行？

シ佳妮提问于 2026-03-30 18:09:14 阅读 2

前端

我在做一个评论功能，用户提交的内容会直接显示在页面上。但测试时发现如果输入 alert(1)，居然真的弹窗了！这不就XSS了吗？

我试过用 innerText 代替 innerHTML，但这样连正常的换行和格式都没了。有没有既能保留基本格式又安全的做法？比如只允许 br、p 这些标签？

现在后端是直接存原始字符串，前端渲染时用的是 Vue 的 v-html，是不是这里出问题了？求指点安全又实用的方案。

XSS攻击前端安全

我来解答赞 1 收藏

反馈

1 条解答

司徒树潼 Lv1

这确实是典型的XSS问题。首先得明确一点，v-html确实容易引发安全问题，因为它是直接解析HTML的。具体来说，你需要做两件事：输入过滤和输出编码。

先说输入过滤吧。在后端就要对用户输入进行处理，只允许特定标签通过。比如用一个白名单机制，我给你写个简单的示例：

function sanitizeInput(input) {

    // 使用正则表达式简单过滤

    const regex = /<[^>]*script[^>]*>/gi;

    return input.replace(regex, '');

}

不过这还不够全面，建议用成熟的库比如 DOMPurify。它能更细致地控制哪些标签和属性可以通过。

然后是输出编码。Vue本身不会自动帮你转义HTML，所以要用专门的插件或者自己实现一个转义函数。比如说这样：

function htmlEscape(str) {

    return str.replace(/[&<>"']/g, function(match) {

        switch (match) {

            case '&': return '&';

            case '<': return '<';

            case '>': return '>';

            case '"': return '"';

            case "'": return ''';

        }

    });

}

对于保留格式的需求，可以在过滤后的文本中手动添加
标签来换行。不要指望浏览器自动识别原始文本的格式，毕竟安全性更重要。

最后再吐槽一下，前端安全真是个坑啊，光防XSS就得考虑这么多细节。但没办法，用户数据就是这么不靠谱，我们只能尽量堵住漏洞。

2026-03-30 18:11