目录:
概述编辑
本文汇总了iframe嵌入模板常见的问题及解决方案,帮助与指导用户快速找到想要的答案。
--- iframe集成模板相关报错 ---编辑
X-Frame-Options相关报错编辑
问题描述:
通过 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,需要检查相关配置文件。
报错:This request has been blocked; the content must be served over HTTPS编辑
问题描述:
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 头:
Uncaught DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame编辑
问题描述:
iframe 跨域访问报错:Uncaught DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame
原因分析:
iframe 跨域访问时,如果访问了被嵌入的界面中的 dom 信息,则会出现该报错。
解决方案:
需要根据实际场景来寻找最合适的跨域解决办法,常用的是 postMessage(),可参考:跨域调用 JS