如何检测iframe中的网站是否存在同源策略限制？

你遇到的这类阻止iframe嵌入的情况，大多是目标网站通过X-Frame-Options响应头或者CSP（内容安全策略）中的frame-ancestors指令实现的，而非直接的同源策略限制（同源策略主要限制跨域脚本访问，而非嵌入本身）。以下是几种可行的检测方法：

1. 监听iframe的加载状态 #

通过监听iframe的load和error事件，结合超时判断，可初步识别是否被阻止嵌入：

const iframe = document.createElement('iframe');
iframe.src = 'https://目标域名.com';
iframe.style.display = 'none';
document.body.appendChild(iframe);

let isLoaded = false;

// 正常加载触发
iframe.addEventListener('load', () => {
  isLoaded = true;
  console.log('该网站可正常嵌入iframe');
});

// 加载失败触发
iframe.addEventListener('error', () => {
  if (!isLoaded) {
    console.log('网站可能被限制嵌入（如X-Frame-Options/CSP规则）');
  }
});

// 超时兜底，避免网络延迟误判
setTimeout(() => {
  if (!isLoaded) {
    console.log('加载超时，大概率存在嵌入限制或网络故障');
  }
}, 10000);

2. 检查目标网站的响应头 #

直接请求目标网站的资源，查看响应头中的嵌入限制规则：

fetch('https://目标域名.com', { method: 'HEAD' })
  .then(res => {
    // 检查X-Frame-Options头
    const xFrameOpt = res.headers.get('X-Frame-Options');
    if (xFrameOpt === 'DENY' || xFrameOpt === 'SAMEORIGIN') {
      console.log('网站通过X-Frame-Options阻止跨域嵌入');
    }

    // 检查CSP的frame-ancestors指令
    const cspHeader = res.headers.get('Content-Security-Policy');
    if (cspHeader) {
      const frameRule = cspHeader.match(/frame-ancestors\s+([^;]+)/);
      if (frameRule) {
        const allowedOrigins = frameRule[1].split(/\s+/);
        if (!allowedOrigins.includes('*') && !allowedOrigins.includes(window.location.origin)) {
          console.log('CSP规则限制了该网站的嵌入范围');
        }
      }
    }
  })
  .catch(err => {
    console.log('无法获取响应头，可能存在跨域CORS限制');
  });

注意：这种方法可能因目标网站的CORS策略限制，无法获取到完整响应头，此时只能依赖第一种方法。

额外提示 #

浏览器在阻止iframe嵌入时，会在控制台输出明确的错误信息（比如Refused to display 'xxx' in a frame because it set 'X-Frame-Options' to 'DENY'），开发环境下可以直接查看控制台确认原因，但这种方式不适用于生产环境的自动检测。

内容的提问来源于stack exchange，提问作者Slender Tech