iframe 嵌入检测

页面能否被嵌入由什么决定？

快速决策：响应头配置

如果你是站点所有者，可通过响应头直接控制页面是否允许被嵌入。

提示：X-Frame-Options 已被 CSP frame-ancestors 取代，两者同时存在时以 CSP 为准；建议优先使用 frame-ancestors。

服务端如何检测请求来自 iframe？

• Sec-Fetch-Dest: document — 顶层页面导航，不在任何 frame 内。
• Sec-Fetch-Dest: iframe — 请求由 <iframe> 元素加载。
• Sec-Fetch-Dest: frame — 由旧式 <frame>（frameset）加载。
• Sec-Fetch-Dest: embed / object — 由 <embed> 或 <object> 元素加载。

服务端禁止 iframe 嵌入配置示例

以下展示如何在常见服务端 / 框架中配置完全禁止 iframe 嵌入（X-Frame-Options: DENY + CSP frame-ancestors 'none'），是上文快速决策中最严格的一种方案，可直接复制使用。

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

如果不是要完全禁止，只是想放行自己站点或少量可信来源，把 DENY 换成 SAMEORIGIN、'none' 换成 'self' 或具体的来源列表即可，其余配置方式不变。

常见平台踏坑表

除了通用的响应头规则，一些知名平台还有各自的特殊限制，不要只凭响应头就假定「可嵌入」或「禁止嵌入」。

常见使用场景

• 在动手写集成代码前，先确认第三方小组件、仪表盘或文档能否嵌入自己的产品。
• 验证自己的站点是否按预期下发了 X-Frame-Options 或 CSP frame-ancestors 策略。
• 排查点击劫持（clickjacking）防护：弄清页面为何在 iframe 中显示空白或拒绝加载。
• 做内容聚合、门户集成时批量筛查候选 URL，并通过会话历史随时回看检测结果。
• 在安全评审或渗透测试前，记录外部依赖的框架嵌套策略作为佐证材料。

常见问题