前端安全测试中如何防止XSS攻击？

小利娟提问于 2026-03-30 09:10:15 阅读 3

安全

我在做安全测试时发现，用户输入的内容直接渲染到页面上可能会被注入脚本。比如下面这个React组件，虽然用了 dangerouslySetInnerHTML，但不确定怎么安全地处理用户输入。

const UserComment = ({ comment }) => {
  return (
    <div
      dangerouslySetInnerHTML={{
        __html: comment // 用户提交的评论内容
      }}
    />
  );
};

我试过用 DOMPurify 清洗，但有些富文本格式会被过滤掉，产品又要求保留部分标签。这种情况下该怎么平衡功能和安全？

我来解答赞 1 收藏

反馈

1 条解答

Mc.佳宁 Lv1

解决XSS攻击问题确实让人头疼，特别是当你既要保证安全性又不能破坏用户体验的时候。这里有个思路可以参考。

首先说说原理：XSS的根本原因是用户输入的内容被直接当作可执行代码渲染了。所以关键是要在展示前对内容进行安全处理。

我建议用白名单机制来解决这个问题。具体步骤如下：

1. 首先引入DOMPurify库，它已经为我们做了大部分的脏活累活
2. 自定义一个允许的标签列表，比如只允许 strong, em, a 这些基本格式化标签
3. 在使用 dangerouslySetInnerHTML 之前，用 DOMPurify 来清洗数据

这是改造后的代码：



import React from 'react';

import DOMPurify from 'dompurify';



const UserComment = ({ comment }) => {

  // 定义白名单

  const ALLOWED_TAGS = ['b', 'i', 'u', 'a', 'p'];

  

  // 清洗用户输入

  const cleanHTML = DOMPurify.sanitize(comment, {

    ALLOWED_TAGS: ALLOWED_TAGS,

    FORBID_ATTR: ['style'] // 禁止样式属性防止css注入

  });



  return (

    
      dangerouslySetInnerHTML={{

        __html: cleanHTML // 使用清洗后的内容

      }}

    />

  );

};

这样做的好处是既保留了必要的富文本格式，又能有效阻止恶意脚本执行。注意FORBID_ATTR这个配置，它能防止通过CSS做更多坏事。

最后提醒一点，就算用了这些防护措施，也别完全信任用户输入。任何外部来源的数据都要保持警惕，毕竟黑客们总能找到新花样。不过按照这个方法来做，至少能挡住大多数常见的XSS攻击方式。

2026-03-30 09:11