前端低代码如何打破系统孤岛
内嵌方案千千万,有微前端qiankun、无界等,而iframe作为原生高效的方案,又能带来什么样的能力呢?
Iframe 定义
• 内联框架概念:
内联框架(Iframe)是一种 HTML 元素,用于在网页中嵌入另一个独立的HTML文档,允许在一个页面内显示多个相互独立的文档内容。
• 会话隔离特性:
Iframe 创建了一个沙盒环境,其内部的脚本和内容不会影响到外部页面,实现了不同文档间的会话隔离,增强了网页的安全性和稳定性。
• 跨域通信机制:
尽管 Iframe 内部的内容被限制在独立的环境中,但通过一些特定的技术和API,如 postMessage,可以实现父页面与子Iframe之间的跨域安全通信。


Iframe在移动端 Web 开发中的适用场景有哪些?
IFrame在移动端Web开发中的适用场景主要包括:
1. 微前端架构实现:IFrame可以用于构建微前端架构,即将大型单体应用拆分成多个独立的子应用,每个子应用可以使用不同的技术栈开发,并通过IFrame嵌入到主应用中,实现模块化和独立部署。
2. 多应用整合:在需要将多个独立的应用程序集成到一个统一的用户界面中时,IFrame可以用来嵌入这些应用,使用户可以在一个平台上访问不同来源的服务或内容。
3. 内容隔离:IFrame可以用于隔离不同来源的内容,确保主页面的风格和行为不会受到嵌入内容的影响,这在处理第三方内容或跨域问题时尤为有用。
4. 性能优化:尽管IFrame可能会引入额外的性能开销,但在某些情况下,通过异步加载或按需加载IFrame内容,可以优化页面的加载性能和用户体验。
5. 兼容性和维护:对于那些需要在多种设备和浏览器上保持一致表现的Web应用,IFrame可以帮助封装和标准化嵌入内容的显示方式,简化维护工作。
在使用IFrame时,开发者需要注意其可能带来的问题,如滚动条管理、样式冲突、性能影响等,并采取相应的解决措施。此外,随着Web技术的发展,现代前端框架和库提供了更多的组件化和模块化工具,因此在选择是否使用IFrame时,也应考虑这些替代方案。
Iframe 基本语法与属性
● src属性:指定要嵌入的文档的URL。
● sandbox属性:提供额外的安全限制,如阻止表单提交、脚本执行等。
| (no value) | 应用所有限制 |
| allow-forms | 允许表单提交 |
| allow-modals | 允许打开模式窗口 |
| allow-orientation-lock | 允许锁定屏幕方向 |
| allow-pointer-lock | 允许使用指针锁API |
| allow-popups | 允许弹出窗口 |
| allow-popups-to-escape-sandbox | 允许弹出窗口在不继承沙盒的情况下打开新窗口 |
| allow-presentation | 允许启动演示会话 |
| allow-same-origin | 允许将iframe内容视为来自同一来源 |
| allow-scripts | 允许运行脚本 |
| allow-top-navigation | 允许iframe内容浏览其顶级浏览上下文 |
| allow-top-navigation-by-user-activation | 允许iframe内容在其顶级浏览上下文中导航,但前提是由用户启动 |
<iframe src="demo_iframe_sandbox_form.htm"
sandbox="allow-forms"></iframe>
● scrolling属性:控制是否显示滚动条。
● frameborder属性:控制是否显示iframe的边框。
● 高度和宽度:自定义iframe的尺寸。
Iframe的应用场景和最佳实践
● 内容嵌入:嵌入第三方服务或内容,如社交媒体小部件、在线地图等。
● 页面布局:利用iframe创建复杂的页面布局结构。
● 跨域通信:使用window.postMessage方法实现不同域之间的安全通信。
● 安全隔离:加载潜在危险的内容时,使用iframe限制其对主页面的影响。
● 隐式登录: A系统登录,同时又要在访问B系统的时候直接访问,可以用iframe去做隐式登录。通过postMessage机制通知A系统,B已经登录完成了。
Iframe的兼容性和优化建议
● 兼容性:确保在不同浏览器中正常工作,特别是旧版浏览器的支持。
● 性能优化:合理使用iframe以避免不必要的资源加载和页面渲染阻塞。
● SEO考量:搜索引擎可能难以索引iframe中的内容,因此需要考虑内容的可见性和搜索引擎优化。
Iframe的安全性问题有哪些常见解决方案?
IFrame作为一种常用的网页嵌入技术,其安全性问题主要包括信息泄露、点击劫持、跨站脚本攻击(XSS)等。为了解决这些问题,开发者通常采取以下措施:
1.沙箱属性(Sandboxing):
通过设置<iframe sandbox>属性,可以限制嵌入内容的行为,如禁止表单提交、阻止脚本执行等,减少潜在的安全风险。
2.同源策略(Same-Origin Policy):
确保IFrame加载的内容与主页面同源,或者通过适当的跨域资源共享(CORS)配置来控制数据交换,防止未授权访问。
3.内容安全政策(Content Security Policy, CSP):
通过设置HTTP响应头中的CSP规则,限制网页可以加载和执行的资源类型,有效防范XSS攻击。
Content Security Policy (CSP) 是一种额外的安全措施,旨在检测和减少某些特定类型的攻击,包括跨站脚本(XSS)攻击。CSP 的核心作用是减少攻击者利用网站漏洞注入恶意脚本的机会。通过设置一系列策略规则,CSP允许网站管理员指定哪些资源可以加载和执行,限制了不可信内容的执行环境。
CSP 的主要机制包括:
限制脚本执行:CSP 可以禁止执行内联脚本和/或来自非白名单源的脚本,这样即使攻击者设法注入了恶意脚本,这些脚本也不会被执行。
报告违规行为:即使在严格的CSP策略下,一些脚本可能仍然尝试执行。CSP可以配置为向网站管理员报告这些违规尝试,帮助识别和解决安全问题。
指定资源来源:CSP 允许网站管理员详细指定哪些外部域可以提供样式表、脚本、图片等资源,减少了数据注入攻击的风险。
升级到更安全的协议:CSP 可以要求所有资源都通过HTTPS提供,以防止中间人攻击和确保数据的机密性和完整性。
通过实施CSP,网站可以显著提高抵御XSS攻击的能力,即使在现有代码中存在安全漏洞的情况下也能提供保护。CSP 是现代Web安全架构中的一个重要组成部分,有助于构建更为健壮的防御体系。
4.X-Frame-Options响应头:
X-Frame-Options是一个HTTP响应头,用于增加网页的安全性,特别是防止点击劫持(clickjacking)攻击。通过设置X-Frame-Options,网站管理员可以控制自己的网页是否可以被嵌入到<iframe>, <frame>, <embed>或<object>标签中。
这个也是有时网站无法被内嵌的主要原因。
X-Frame-Options有三个可能的值:
- DENY:页面不允许在任何框架中显示,即使是在相同的域中也不行。
- SAMEORIGIN:页面只能被与其相同源(协议、域名和端口)的页面嵌入。
- ALLOW-FROM uri:页面可以被指定的源嵌入,但这个选项已经被大多数现代浏览器弃用。
为了通过X-Frame-Options提高iframe的安全性,网站管理员应该在服务器配置中添加相应的响应头规则。例如,在Apache服务器中,可以在.htaccess文件或配置文件中使用Header set X-Frame-Options "DENY"或Header set X-Frame-Options "SAMEORIGIN"来设置。
在Nginx服务器中,可以在配置文件的server或location区块中通过add_header X-Frame-Options "DENY"或add_header X-Frame-Options "SAMEORIGIN"来实现。
需要注意的是,X-Frame-Options已经逐渐被Content-Security-Policy(CSP)的frame-ancestors指令取代,因为CSP提供了更细粒度的控制和更好的兼容性。然而,仍然有必要了解和实施X-Frame-Options,以便为那些不支持CSP的旧浏览器提供保护。
修改nginx配置,在对应的location下加入
举例,客户需要嵌套:
# 隐藏默认nginx配置的X-Frame-Options
proxy_hide_header X-Frame-Options;
# 添加相关域名 谷歌safari不生效, 有兼容问题 需要加协议,如http:// 可以加端口
add_header X-Frame-Options "ALLOW-FROM http://a.xxxx.com http://atest.xxxx.com:1888 http://bpoc.xxxx.com http://b.xxxx.com ";
# 添加CSP frame-ancestors 与 frame-src 不用加协议, 可以加端口
add_header Content-Security-Policy "frame-ancestors 'self' a.xxxx.com atest.xxxx.com:1888 bpoc.xxxx.com b.xxxx.com; frame-src 'self' a.xxxx.com atest.xxxx.com:1888 bpoc.xxxx.com b.xxxx.com";
## 报错1: 'X-Frame-Options' 错误

X-Frame-Options是一个HTTP标头(header),用来告诉浏览器这个网页是否可以放在iFrame内。例如:
这里需要设置nginx配置
###拓展
**X-Frame-Options: DENY**
告诉浏览器不要(DENY)把这个网页放在iFrame内,通常的目的就是要帮助用户对抗点击劫持。
**X-Frame-Options: SAMEORIGIN**
告诉浏览器只有当架设iFrame的网站与发出X-Frame-Options的网站相同,才能显示发出X-Frame-Options网页的内容。
**X-Frame-Options: ALLOW-FROM http://xxx.com/ **
告诉浏览器这个网页只能放在http://xxx.com// 网页架设的iFrame内。
## 报错2: Content Securty Policy 报错
内容安全策略(简称csp)用于检测并阻止网页加载非法资源的安全策略,可以减轻[xss](https://so.csdn.net/so/search?q=xss&spm=1001.2101.3001.7020)攻击带来的危害和数据注入等攻击。本文讲述的内容主要有如何使用csp和业务接入csp流程这两部分。

|指令 |说明 |
|:--|
|frame-ancestors |【csp2】定义当前页面可以被哪些页面使用ifram、object进行加载 |
|ame-src |【已废弃】定义iframe标签资源加载策略(新指令:child-src) |
谷歌浏览器不能使用 * 去通配域名
5.框架破坏(Frame Busting):
在主页面代码中加入JavaScript检测是否存在父框架,如果存在则跳出,以此来防止恶意网站将合法网站嵌入自己的框架中进行欺诈活动。
if(window.top!==window.self){
// window.top.location.href = window.location.href
// do something
}
6.更新和补丁管理:
定期更新Web应用程序及其依赖库,及时应用安全补丁,以防止利用已知漏洞进行攻击。
通过上述措施,可以显著提高使用IFrame技术的网页的安全性。开发者应根据具体场景选择合适的安全策略,并持续监控潜在的安全威胁。
根据上述的安全问题解决方式,如果有时页面无法被内嵌,可以看看是不是内嵌的网页做了什么操作,导致无法被内嵌。
如何在iframe间传递复杂数据类型?
在iframe间传递复杂数据类型通常涉及到跨文档通信的问题。由于同源策略的限制,直接在不同源的iframe之间传递数据可能会受到限制。为了解决这个问题,可以采用以下方法:
1.使用window.postMessage方法:
这是一个安全的方式来实现跨源通信。通过postMessage方法,可以向另一个窗口发送消息,无论这个窗口是否同源。接收消息的窗口可以监听message事件,并验证发送者的身份以及消息的完整性。这种方法可以传递JSON对象等复杂数据类型。
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
其他窗口的一个引用,比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message
将要发送到其他window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]
targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个URI。在发送消息的时候,如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值,那么消息就不会被发送;只有三者完全匹配,消息才会被发送。这个机制用来控制消息可以发送到哪些窗口;例如,当用postMessage传送密码时,这个参数就显得尤为重要,必须保证它的值与这条包含密码的信息的预期接受者的origin属性完全一致,来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
transfer 可选
是一串和message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。
白话概括一下:
otherWindow就是你想要哪个页面的接受消息,你就用哪个页面的window来发送消息
message就是你想发送的数据
targetOrigin通常来讲就是otherWindow所在的源,协议+域名+端口需要一致,才能接受到消息
transfer一般忽略
Demo
- A->B 发送消息
- popup是你当前window窗口重新弹窗的另一个window窗口
- 你想要对popup发送消息
- event.source 表示是哪个窗口发来的消息(Window)
/*
* A页面的域名是<http://example.com:8080>,以下是A页面的script标签下的代码:,
popup也可用iframe代替
*/
var popup = window.open(...popup details...);
// var iframeContent = document.getElementById('iframeId').contentWindow
// 如果弹出框没有被阻止且加载完成
// 这行语句没有发送信息出去,即使假设当前页面没有改变location(因为targetOrigin设置不对)
popup.postMessage("The user is 'bob' and the password is 'secret'",
"https://secure.example.net");
// 假设当前页面没有改变location,这条语句会成功添加message到发送队列中去(targetOrigin设置对了)
popup.postMessage("hello there!", "http://example.org");
// 接收
function receiveMessage(event)
{
// 我们能相信信息的发送者吗? (也许这个发送者和我们最初打开的不是同一个页面).
if (event.origin !== "http://example.org")
return;
// event.source 是我们通过window.open打开的弹出页面 popup
// event.data 是 popup发送给当前页面的消息 "hi there yourself! the secret response is: rheeeeet!"
}
window.addEventListener("message", receiveMessage, false);
B
/*
* 弹出页 popup 域名是<http://example.org>,以下是script标签中的代码:
*/
//当A页面postMessage被调用后,这个function被addEventListener调用
function receiveMessage(event)
{
// 我们能信任信息来源吗?
if (event.origin !== "http://example.com:8080") {
return;
}
// event.source 就当前弹出页的来源页面
// event.data 是 "hello there!"
// 假设你已经验证了所受到信息的origin (任何时候你都应该这样做), 一个很方便的方式就是把event.source
// 作为回信的对象,并且把event.origin作为targetOrigin
event.source.postMessage("hi there yourself! the secret response " +
"is: rheeeeet!",
event.origin);
}
window.addEventListener("message", receiveMessage, false);
2.共享存储机制:
可以使用如localStorage或sessionStorage这样的共享存储机制来在不同的iframe之间传递数据。首先,在父页面中写入数据,然后在子iframe中通过读取本地存储来获取这些数据。这种方法适用于同源的iframe。
- storage 事件会在同源的其他窗口/选项卡中触发。
- event.key 是变化的 localStorage 项的键。
- event.newValue 是变化后的新值。
注意事项:
- 只有在不同的窗口/选项卡之间修改 localStorage 时,才会触发 storage 事件。
- 如果在同一个窗口/选项卡中修改 localStorage,则不会触发 storage 事件。
Demo
// A页面
window.addEventListener('storage', function(event) {
if (event.key === 'testID' && event.newValue === '1111') {
console.log('New value:', event.newValue);
// do something
}
});
// B页面
localStorage.setItem('testID', '1111')
3.服务器端代理:
如果两个iframe不在同一个源上,可以通过服务器端作为中介来转发数据。父页面将数据发送到自己的服务器,然后服务器再将数据转发给另一个iframe所在的源的服务器,最后由后者将数据传递给相应的iframe。
总结
本文详细介绍了HTML中的iframe标签及其在现代网页开发中的重要性和多种应用场景。
iframe是一种允许在一个HTML文档中嵌入另一个HTML页面的技术,这为web开发者提供了极大的灵活性,能够轻松地集成第三方内容或创建模块化布局。
虽然iframe带来了便捷,但也伴随着一定的风险和性能挑战。合理利用其特性,同时注意规避潜在的问题,可以使iframe成为Web开发中强有力的工具之一。
七巧是以业务应用搭建为核心的aPaaS低代码应用平台,为客户提供aPaaS+iPaaS的全民数智化解决方案。
更多推荐



所有评论(0)