Nginx 配置了安全头，但前端 React 应用还是被 XSS 攻击了怎么办？

Des.云霞提问于 2026-03-07 21:12:18 阅读 32

工具

我在 Nginx 里加了 Content-Security-Policy、X-Frame-Options 这些安全头，但线上 React 应用还是收到了 XSS 报警。是不是我配置错了？或者前端代码本身也有问题？

这是我的一个组件，用户输入直接渲染了：

function Comment({ content }) {
  return (
    <div
      dangerouslySetInnerHTML={{ __html: content }}
    />
  );
}

现在很慌，不知道该从 Nginx 层面再加固，还是必须改前端逻辑？

安全加固

我来解答赞 5 收藏

反馈

2 条解答

❤英歌 Lv1

这个问题涉及到前后端的安全配置，需要仔细排查。首先，Nginx 的配置虽然提供了额外的安全层，但不能完全防止所有类型的 XSS 攻击。特别是你提到的 dangerouslySetInnerHTML，这本身就是个高风险操作，因为它会直接将用户输入作为 HTML 渲染出来，而没有经过任何处理或转义。

前端部分

1. 避免使用 dangerouslySetInnerHTML:
- 直接使用 dangerouslySetInnerHTML 是导致 XSS 的主要原因。尽量避免这种做法，除非你绝对确定输入是安全的，并且已经进行了严格的验证和清理。
- 具体来说，如果你必须显示富文本，可以考虑使用一个安全的富文本库，比如 DOMPurify。这个库可以帮助你过滤掉恶意代码。

2. 使用 DOMPurify 示例:
- 首先安装 DOMPurify：

npm install dompurify

- 然后在你的组件中使用它：

import DOMPurify from 'dompurify';



     function Comment({ content }) {

       // 使用 DOMPurify 清理用户输入的 HTML 内容

       const cleanContent = DOMPurify.sanitize(content);



       return (

         
           dangerouslySetInnerHTML={{ __html: cleanContent }}

         />

       );

     }

- 这样做可以显著减少 XSS 风险，因为它会移除大部分潜在的恶意脚本。

后端部分

1. 输入验证和清理:
- 确保所有用户输入在到达前端之前都经过了严格的验证和清理。这包括检查输入的格式、长度、类型等，并移除任何可能的危险字符或标签。

2. 输出编码:
- 在将数据发送到前端之前，确保所有输出都被正确编码。具体来说，HTML 编码可以防止大多数 XSS 攻击。
- 具体来说，对于字符串中的特殊字符（如 <, >, & 等），进行相应的编码处理。

Nginx 配置

1. Content-Security-Policy (CSP):
- 确保你的 CSP 头配置得当。例如，限制脚本来源只允许来自可信的域名。
- 具体来说，可以这样设置：

add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://trusted.cdn.com;";

- 这个配置表示默认情况下只允许加载当前域名下的资源，而脚本只能来自当前域名或 https://trusted.cdn.com。

2. 其他安全头:
- X-Frame-Options 已经配置好了，确保没有被覆盖。还可以考虑增加 X-XSS-Protection 和 X-Content-Type-Options 头来提供额外的保护。
- 具体来说：

add_header X-Frame-Options SAMEORIGIN;

     add_header X-XSS-Protection "1; mode=block";

     add_header X-Content-Type-Options nosniff;

总结起来，解决这个问题的关键在于前端的输入处理和 Nginx 的安全头配置。前端需要严格验证和清理用户输入，避免直接使用 dangerouslySetInnerHTML。Nginx 的安全头则可以提供额外的防护层，减少攻击面。希望这些建议能帮助你解决问题。

2026-03-22 15:02

设计师利利 Lv1

老哥你这个dangerouslySetInnerHTML就是在玩火啊！Nginx配置安全头确实有用，但碰到这种直接渲染HTML的代码就是防不住。

给你几个必须立刻改的点：

第一，前端必须做内容消毒，用DOMPurify这种库：

import DOMPurify from 'dompurify';



function Comment({ content }) {

  return (

    <div

      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }}

    />

  );

}

第二，性能上DOMPurify比正则过滤靠谱得多，它专门处理各种XSS变种攻击。同时Nginx的CSP可以再加条default-src 'self'，双重防护。

第三，长期方案是重构代码，能不使用dangerouslySetInnerHTML就别用。React本身已经帮你做了大部分XSS防护，自己手动渲染HTML就是开倒车。

2026-03-07 21:14