白盒测试时如何检测前端代码中的XSS漏洞？

UI雯婧提问于 2026-03-23 19:25:20 阅读 48

安全

我在做项目的安全自查，听说白盒测试要查XSS，但不太清楚具体该看哪些地方。比如用户输入的内容在页面上展示时，是不是只要用了innerHTML就有风险？

我试过用ESLint的security插件，但它好像只报一些明显的危险函数。有没有更系统的方法？比如下面这种动态插入HTML的场景：

const userComment = getQueryParam('comment');
document.getElementById('output').innerHTML = userComment;

这种写法肯定不安全，但除了肉眼排查，有没有工具能自动标出这类问题？或者有哪些编码规范可以规避？

Web安全测试

我来解答赞 7 收藏

反馈

2 条解答

长孙景红 Lv1

白盒测试XSS确实头疼，直接用静态代码分析工具是好办法。你说得对，innerHTML确实危险，尤其像你给的例子，用户输入直接写到页面上。

除了ESLint security插件，再推荐你用一下SonarQube，它能抓到更多潜在问题。不过说实话，工具只能发现已知模式，手动检查还是少不了。

编码规范这块，记住几条：
1. 用户输入永远要转义后再展示，直接用 textContent 比 innerHTML 安全多了
2. 对于动态内容，考虑使用DOM API构建元素而不是拼接字符串

给你个安全的写法示例：

const userComment = getQueryParam('comment');

// 不安全的做法

// document.getElementById('output').innerHTML = userComment;



// 安全的做法

const safeComment = document.createTextNode(userComment);

document.getElementById('output').appendChild(safeComment);

这个方法虽然麻烦点，但确实能杜绝XSS风险。开发时多注意这些细节吧，安全真不是开玩笑的。

2026-03-26 08:02

长孙柯依 Lv1

用textContent替代innerHTML，或者对用户输入进行转义。eslint-plugin-security是个好工具，但手动审查也是必须的。搞定。

2026-03-23 19:28