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，並透過會話記錄隨時回溯檢測結果。
• 於安全審查或滲透測試前，記錄外部元件的框架嵌套策略，作為佐證資料。

常見問題