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

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

工具

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

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

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

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

安全加固

我来解答赞 4 收藏

反馈

1 条解答

设计师利利 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