React 项目如何防止被嵌入 iframe 导致点击劫持？

IT人爱静提问于 2026-03-13 19:28:20 阅读 5

安全

我最近在做公司后台系统，用的是 React，担心被人用 iframe 嵌套我们的页面搞点击劫持。听说可以通过设置 X-Frame-Options 或 Content-Security-Policy 来防护，但我在前端代码里加了好像没生效？

我在 App.js 里尝试用 useEffect 加了个 meta 标签，但控制台报错说无效，而且页面还是能被别人用 iframe 嵌入。是不是这种防护只能在后端设置？前端能做点啥吗？

useEffect(() => {
  const meta = document.createElement('meta');
  meta.httpEquiv = 'Content-Security-Policy';
  meta.content = "frame-ancestors 'self'";
  document.head.appendChild(meta);
  return () => document.head.removeChild(meta);
}, []);

我来解答赞 2 收藏

反馈

1 条解答

百里怡然 Lv1

你这段代码没生效是正常的，因为这俩都是 HTTP 响应头，不是通过 meta 标签能设置的。浏览器在解析页面之前就已经处理这些头了，你动态挂载 meta 标签根本来不及。

我之前踩过这个坑，后来搞清楚了：

后端设置是必须的。X-Frame-Options 和 CSP 的 frame-ancestors 都得在服务器响应时加上响应头，前端改不了。所以你们后端配置 nginx 或者后端代码里一定要加：

nginx 的话：
add_header X-Frame-Options "SAMEORIGIN";
add_header Content-Security-Policy "frame-ancestors 'self'";

后端语言的话也都有对应的方式设置响应头。

前端能做的事：虽然不能彻底解决，但可以加个检测脚本，被嵌入时给用户提个醒，或者直接跳转到顶级窗口。我之前项目里这么干的：

useEffect(() => {

  if (window.self !== window.top) {

    // 被嵌入了，可以选择提示或者强制跳出来

    window.top.location = window.self.location;

    // 或者只显示警告

    document.body.innerHTML = '请勿将本系统嵌入其他网站
';

  }

}, []);

不过得说句实话，这种前端方案防君子防不住小人，技术流可以直接把这个检测代码给你干失效。真正的防护还是得靠后端设置响应头，前端这个算是个双保险和用户体验层面的保护。

2026-03-13 20:01