如何将BigCommerce网站嵌入iframe及无法嵌入时的处理方案

1. 是否可以直接在iframe中嵌入任意外部网站？ #

• 不可以。外部站点是否允许被iframe嵌入完全由对方的服务端配置决定：绝大多数商用站点（包括示例中的亚马逊、默认配置的BigCommerce站点）都会配置X-Frame-Options响应头为DENY/SAMEORIGIN，或是通过CSP规则的frame-ancestors指令限制可嵌入的域名白名单。只有对方站点主动将你的域名加入允许嵌入的白名单，你才能正常在iframe中加载对方的页面，否则浏览器会直接拦截加载请求。

2. 目标网站禁止被iframe加载时，是否可以配置自定义展示内容？ #

• 可以实现，但要注意：写在<iframe>标签内部的内容仅会在浏览器完全不支持iframe特性时展示，因安全策略被拦截加载的场景默认不会触发该内容，你需要配合JavaScript监听逻辑实现自定义提示：
  • 监听iframe的error事件，同时在load事件触发后判断跨域访问权限，若出现访问被拦截的情况，即可替换iframe区域为你预设的“该站点不允许嵌入”类提示内容。

基础iframe使用示例代码 #

<!DOCTYPE html>
<html>
<body>

<h1>iframe元素使用示例</h1>

<iframe src="https://www.amazon.com" title="亚马逊在线购物网站">
<!-- 以下为浏览器不支持iframe时的降级提示 -->
<p>当前浏览器不支持iframe功能，无法展示该内容</p>
</iframe>

</body>
</html>

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