本文汇总了iframe集成模板常见的报错及解决方案，帮助与指导用户快速找到想要的答案。

问题描述：

通过 iframe 内嵌报表链接到应用内报错，报错信息如下所示：

Refused to display 'http://localhost:8080/webroot/decision/view/report?XXXXXXX'  in a frame because it set 'X-Frame-Options' to 'sameorigin'

原因分析：

X-Frame-Options 响应头是用来给浏览器指示是否允许一个页面在 <frame>, <iframe>, <embed> 或者 <object> 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免 clickjacking 攻击。

X-Frame-Options 有三个可能的值：

deny：表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。

sameorigin：表示该页面可以在相同域名页面的 frame 中展示。

allow-from uri：表示该页面可以在指定来源的 frame 中展示。

以上报错是因为X-Frame-Options 响应头的值为sameorigin，而嵌入的地址并非相同域名，导致无法正常展现。

解决方案：

登录决策系统，在「管理系统>安全管理>Security Headers>高级设置」，关闭「点击劫持攻击防护」。如下图所示：

注：若方案不生效，那说明可能在Apache、nginx、IIS、HAProxy、Express中设置了 HTTP 头 X-Frame-Options，需要检查相关配置文件。

问题描述：

https页面嵌入http地址报错：This request has been blocked; the content must be served over HTTPS。

原因分析：

HTTPS 是 HTTP over Secure Socket Layer，以安全为目标的 HTTP 通道，所以在 HTTPS 承载的页面上不允许出现 http 请求，因此需要将加载的http请求替换成https请求，才能正常显示。

解决方案：

方法一：

将 http 页面配置 ssl 证书实现 https 访问，参考文档：配置SSL证书实现HTTPS访问，Nginx，Apache，IIS都能做，但不是很方便，如果没有现成可用的https地址可用，建议使用方法二。

方法二：

注：只适用静态资源的加载，比如加载某一个静态图片。如果是决策平台或者报表嵌入到https的页面，这两个加载的时候，都不是一个静态资源的请求，嵌入到https页面的话，需要用方法一。

upgrade-insecure-requests CSP 指令的作用就是让浏览器自动升级请求，防止访问者访问不安全的内容。

在iframe所在页面（一般是html、jsp）的head中加入 meta 头即可：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

例如在 jsp 页面的 head 部分增加 meta 头：

问题描述：

iframe 跨域访问报错：Uncaught DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame

原因分析：

iframe 跨域访问时，如果访问了被嵌入的界面中的 dom 信息，则会出现该报错。

解决方案：

需要根据实际场景来寻找最合适的跨域解决办法，常用的是 postMessage()，可参考：跨域调用 JS