xss前端解决方案

玄玄子2026-07-05 9:56

XSS，即跨站脚本攻击，是将恶意脚本注入到网页中的一种网络攻击手段，它发生的根本原因是浏览器将用户数据误解析为可执行代码。

我们如何防范这种攻击呢？

一输出编码与转义(最核心的防护手段)

不管是前端还是后端向浏览器输出内容时，一般有三种方式避免XSS攻击。

（1）优先使用 textContent 而非 innerHTML

innerHTML会读写元素内部完整HTML源码，解析字符串里的HTML标签，渲染页面，有XSS跨站脚本攻击的风险。

textContent只读写纯文本，完全忽略所有HTML标签。

html 复制代码

<body>
    <div id="app"></div>

    <script>
        var app = document.getElementById('app');
        app.innerHTML = '<img src=x onerror="alert(1)">'; // 方式一
        app.textContent = '<img src=x onerror="alert(1)">'; // 方式二
    </script>
</body>

使用innerHTML，显示结果是：弹出alert框

使用textContent，显示结果是：展示一串字符

（2）将 < 转为 <，> 转为 >，" 转为 " 等

html 复制代码

app.innerHTML = '&lt;img src=x onerror="alert(1)"&gt;'; // 方式三

得到的效果和方式二一样，这样的转义会消除字符的html语法功能，只保留字面显示效果。

原理是：浏览器扫描到实体字符，翻译成'<'、'>'等普通字符，但翻译完成后，此时内容已经被浏览器判定为一段纯文本内容，不会二次扫描识别标签。

（3）使用 encodeURIComponent() 对 URL 参数进行编码

二输入验证与过滤

对输入的数据(比如邮箱、手机号、用户名等)进行格式校验，比如使用正则表达式严格匹配，前后端都要有。

总结

vue框架对插值语法有默认转义，但v-html底层是innerHTML，有XSS风险，谨慎使用。

网站上对用户输入的要传给后端的内容，一定要做验证与过滤，而由后端或前端输出到页面上的代码一定要进行编码和转义。