iframe

时间 2019-11-19

标签 iframe 栏目 HTML 繁體版

原文原文链接

Iframe详解html

<iframe src="demo.html" height="300" width="500" name="demo" scrolling="auto" sandbox="allow-same-origin"></iframe>

iframe的一些基本属性：前端

src iframe页面地址，有同域跨域之分
height iframe高度
width iframe宽度
name iframe命名，可经过window.frames[xxx]被调用
scrolling iframe滚动模式
sandbox html5新特性，用于限制iframe的功能

使用iframe的正确姿式

咱们能够经过contentWindow和contentDocument两个API获取iframe的window对象和document对象。html5

let iframe = document.getElementById('demo');
let iwindow = iframe.contentWindow; // 获取iframe的window对象
let idoc = iframe.contentDocument; // 获取iframe的document对象

刚刚咱们提到了iframe的name属性，咱们也能够经过window.frames[iframeName]来调用iframe　ajax

let iframe = window.frames['demo']

iframe使用父级内容的正确姿式

咱们经过 window.self， window.parent， window.top这三个属性分别获取自身window对象，父级window对象，顶级window对象。

iframe1.self === iframe1
iframe1.parent === iframe2
iframe2.parent === window
iframe1.top === window

同域/跨域

什么是同域什么跨域咧？同域跨域的区别在哪咧？咱们通常会使用iframe来进行父子页面的通讯，然鹅父子页面是否同域决定了它们之间可否进行通讯。后端

js遵循同源策略，即同协议，同域名，同端口号，不然都算跨域。跨域

同源策略是由Netscape提出的一个著名的安全策略，如今全部支持JavaScript 的浏览器都会使用这个策略。实际上，这种策略只是一个规范，并非强制要求，各大厂商的浏览器只是针对同源策略的一种实现。它是浏览器最核心也最基本的安全功能，若是缺乏了同源策略，则浏览器的正常功能可能都会受到影响。

跨域简单的来讲，指的是两个资源非同源。出于安全方面的考虑，页面中的JavaScript在请求非同源的资源时就会出跨域问题 ——即跨域请求，这时，因为同源策略，咱们的请求会被浏览器禁止。也就出现了咱们常说的跨域问题。

iframe跨域通信之document.domain

对于主域相同子域不一样的两个页面，咱们能够经过document.domain + iframe来解决跨域通讯问题。浏览器

网页a( http://www.easonwong.com)和网页b( http://script.easonwong.com)，二者都设置 document.domain = 'easonwong.com'（这样浏览器就会认为它们处于同一个域下），而后网页a再建立iframe上网页b，就能够进行通讯啦～

网页a

document.domain = 'easonwong.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.easonwong.com';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    let doc = ifr.contentDocument || ifr.contentWindow.document;
    // 在这里操纵b.html
};

网页b安全

document.domain = 'easonwong.com';

iframe跨域通信之postMessage

postMessage是html5的新特性app

postMessage介绍框架

MDN postMessage

兼容性 IE8以上

can I use

咱们能够经过html5这个新特性进行iframe间的跨域通讯，使用postMessage进行数据传递，经过Message监听通讯事件。

网页a

document.domain = 'easonwong.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.easonwong.com';
ifr.style.display = 'none';
document.body.appendChild(ifr);
// 发送数据
ifr.postmessage('hello, I`m a', 'http://script.easonwong.com');

网页b

// 监听message事件
window.addEventListener('message', receiver, false);
function receiver(e) {
    if (e.origin == 'http://www.easonwong.com') {
        if (e.data == 'hello, I`m a') {
            e.source.postMessage('hello, I`m b', e.origin);信息
        }
    }
}

iframe实现JSBridge

在移动端Hybrid混合模式中常常用到JSBridge进行JS和Native之间的通讯，其中咱们能够经过iframe的方式实现JS调用Native的方法。

以上提到的方法就是URL SCHEME拦截

URL SCHEME是一种相似于url的连接，是为了方便app直接互相调用设计的，形式和普通的 url 近似，主要区别是 protocol 和 host 通常是自定义的，例如: easonwong://hh/url?name=easonwong，其中protocol是easonwong，host则是hh

咱们经过建立一个iframe（src设为咱们自定义的URL SCHEME）来发送请求，而后Native那边能够拦截到请求并获取其中带有的参数，便可进行后续的操做。

iframe的其余用途

用iframe进行异步请求

在好久好久好久之前，久到ajax还没出现的时候，人们会用iframe来进行异步请求。大概就是异步建立iframe，而后后台返回数据在iframe中，咱们在从里面获取数据。

例如在我作过的一个项目中，经过iframe.src传入一个文件下载地址，实现无需打开新窗口下载文件。

引用/展现第三方内容
须要独立样式和带有交互的内容，例如幻灯片
sandbox沙箱隔离
历史记录管理

iframe的安全问题

iframe小广告

很让咱们讨厌iframe的一点，就是不少*网站都会有各类让人防不胜防的小广告，它们大多就是用经过iframe实现的，原本想点击某个播放按钮，结果马鸭直接跳几十跳不知道去了哪一个新世界去了。

更讨厌的一种状况是，可能不知道哪天用户忽然拿刀过来，说咱们的项目页面里出现了野鸡广告，说咱们在消费他们，一脸懵逼的咱们以为十分无辜。实际上就是咱们的页面被运行商劫持了，被挂上了注入了不知名的野鸡广告。

因此咱们必定要注意在用iframe的同时，要防止咱们被iframe了。

防嵌套页面操做

在前端领域，咱们能够经过window.top来防止咱们页面被嵌套。

if(window != window.top){
    window.top.location.href = myURL;
}

或者经过window.location.host来检测是否跨域了

if (top.location.host != window.location.host) {
　　top.location.href = window.location.href;
}

然后端也能够作对应的防范措施，经过设置X-Frame-Options响应头来确保本身网站的内容没有被嵌到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。

CSP

内容安全策略（CSP）用于检测和减轻用于 Web 站点的特定类型的攻击，例如 XSS 和数据注入等。

MDN CSP

经过CSP配置sandbox和child-src能够设置iframe的有效地址，它限制适iframe的行为，包括阻止弹出窗口,防止插件和脚本的执行,并且能够执行一个同源策略。

用法

咱们能够在html头部中加上<meta>标签

<meta http-equiv="Content-Security-Policy" content="child-src 'unsafe-inline' 'unsafe-eval' www.easonwong.com">

或者经过HTTP头部信息加上Content-Security-Policy字段