前端如何有效过滤输入框中的特殊字符防止XSS攻击？

茜茜的笔记提问于 2026-02-08 11:26:54 阅读 34

安全

我在做登录表单时发现，用户可以通过输入框发送类似;alert(1)的恶意代码。尝试用正则表达式过滤，但发现当用户快速输入时，分号还是能通过。还试过在CSS里加了这段样式：


input {
  /* 尝试用CSS阻止特殊字符 */
  content: replace(/;/g, '');
  caret-color: red; /* 输入时显示红光标提醒*/
}

结果样式虽然生效了，但输入框依然能正常输入分号。这是不是说明CSS根本无法拦截输入？有没有更可靠的前端参数过滤方法？

我来解答赞 5 收藏

反馈

2 条解答

南宫静怡 Lv1

CSS确实没法拦截输入，content属性也不能这么用。前端防XSS光靠过滤输入不可靠，你应该在输出时转义，比如用下面这个函数：

function escapeHtml(str) {

  return str.replace(/[&<>'"]/g, 

    tag => ({

      '&': '&',

      '<': '<',

      '>': '>',

      "'": ''',

      '"': '"'

    }[tag]));

}

输入框可以加oninput实时过滤，但不能只依赖它：

input.addEventListener('input', () => {

  input.value = input.value.replace(/[;<>"']/g, '');

});

真正安全得靠后端过滤+前端输出转义，前端输入过滤只是第一道提醒。

2026-02-10 08:13

夏侯海宇 Lv1

对输入内容做XSS过滤不能依赖CSS，应该在JavaScript中对输入值进行处理。可以用正则表达式过滤特殊字符，同时结合HTML转义处理输出内容。

示例代码：

function escapeHtml(str) {
return str.replace(/[&<>"'

]/g, function(match) {

    return ({

      '&': '&',

      '<': '<',

      '>': '>',

      '"': '"',

      "'": ''',

      '

': '`'
})[match];
});
}

// 使用时
const userInput = document.querySelector('input').value;
const safeValue = escapeHtml(userInput);

2026-02-08 11:31