前端代码里怎么防止XSS攻击？我这样写安全吗？

Des.统思提问于 2026-03-22 11:11:22 阅读 4

安全

最近在做渗透测试，发现我们项目里有个用户输入展示的地方可能有XSS风险。我用React直接渲染用户输入的内容，但听说这样不安全，可又不确定具体哪里有问题。

我试过用DOMPurify处理，但团队有人说React的JSX本身就能防XSS，搞得我很困惑。下面是我现在的写法：

const UserProfile = ({ user }) => {
  return (
    <div>
      <h2>{user.name}</h2>
      <p dangerouslySetInnerHTML={{ __html: user.bio }} />
    </div>
  );
};

这里用了dangerouslySetInnerHTML，是不是只要用户bio里带了<script>标签就会被执行？该怎么改才安全？

安全审计

我来解答赞 3 收藏

反馈

2 条解答

令狐博泽 Lv1

你要小心了，用 dangerouslySetInnerHTML 这种方式确实存在很大的XSS风险，特别是当 user.bio 包含用户输入的内容时。你提到的 DOMPurify 是一个很好的工具，可以用来清理HTML，移除潜在的恶意脚本。

首先，不要使用 dangerouslySetInnerHTML 来直接渲染用户输入的内容，除非你真的需要解析HTML，并且确保内容已经通过了严格的净化处理。对于你这种情况，可以直接渲染文本内容而不解析HTML，这样是最安全的做法。

你可以这样做：

const UserProfile = ({ user }) => {

  return (

    <div>

      <h2>{user.name}</h2>

      <p>{user.bio}</p>

    </div>

  );

};

这样，user.bio 中的任何HTML标签都会被当作普通文本显示，不会被执行。

如果你确实需要解析HTML（比如允许用户输入一些简单的格式化标签），那么一定要记得使用 DOMPurify 或类似的库来清理内容：

import DOMPurify from 'dompurify';



const UserProfile = ({ user }) => {

  const cleanBio = DOMPurify.sanitize(user.bio);



  return (

    <div>

      <h2>{user.name}</h2>

      <p dangerouslySetInnerHTML={{ __html: cleanBio }} />

    </div>

  );

};

记住，即使使用了 DOMPurify，也要定期检查其更新，确保它能够防御最新的XSS攻击手段。还要定期进行安全审计，检查是否有新的安全漏洞。要做校验，确保所有的用户输入都被正确处理了。

2026-03-22 17:12

Mc.梓童 Lv1

你说的情况确实存在XSS风险，特别是你用了dangerouslySetInnerHTML这个属性。这个方法会直接把字符串解析成HTML渲染，所以如果用户在bio里插入了恶意脚本，比如，那就会被执行。

React的JSX本身默认会转义用户输入，防止XSS，但dangerouslySetInnerHTML是个例外，它会绕过这种保护机制。

你可以考虑以下几种解决方案：

1. 移除dangerouslySetInnerHTML: 如果可能，尽量避免使用dangerouslySetInnerHTML。如果你只是想渲染一些简单的HTML标签，可以考虑使用一个安全的富文本编辑器或者库，这些库通常会有内置的清理机制。

2. 使用DOMPurify: 如果确实需要渲染富文本内容，DOMPurify是个不错的选择。它能帮你清理掉大部分潜在危险的HTML标签和属性。你已经在尝试了，但确保你正确配置了DOMPurify，比如允许的标签和属性。下面是一个简单的例子：

import DOMPurify from 'dompurify';



const UserProfile = ({ user }) => {

  const cleanBio = DOMPurify.sanitize(user.bio);

  return (

    

      {user.name}


      

    


  );

};

3. 服务端验证: 不要只依赖前端的防护，服务端也应该对输入进行验证和清理。确保任何用户提交的数据在保存到数据库之前经过严格的检查。

总之，尽量避免直接渲染未经处理的HTML内容，使用安全的库，并且在服务端也做相应的处理。这样才能更好地防范XSS攻击。

2026-03-22 12:02