前端判断一个网页是否允许被 iframe 内嵌

前端不能 100% 准确提前判断一个网页是否允许被 iframe 内嵌，因为决定权主要在目标网站返回的 HTTP 响应头里，而普通前端 JS 通常读不到跨域页面的响应头。

核心判断看这两个东西：

#1.****X-Frame-Options

老一点但仍常见。

复制X-Frame-Options: DENY

表示完全不允许被 iframe 嵌入。

复制X-Frame-Options: SAMEORIGIN

表示只允许同源页面 iframe 嵌入。

复制X-Frame-Options: ALLOW-FROM ...

以前有这个，但现代浏览器支持很差，基本不建议依赖。

#2.****Content-Security-Policy: frame-ancestors

现在更推荐看这个。

复制Content-Security-Policy: frame-ancestors 'none'

表示不允许任何页面嵌入。

复制Content-Security-Policy: frame-ancestors 'self'

表示只允许同源嵌入。

复制Content-Security-Policy: frame-ancestors https://example.com

表示只允许指定域名嵌入。

如果目标网站有：

复制Content-Security-Policy: frame-ancestors 'none'

那你页面里这样写也没用：

复制<iframe src="https://target.com"></iframe>

浏览器会直接拦截。

#前端怎么判断？

#方式一：直接尝试加载 iframe

复制<iframe id="testFrame" src="https://example.com"></iframe>

复制const iframe = document.getElementById('testFrame')

iframe.onload = () => {
  console.log('iframe 触发了 load')
}

iframe.onerror = () => {
  console.log('iframe 加载失败')
}

但这个方式不可靠。

因为：

复制iframe.onload

有时候即使页面被浏览器拦截，也可能触发；有些情况不会触发；跨域情况下你也不能读取 iframe 内部内容。

比如下面这样会报错：

复制iframe.contentWindow.document

跨域时会被浏览器拦截：

复制Uncaught DOMException: Blocked a frame with origin ...

所以只能粗略判断，不能精确判断。

#更靠谱的方式：后端请求目标页面，看响应头

比如你的后端去请求目标 URL：

复制const res = await fetch('https://example.com')

console.log(res.headers.get('x-frame-options'))
console.log(res.headers.get('content-security-policy'))

然后根据响应头判断。

伪代码：

复制function canEmbed(headers, currentOrigin) {
  const xfo = headers['x-frame-options']
  const csp = headers['content-security-policy']

  if (csp?.includes("frame-ancestors 'none'")) {
    return false
  }

  if (xfo === 'DENY') {
    return false
  }

  if (xfo === 'SAMEORIGIN') {
    return false // 除非目标网页和你当前网页同源
  }

  return true
}

实际要严谨解析会复杂一些，尤其是 CSP 里可能有多个域名、通配符、协议限制等。

#为什么不能纯前端直接 fetch 判断？

你可能会想：

复制fetch('https://example.com')

然后读响应头。

但大多数跨域网站不会给你开放 CORS，所以前端会报错：

复制Access to fetch at ... from origin ... has been blocked by CORS policy

即使目标网页真实存在，你也读不到它的 headers。

所以：

复制fetch(url)

在浏览器前端里不能作为通用判断方案。

#推荐方案

如果你是在做一个「输入 URL，然后判断能不能 iframe 嵌入」的功能，推荐架构是：

复制前端输入 URL
   ↓
请求你自己的后端接口
   ↓
后端请求目标 URL
   ↓
后端读取响应头
   ↓
后端返回 canEmbed: true / false / unknown
   ↓
前端决定是否展示 iframe

后端判断时主要检查：

复制X-Frame-Options
Content-Security-Policy: frame-ancestors

#前端可做的兜底方案

前端可以先展示一个 iframe，如果加载失败或被拦截，就给用户提示：

复制<iframe
  src="https://example.com"
  sandbox="allow-scripts allow-same-origin"
></iframe>

再提示：

复制该网页可能禁止被 iframe 嵌入，请在新窗口打开。

然后提供备用链接：

复制<a href="https://example.com" target="_blank">在新窗口打开</a>

#总结

前端判断 iframe 是否允许嵌入，大概是这样：

复制纯前端：不能可靠判断，只能尝试加载 iframe
后端辅助：可以读取响应头，判断更准确
核心响应头：X-Frame-Options、Content-Security-Policy frame-ancestors
最终仍以浏览器实际拦截结果为准

最实用的方案是：后端检测响应头 + 前端 iframe 兜底展示 + 失败时提供新窗口打开。