嵌入的iframe又不能訪問了？還有這些你不知道的事

客戶又反饋內嵌的第三方頁面不能正常訪問啦！
快來學一學iframe相關的知識，一次搞定iframe吧。css

iframe 是什麼？

iframe 是一個 html 標籤html

<iframe></iframe>
複製代碼

iframe 標籤的一些屬性：前端

屬性	做用
frameborder	是否顯示邊框
width	寬度
height	高度
name	名稱
src	在 iframe 中顯示的目標網站的 URL
scrolling	是否顯示滾動條
sandbox	安全限制

sandbox 選項是頂層上下文用來控制 iframe 安全性的，配置項有：nginx

配置項	做用
allow-scripts	容許運行腳本
allow-downlods	容許下載
allow-same-origin	容許同域請求:ajax
allow-top-navigation	容許使用頂層上下文的導航: window.top
allow-popups	容許從 iframe 中彈出新窗口:window.open
allow-forms	容許 form 表單提交

更多選項，點擊這裏查看web

iframe 能夠作什麼？

iframe 標籤的做用是：在文檔中嵌套文檔，或者說在網頁中嵌套網頁。舉個例子：ajax

在 A 頁面中嵌套 B 頁面

A 頁面chrome

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>page A</title>
  </head>
  <body>
    <p>這是a頁面</p>
    <!-- 在A頁面中使用iframe內嵌了B頁面 -->
    <iframe src="./b.html"></iframe>
  </body>
</html>
複製代碼

B 頁面跨域

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>page B</title>
  </head>
  <body>
    <p>這是b頁面</p>
  </body>
</html>
複製代碼

B 頁面內嵌在 A 頁面當中瀏覽器

打開 A 頁面看一下安全

嵌套成功了，是否是很 nice？這樣咱們就能夠直接複用 B 網站的功能了。

在 A 頁面中嵌套百度試試

接下來咱們試着嵌套一下百度一下的頁面將 iframe 的 src 修改一下：

<iframe src="https://www.baidu.com"></iframe>
複製代碼

再打開 A 頁面看一下：

OOXX 發生了什麼,怎麼不讓嵌套呢？

仔細看看報錯，有兩個問題：

瀏覽器禁止了攜帶第三方 cookie 嵌套在 A 頁面中的百度不能使用保存在瀏覽器中的百度的 cookie。瀏覽器如今沒有設置 SameSite 的 cookie 默認 SameSite 值爲 Lax，只會跨站傳遞 Same-Site=None 且 Secure（即協議爲 https 協議）的 cookie。 cookie 的 sameSite 屬性有如下選項：

SameSite	option
Strict	嚴格禁止第三方 cookie
Lax	僅對 get 請求發送
None	Cookie 只能經過 HTTPS 協議發送即必須擁有 Secure 字段

更多 chrome 規範細節能夠打開 chrome 的文檔 1、文檔 2瞭解

目標網站 www.baidu.com 設置了X-Frame-Options爲sameorigin X-Frame-Options 屬性是網站設置在響應頭中的字段，該字段有如下選項：

X-Frame-Options	option
deny	拒絕被嵌套
sameOrigin	容許被相同域名的網站嵌套
allow-from example.com/	容許被指定域名的網站嵌套

原來是百度對網站作了來源限制，拒絕全部非同域網站將其嵌套啦。如何在 nginx 中配置該字段，可參考MDN。限制 iframe 引用對於網站來講能夠從源頭上有效的避免不少安全隱患，好比點擊劫持就直接被避免了。

並非全部的網站都會作引用限制，好比花瓣(www.huaban.com)、美團(https://www.meitua…

講 cookie 傳遞策略和引用限制就好像說遠了，可是這些功能都在不斷都影響着 iframe 的發展。

iframe 的好處

解決跨域 iframe 嵌套支持 postMessage 方法，完美避開跨域的問題,點這裏查看 postMesage 的具體用法
複用功能避免重複開發功能
加載廣告廣告頁面與頂層頁面通常不涉及頁面間通訊，僅使用嵌套功能很是適合
自然的沙箱實現了 css 隔離和 js 隔離，在微前端實踐中佔有一席之地

iframe 的缺點

頁面樣式風格不統一
頂層頁面和內嵌頁面的樣式風格迥異，頁面看起來不美觀，沒有項目的一體感，用戶體驗降低。
阻塞頂層頁面的 onload 事件
內嵌頁面加載完畢以後，主頁面才加載完畢。
共享鏈接池
頂層頁面和內層頁面共享鏈接池，在 chrome 下同時只能發送 6 個 http 請求，iframe 的嵌入會影響主頁面的資源加載。

tips

https 的網頁能夠嵌套 http 的網頁？不能夠,會致使如下錯誤

Mixed Content: The page at 'www.a.com' was loaded over HTTPS, but requested an insecure frame 'www.b.com'. This request has been blocked; the content must be served over HTTPS.
chrome 提供了可選項能夠手動設置支持 https 跳轉 http
chrome://flags/#cookies-without-same-site-must-be-secure 因爲安全性，不推薦這樣使用。解決辦法：讓跳轉頁面支持 https
chrome 提供了可選項能夠手動設置支持 https 網站下載 http 的內容
chrome://flags/#treat-unsafe-downloads-as-active-content 因爲安全性，不推薦這樣使用。解決辦法：讓下載資源服務支持 https
chrome 提供了可選項能夠手動設置自動攜帶第三方 cookie
chrome://flags/#same-site-by-default-cookies 因爲安全性，不推薦這樣使用。
什麼是點擊劫持
早些年黑客的攻擊手段就是藉助了點擊劫持，將一個銀行頁面內嵌在一個釣魚網站下面，當用戶進入這個釣魚網站點擊一個普通按鈕的時候，實際點擊到的多是銀行頁面的確認轉帳按鈕。

總結

隨着人們對我的信息安全保護的意識提高，各家瀏覽器廠商更加註重保護用戶的隱私安全。好比谷歌，每一年須要支付因爲侵犯用戶隱私帶來的鉅額罰款，因此 chrome 對 cookie 的訪問限制愈來愈嚴格。瀏覽器對 cookie 的控制更加嚴格，對於 iframe 來講無疑帶來了很大的影響。想象一下，不久的未來，瀏覽器徹底禁止了第三方 cookie，iframe 跨域嵌套網站沒法攜帶cookie，那麼不少跨公司的嵌套合做恐怕沒法達成了。

若是還有遺漏的點，歡迎大加在評論區留言喲！這篇講iframe延伸到了cookie和瀏覽器安全，後面小姐姐會單獨寫一篇web安全、CSP的內容，關注小姐姐，一塊兒學一學。