iframe嵌入ncase.me页面无法展示全部交互元素该如何解决？

• 目标站点配置了跨域嵌入安全限制：响应头包含X-Frame-Options: SAMEORIGIN/DENY，或者Content-Security-Policy中frame-ancestors字段仅允许同域名嵌入，浏览器会直接拦截第三方站点iframe加载该页面的所有脚本和交互资源。
• 可正常嵌入的公共服务类iframe（如谷歌地图）是官方主动放开了嵌入限制，和当前目标站点的安全策略不同。

方案1：申请白名单 #

联系目标站点运营方，说明使用场景，申请将你的域名添加到站点嵌入白名单中，对方调整安全策略后即可正常嵌入。

方案2：服务端反向代理 #

在你的业务服务端配置反向代理，中转目标站点的资源请求：

1. 新增代理路径映射到目标页面地址
2. 代理转发时移除响应头中的X-Frame-Options字段，以及Content-Security-Policy中与嵌入限制相关的规则
3. 调整iframe的src为你的代理路径，参考代码如下：

<iframe 
    style="width: 600px; height:370px;"
    scrolling="no"
    class="simulation"
    src="你的代理路径?mode=0"
>
</iframe>

提示：使用反向代理前需确认资源使用符合目标站点的版权要求，避免侵权。

方案3：私有化部署资源 #

如果该项目为开源项目，可下载目标页面的全部静态资源后部署到你的自有域名下，同源场景下不存在嵌入限制，可完整加载所有交互元素。

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