如何处理JS中X-Frame-Options设为sameorigin的嵌入错误？

这个问题确实挺头疼的——window.onerror确实抓不到这类安全限制错误，因为浏览器出于同源策略的安全考虑，不会把跨源框架的加载失败细节暴露给父页面的全局错误处理器。不过我们有几个可靠的方案来检测并自定义提示：

方案1：通过iframe的load事件+跨源访问检查 #

当X-Frame-Options阻止页面加载时，iframe其实会加载一个空白的跨源文档，load事件仍然会触发，但尝试访问iframe的内容会抛出跨源错误。我们可以利用这一点来判断加载是否被阻止：

const targetIframe = document.getElementById('target-iframe');

// 监听iframe的加载完成事件
targetIframe.addEventListener('load', () => {
  try {
    // 尝试访问iframe的文档对象，触发跨源检查
    const iframeDoc = targetIframe.contentDocument || targetIframe.contentWindow.document;
    // 如果能执行到这里，说明加载成功，无需处理
    console.log('iframe加载正常');
  } catch (error) {
    // 捕获到跨源错误，基本可以判定是X-Frame-Options限制
    showCustomErrorMessage('抱歉，该页面不允许在框架中显示');
  }
});

// 自定义错误提示的函数
function showCustomErrorMessage(message) {
  // 隐藏原iframe
  targetIframe.style.display = 'none';
  // 创建自定义错误容器
  const errorContainer = document.createElement('div');
  errorContainer.textContent = message;
  errorContainer.style.padding = '2rem';
  errorContainer.style.backgroundColor = '#fff3e0';
  errorContainer.style.borderLeft = '4px solid #ff9800';
  errorContainer.style.color = '#e65100';
  // 把错误提示插入到iframe原本的位置
  targetIframe.parentNode.appendChild(errorContainer);
}

这个方法的核心逻辑是：正常加载的跨域iframe（允许嵌入的），父页面虽然不能访问其内容，但不会抛出错误；而被X-Frame-Options阻止的iframe，尝试访问其文档会直接抛出SecurityError，我们通过捕获这个错误来触发自定义提示。

方案2：结合性能API辅助判断 #

我们可以利用浏览器的performance.getEntries()来检查iframe的加载状态，作为方案1的补充验证：

targetIframe.addEventListener('load', () => {
  // 获取该iframe的加载性能条目
  const loadEntries = performance.getEntriesByName(targetIframe.src);
  if (loadEntries.length > 0) {
    const loadEntry = loadEntries[0];
    // 如果响应状态为0，或者最终加载的地址和目标地址不一致，大概率是被阻止了
    if (loadEntry.responseStatus === 0 || loadEntry.name !== targetIframe.src) {
      showCustomErrorMessage('该页面无法在当前页面中嵌入');
    }
  }
});

这个方法的可靠性稍逊于方案1，但可以作为额外的判断条件，减少误判的可能。

为什么window.onerror抓不到这个错误？ #

简单来说，这是浏览器的安全机制：这类由X-Frame-Options触发的加载限制属于跨源安全错误，浏览器会刻意隐藏这类错误的细节，避免泄露敏感信息，因此全局的window.onerror和window.addEventListener('error')都无法捕获到具体的错误内容。

内容的提问来源于stack exchange，提问作者Vahe Akhsakhalyan