关于Mendix应用中通过iframe嵌入页面的问题
颂文Gavin
2022.01.04 13:42发布于技术 - 前端与UI
2420
iframe发现出现有的页面无法显示 或 显示 “refused to connect”。本文主要描述相应的解决方案。

需求、方法与问题

前期在部分项目上,遇到一个需求:在Mendix开发应用内嵌入原有旧系统或网站的页面。

从最简单快速的实现方式出发,脑子里的第一想法就是iframe嵌入。

App Store上有一个widget:Iframe(https://marketplace.mendix.com/link/component/21)

但是在运行验证时,发现出现有的页面无法显示 或 显示 “refused to connect”。本文主要描述相应的解决方案。

WX20220104-134216@2x.png

iframe03.png

原因分析

主要原因是因为同源策略的限制,为了安全起见,iframe内的页面从协议、域名和端口等都会受到诸多限制。

在这里体现在HTTP响应报头中的X-Frame-Options

iframe04.png

X-Frame-OptionsHTTP 响应报头可以被用来指示一个浏览器是否应该被允许在一个以呈现页面<frame>,<iframe><object>。通过确保其内容未嵌入其他网站,网站可以使用此功能来避免 点击劫持 攻击。

X-Frame-Options有三种可能的指示:

X-Frame-Options: DENY 
X-Frame-Options: SAMEORIGIN 
X-Frame-Options: ALLOW-FROM <https://example.com/>

如果指定DENY,从其他站点加载时,不仅尝试在框架中加载页面失败,从同一站点加载时尝试这样做将失败。另一方面,如果指定SAMEORIGIN,只要包含在框架中的站点与为页面提供服务的站点相同,仍然可以在框架中使用该页面。

DENY无论站点尝试这样做,页面都不能显示在框架中。SAMEORIGIN该页面只能显示在与页面本身相同的源框架中。ALLOW-FROM_ uri_页面只能显示在指定原点的框架中。

解决方案

在生产部署中,此header将由Web服务器(如Nginx或IIS)添加。 默认情况下Studio Pro本地运行时没法手工改这个玩意儿。

在部署环境中,如果是Mendix Cloud,这可以在Mendix Developer Portal中完成。

在部署环境中,如果是On-Premise或者私有云,针对Apache或nginx或IIS,可以参考下述:

配置 Apache

要配置 Apache X-Frame-Options为所有页面发送标题,请将其添加到您网站的配置中:

Header always append X-Frame-Options SAMEORIGIN

要配置 Apache 来设置X-Frame-Options拒绝,请将其添加到您网站的配置中:

Header set X-Frame-Options DENY

要配置 Apache 以将其设置X-Frame-Options为ALLOW-FROM特定主机,请将其添加到您网站的配置中:

Header set X-Frame-Options "ALLOW-FROM <https://example.com/>"

配置 nginx

要配置 nginx 发送X-Frame-Options头文件,请将其添加到您的 http,服务器或位置配置中:

add_header X-Frame-Options SAMEORIGIN;


配置 IIS

要配置 IIS 发送X-Frame-Options标题,请添加此站点的Web.config文件:

<system.webServer> 
   ...
   <httpProtocol> 
      <customHeaders> 
         <add name="X-Frame-Options" value="SAMEORIGIN" /> 
      </customHeaders> 
   </httpProtocol>
   ... 
</system.webServer>


延申思考

由于iframe是个过时技术且不够安全,阻塞页面加载,带来跨域攻击风险等。如果可以建议使用其他系统集成方式。

Code_Dove、收费的阳光
点赞
收藏
手机查看
举报
0个评论
倒序看帖
仅看楼主

暂无数据