iframe

Iframe詳解

<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對象。

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

剛剛咱們提到了iframe的name屬性，咱們也能夠經過window.frames[iframeName]來調用iframe　

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的新特性

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字段