前端渲染用户输入时如何防止 XSS 攻击？

东方雨橙提问于 2026-03-13 10:25:21 阅读 38

前端

我在做一个评论功能，用户提交的内容直接用 innerHTML 插到页面上，结果发现如果用户输入带 script 标签的内容，会被执行！这明显有 XSS 风险。我试过用 DOMPurify，但项目不允许引入第三方库，只能自己处理。

现在想手动做输出转义，但不确定哪些字符必须转。比如下面这段代码：

const userInput = '<img src=x onerror=alert(1)>';
commentDiv.innerHTML = userInput; // 危险！

有没有简单又安全的原生 JS 方法，能把用户输入里的特殊字符转成 HTML 实体再插入？

我来解答赞 12 收藏

反馈

2 条解答

峻豪~ Lv1

防止XSS攻击的关键在于确保用户输入不会被当作代码执行。你提到的情况正是典型的XSS漏洞，因为直接使用innerHTML插入了用户输入的内容。我们可以通过将特殊字符转换为HTML实体来避免这个问题。

原理是这样：HTML实体是一种在HTML文档中表示特殊字符的方法。例如，小于号<可以用<代替，大于号>可以用>代替。这样浏览器会将这些实体当作普通文本处理，而不是代码的一部分。

为了手动实现输出转义，我们需要将一些特定的字符转换为对应的HTML实体。通常需要转义的字符包括：< > " ' &。

下面是简单的JavaScript函数，可以将这些字符转义为HTML实体：

function escapeHtml(unsafe) {

    // 创建一个空的DOM元素

    var temp = document.createElement('div');

    // 将用户输入设置为文本节点

    temp.textContent = unsafe;

    // 返回转义后的字符串

    return temp.innerHTML;

}



// 使用示例

const userInput = '';

const safeInput = escapeHtml(userInput);

commentDiv.innerHTML = safeInput; // 现在是安全的





这个函数的工作原理是利用浏览器的自动转义机制。当你把一段文本设置为DOM元素的textContent属性时，浏览器会自动将其中的特殊字符转义。然后我们读取该元素的innerHTML属性，得到的就是已经转义过的字符串，可以直接插入到页面中而不用担心XSS攻击。



这样做不仅简单，而且效果可靠。虽然看起来有点绕弯，但实际上利用了浏览器内置的安全特性，避免了手动编写复杂的转义逻辑。希望这个方法能帮到你。


                
                    
                    
                        点赞
                        
                    
                    
                    
                    2026-03-22 22:24


    
        
            
                
            
            
                
                    UX-熙研
                    Lv1
                    
                
                
                    这个问题很常见，innerHTML 直接插用户输入就是典型的 XSS 漏洞。



最直接的解决办法是写一个转义函数，把那些会破坏 HTML 的字符替换成实体：



function escapeHtml(text) {

  const map = {

    '&': '&',

    '<': '<',

    '>': '>',

    '"': '"',

    "'": '''

  };

  return text.replace(/[&<>"']/g, m => map[m]);

}



// 使用

commentDiv.innerHTML = escapeHtml(userInput);




不过说实话，如果你只是想把用户输入显示出来，更省心的办法是用 textContent：



commentDiv.textContent = userInput;




这样浏览器根本不会把内容当作 HTML 解析，


                    
                        
                            相关推荐
                            
                                
    
        
            1
            回答
        
        
            59
            浏览
        
    
    
        前端如何在Vue项目中安全地处理用户输入以防止XSS攻击？
        我在做DevSecOps集成时，安全扫描工具报了一个高危XSS漏洞，说用户输入直接渲染到页面上了。我试过用v-text，但有些地方必须用v-html展示富文本，结果就被扫出问题了。 比如下面这段代码，...
        
            长孙艳杰
                            安全                        2026-03-24 10:12:22
        
    

    
        
            2
            回答
        
        
            55
            浏览
        
    
    
        前端如何正确处理用户输入防止XSS攻击？
        我在做一个评论功能，用户提交的内容要显示在页面上，但担心XSS漏洞。比如用户输入了alert(1)，直接innerHTML就会执行，这太危险了。 我试过用DOMPurify库清理，但有些场景又需要保留...
        
            UI美含
                            安全                        2026-03-15 15:26:19
        
    

    
        
            2
            回答
        
        
            51
            浏览
        
    
    
        前端安全审计时如何防止XSS攻击？
        最近在做项目的安全审计，发现用户输入的内容直接渲染到页面上，担心有XSS风险。比如下面这段代码，把用户昵称直接插进HTML里，会不会被注入脚本？ <div class="user-info"&g...
        
            A. 清梅
                            前端                        2026-03-10 06:20:21
        
    

    
        
            2
            回答
        
        
            51
            浏览
        
    
    
        前端如何用安全沙箱防止XSS攻击？
        最近在做一个富文本编辑器的功能，用户可以输入HTML内容，但我担心XSS问题。听说可以用沙箱隔离，比如把内容放到iframe里？我试过动态创建iframe然后写入内容，但样式全乱了，而且有些脚本还是能...
        
            UP主～静静
                            安全                        2026-03-27 18:24:25
        
    

    
        
            2
            回答
        
        
            61
            浏览
        
    
    
        前端代码里怎么防止XSS攻击？我这样写安全吗？
        最近在做渗透测试，发现我们项目里有个用户输入展示的地方可能有XSS风险。我用React直接渲染用户输入的内容，但听说这样不安全，可又不确定具体哪里有问题。 我试过用DOMPurify处理，但团队有人说...
        
            Des.统思
                            安全                        2026-03-22 11:11:22
        
    

    
        
            1
            回答
        
        
            45
            浏览
        
    
    
        前端输入验证只靠CSS能防XSS吗？
        我在做一个评论功能，用户输入内容后直接显示在页面上。听说要防止XSS攻击，但我看有些项目只用了CSS的white-space: pre-wrap和overflow-wrap: break-word来处...
        
            Mr.梦玲
                            前端                        2026-03-21 09:41:19
        
    

    
        
            1
            回答
        
        
            46
            浏览
        
    
    
        前端安全审计时如何防止XSS攻击？
        最近在做项目的安全审计，发现有个地方可能有XSS漏洞。用户输入的内容直接插到页面里了，虽然用了innerText，但不确定是不是真的安全。 比如下面这段代码，把URL参数里的值直接显示出来，这样写会不...
        
            巧云酱~
                            前端                        2026-03-17 16:11:15
        
    

    
        
            2
            回答
        
        
            74
            浏览
        
    
    
        前端如何安全地处理用户输入避免XSS攻击？
        我在做一个评论功能，用户提交的内容直接用 innerHTML 插入到页面，结果被安全扫描工具报了 XSS 风险。我试过用 DOMPurify，但不确定是不是用对了，比如下面这样写安全吗？ const ...
        
            丽萍（打工版）
                            安全                        2026-03-05 21:53:18
        
    

    
        
            2
            回答
        
        
            43
            浏览
        
    
    
        前端输入过滤真能防XSS吗？我这样写安全吗？
        我在React项目里做用户评论功能，担心XSS攻击，就对输入做了个简单过滤，但不确定这样够不够。比如把script标签替换成空字符串，但听说还有其他绕过方式？ 下面是我现在的处理代码： const s...
        
            开发者玉聪
                            安全                        2026-03-25 11:41:19
        
    

    
        
            2
            回答
        
        
            84
            浏览
        
    
    
        前端做XSS输入过滤到底该在哪儿处理？
        我最近在用 Vue 写一个评论功能，用户输入的内容会直接渲染到页面上。我知道要防 XSS，但不确定是在输入时就过滤掉危险字符，还是在渲染时转义？试过在提交前用正则替换 script 标签，但好像还是能...
        
            Code°秀云
                            安全                        2026-03-19 08:44:24


                
    Copyright © 2026 JZTHEME All rights reserved网站地图桂ICP备2022001918号-9