白盒测试时怎么判断前端代码是否存在XSS风险？

设计师丽丽提问于 2026-03-31 04:19:14 阅读 3

安全

最近在做项目安全自查，听说白盒测试要查XSS漏洞，但我看自己写的React组件里都是用{userInput}这种插值，应该没问题吧？可又不确定有没有漏掉什么场景。

比如有个地方用了dangerouslySetInnerHTML，虽然数据是后端返回的，但没再转义。我试着输入<script>alert(1)</script>，页面居然真弹窗了！这算高危漏洞吗？该怎么修复？

另外，除了这种明显的情况，还有哪些前端代码写法容易引入XSS？有没有工具能自动扫描这类问题？

白盒测试

我来解答赞 1 收藏

反馈

1 条解答

Code°鹤荣 Lv1

XSS确实是个头疼的问题，特别是前端代码。你遇到的情况很典型，直接用 dangerouslySetInnerHTML 且不转义确实是高危漏洞。

先说简单的修复方法，如果你非要使用 dangerouslySetInnerHTML，至少要做个基本的HTML实体转义：

function escapeHtml(str) {

    return str.replace(/&/g, "&")

              .replace(/
              .replace(/>/g, ">")

              .replace(/"/g, """)

              .replace(/'/g, "'");

}

不过最好的方式是避免直接使用这个属性。React本身提供了一种更安全的方式：通过属性而不是innerHTML来渲染内容。

除了dangerouslySetInnerHTML，其他常见的XSS场景还有：
1. 动态设置标签的href属性
2. 直接在DOM中插入用户输入（比如用.innerHTML）

说到工具，eslint-plugin-react-security和SonarQube都能帮你检查这些问题。我建议都装上，虽然不能完全依赖工具，但能帮你发现不少问题。

另外分享个小技巧，我在项目里加了个全局的safeRender函数，所有需要渲染用户输入的地方都走一遍这个函数，算是额外的一道保险吧。写代码的时候真得小心再小心，这种安全问题藏得深还容易被忽略。

2026-03-31 05:00