Vue项目嵌套第三方iframe时如何防止点击劫持？

你这个问题其实踩了两个坑：一个是混淆了 X-Frame-Options 的作用方向，另一个是误以为 sandbox 属性能防点击劫持——它其实主要防的是脚本和导航行为，不是防透明覆盖。

先说重点：X-Frame-Options 是由被嵌入的页面的服务器设置的响应头，不是你嵌入它的那个 Vue 项目设置的。你项目里加这个头完全没用，除非第三方表单的服务器配合你设置 X-Frame-Options: DENY 或 SAMEORIGIN。但现实是，大多数第三方服务根本不会为你的嵌入场景专门调整这个头，尤其像支付、表单、登录这类 SaaS 服务，它们默认可能允许任意来源嵌入（比如他们可能只设 ALLOW-FROM https://yourdomain.com，但老浏览器根本不支持这个值）。

再看 sandbox，它确实能限制 iframe 内的行为，比如 allow-scripts 会允许脚本执行，allow-same-origin 会让内容不被视为跨域，但它不阻止跨域 iframe 被父页面用绝对定位覆盖。你那个透明 div 能点穿，是因为 iframe 的内容是跨域的，浏览器不会阻止你在 iframe 上方叠一个 pointer-events: none 的覆盖层——等于是把整个 iframe 当作一个“图片”来用，只是这个图片里有交互元素。

真正有效的前端防护，目前只有两个靠谱方案，而且得配合用：

第一个是用 Content-Security-Policy 的 frame-ancestors 指令（虽然它本质也是响应头，但可以前端用 meta 模拟部分场景——不过对跨域 iframe 无效，这里先不展开）。

第二个是前端强制阻止 iframe 被覆盖：利用 iframe 加载完成后，向其注入一段脚本，检测自身是否被其他元素覆盖，一旦检测到就立即跳转到安全页或置灰。但因为是跨域，你无法直接操作 iframe 内 DOM，所以得靠第三方服务配合，或者用 postMessage 做双向通信——可惜大多数第三方表单服务不会给你留这个口子。

所以现实中最可行的方案是：

1. 用 sandbox + 同源代理 iframe + 安全覆盖层组合拳

思路是：不要直接嵌第三方表单 URL，而是让前端先请求你自己的后端接口，后端作为中间人去拉取第三方表单内容，再包装成一个同源页面（比如返回一个 HTML 字符串，里面用 iframe src="https://thirdparty.com/form"，但这个 iframe 是同源的），这样你就能在返回的 HTML 里加 CSP、加防覆盖脚本。

但如果你不想改后端，或者第三方服务压根不让你代理，那就只能用纯前端兜底方案：

2. 用 “防点击劫持的覆盖层” + “动态监听 pointer-events”

核心思路：在 iframe 外面再套一层容器，用绝对定位铺满 iframe 区域，然后通过 CSS 和 JS 控制这个覆盖层的显示/隐藏逻辑——不是透明的，而是半透明遮罩，且默认禁止点击，只有在你确认安全时才移除遮罩。

示例代码：

<template>

  <div class="form-wrapper">

    <div ref="iframeContainer" class="iframe-container">

      <iframe

        ref="formIframe"

        :src="formUrl"

        width="100%"

        height="500"

        sandbox="allow-forms allow-scripts allow-same-origin allow-popups"

        @load="onIframeLoad"

      ></iframe>

      <!-- 安全遮罩层：默认显示，阻止点击 -->

      <div

        v-if="showSecurityMask"

        class="security-mask"

        @click="handleMaskClick"

      >

        <p class="mask-text">点击此处加载外部表单（安全验证中）</p>

      </div>

    </div>

  </div>

</template>



<script>

export default {

  data() {

    return {

      formUrl: 'https://thirdparty.com/form',

      showSecurityMask: true,

      iframeLoaded: false

    }

  },

  methods: {

    onIframeLoad() {

      this.iframeLoaded = true

      // 加载完成后，延迟一小会儿再考虑移除遮罩（避免立即点穿）

      setTimeout(() => {

        // 实际项目里这里可以加更严格的验证逻辑，比如检查 iframe 内容是否白名单

        console.log('iframe 已加载，但建议仍保留遮罩直到用户显式触发')

      }, 500)

    },

    handleMaskClick() {

      if (!this.iframeLoaded) {

        alert('表单尚未加载完成，请稍后再试')

        return

      }

      // 用户确认后才移除遮罩

      this.showSecurityMask = false

      // 可选：记录审计日志

      console.log('用户已确认加载外部表单')

    }

  }

}

</script>



<style scoped>

.iframe-container {

  position: relative;

  overflow: hidden;

}

.security-mask {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.9);

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

}

.mask-text {

  padding: 1rem;

  background: #f0f0f0;

  border-radius: 4px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}

</style>

这个方案的原理是：利用 CSS 的 z-index 和 pointer-events 默认行为，把 iframe 当作普通内容区域，用显式遮罩强制用户交互确认。哪怕你试图用透明 div 覆盖，也会被这个更高优先级的遮罩挡住。

另外需要注意几个细节：

- sandbox 属性里不要加 allow-pointer-lock 和 allow-popups（除非必要），但表单类服务一般需要 allow-scripts 和 allow-same-origin 才能正常运行，否则很多表单脚本会直接报错
- 如果第三方服务强制用 window.top 跳转（比如点击后跳到父页面），你可以加 allow-top-navigation，但这会降低安全性，建议配合白名单域名判断
- 真正想防住点击劫持，还得配合 CSP 的 frame-ancestors 'none' 或白名单，但这同样需要你控制 iframe 的源页面（比如用同源代理）

最后说个现实情况：很多第三方服务（比如微信支付、支付宝、阿里云表单）其实自己已经做了防点击劫持，它们会在 iframe 里用 JS 检测 window !== window.top，如果发现被嵌套就拒绝渲染。你遇到的这个能被点穿的，大概率是没做这个检查，或者只做了基础检查（比如只判断了 document.referrer）。

建议你先用浏览器开发者工具看看那个第三方表单页面在 iframe 里运行时，有没有抛安全相关的错误。如果它自己有防护，你前端再加遮罩就是双保险；如果没有，就只能靠前端兜底了。

属性没配全，光allow-forms不够。加这个：sandbox="allow-same-origin allow-scripts allow-forms"。另外给iframe加个style="pointer-events: none;"防止点击穿透，就这样。

<template>

  <div class="form-container">

    <iframe 

      src="https://thirdparty.com/form" 

      width="100%" 

      height="500"

      sandbox="allow-same-origin allow-scripts allow-forms"

      style="pointer-events: none;">

    </iframe>

  </div>

</template>

如果透明层还在，去掉它或者调整z-index。