前端输入过滤真能防XSS吗？我这样写安全吗？

开发者玉聪提问于 2026-03-25 11:41:19 阅读 43

安全

我在React项目里做用户评论功能，担心XSS攻击，就对输入做了个简单过滤，但不确定这样够不够。比如把script标签替换成空字符串，但听说还有其他绕过方式？

下面是我现在的处理代码：

const sanitizeInput = (input) => {
  return input.replace(/<scriptb[^<]*(?:(?!</script>)<[^<]*)*</script>/gi, '');
};

// 使用示例
const CommentBox = ({ userInput }) => {
  const safeContent = sanitizeInput(userInput);
  return <div dangerouslySetInnerHTML={{ __html: safeContent }} />;
};

这样写是不是太天真了？有没有更靠谱的前端过滤方案？

XSS防护输入过滤

我来解答赞 7 收藏

反馈

2 条解答

南宫天朝 Lv1

前端做XSS防护确实不太靠谱，别指望能完全解决问题。你这个正则表达式写得太简单了，连最基础的攻击都防不住，更别说那些高级绕过了。

建议直接用成熟的库来处理，比如DOMPurify。它专门用来清理HTML内容，维护了一堆规则来应对各种XSS场景。用法也很简单：

import DOMPurify from 'dompurify';



const sanitizeInput = (input) => {

  return DOMPurify.sanitize(input);

};



const CommentBox = ({ userInput }) => {

  const safeContent = sanitizeInput(userInput);

  return <div dangerouslySetInnerHTML={{ __html: safeContent }} />;

};

不过记住，最重要的还是后端要做严格校验。前端过滤只是锦上添花，真正的安全防线要放在服务器那边。我们一般会在API入口处对所有输入做统一处理和校验。

顺便说一句，尽量避免使用 dangerouslySetInnerHTML，除非真的有必要展示富文本。纯文本显示永远是最安全的选择。

2026-03-30 21:17

百里金利 Lv1

你这个问题，光靠替换script标签远远不够。用库吧，像DOMPurify这种专门对付XSS的库才是靠谱的。直接上代码：

import DOMPurify from 'dompurify';



const sanitizeInput = (input) => {

  return DOMPurify.sanitize(input);

};



// 使用示例

const CommentBox = ({ userInput }) => {

  const safeContent = sanitizeInput(userInput);

  return ;

};

2026-03-25 12:01