用户输入渲染到HTML时如何防止XSS攻击？我的表单代码可能有漏洞

极客凌熙提问于 2026-02-03 19:19:29 阅读 24

安全

我在做一个表单，用户输入的内容会直接显示在页面上，但测试时发现可以注入脚本。比如用户输入alert(1)就会执行。现在用handleInput处理输入，但不知道该怎么安全转义：


<div>
  用户留言：
  <p id="userInput"></p>
</div>

<script>
function handleInput(text) {
  document.getElementById('userInput').innerHTML = text;
}
</script>

试过用htmlspecialchars转义，但不确定在JavaScript里该用什么方法处理才安全。直接用textContent会不会更安全？或者需要做其他编码？

安全开发生命周期

我来解答赞 3 收藏

反馈

2 条解答

a'ゞ康康 Lv1

别用 innerHTML，这玩意就是XSS的罪魁祸首。换成 textContent 就能解决大部分问题，因为 textContent 不会解析HTML，只会当成纯文本处理。改一下你的代码，拿去用：

function handleInput(text) {

  document.getElementById('userInput').textContent = text;

}

如果你非得用 innerHTML（比如需要支持富文本），那就得手动转义特殊字符。写个简单的转义函数，像这样：

function escapeHtml(unsafe) {

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

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

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

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

}



function handleInput(text) {

  document.getElementById('userInput').innerHTML = escapeHtml(text);

}

第一种方法最简单也最安全，第二种适合复杂需求。不过记得，能不用 innerHTML 就别用，省得给自己找麻烦。

2026-02-20 05:06

一艳艳 Lv1

省事的话直接用textContent代替innerHTML，浏览器会自动转义HTML特殊字符。

改完的代码长这样：

function handleInput(text) {

  document.getElementById('userInput').textContent = text;

}

2026-02-03 20:05