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

司空露露提问于 2026-01-29 11:17:27 阅读 240

安全

我在开发一个需要嵌入第三方表单的Vue应用，但安全扫描提示存在点击劫持风险。虽然设置了X-Frame-Options响应头，但测试时发现嵌套iframe的内容仍然可以被透明覆盖。这是怎么回事？

我尝试在Vue组件里这样嵌入表单：


<template>
  <div class="form-container">
    <iframe 
      src="https://thirdparty.com/form" 
      width="100%" 
      height="500"
      sandbox="allow-forms">
    </iframe>
  </div>
</template>

但用透明div覆盖iframe区域后，点击事件居然能穿透触发表单按钮。除了依赖后端设置X-Frame-Options，前端还有哪些防护手段？为什么我的sandbox配置没起作用？

我来解答赞 8 收藏

反馈

1 条解答

UP主～子辰 Lv1

属性没配全，光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。

2026-01-30 21:08