說明
浏覽器工作原理與實踐專欄學習筆記
前言
在預設情況下，如果打開一個标簽頁，那麼浏覽器會預設為其建立一個渲染程序。
如果從一個标簽頁中打開了另一個新标簽頁，當新标簽頁和目前标簽頁屬于同一站點（相同協定、相同根域名）的話，那麼新标簽頁會複用目前标簽頁的渲染程序。
多個标簽頁運作在同一個渲染程序：從标簽頁中打開新的标簽頁
多個标簽頁運作在不同的渲染程序中：建立一個标簽頁打開
标簽頁之間的連接配接
可以通過
window.opener
操作
1.通過标簽 <a>
<a>
<a href="https://time.geekbang.org/" target="_blank" class="">極客時間</a> 2.通過 window.open
window.open
new_window = window.open("http://time.geekbang.org") 在 WhatWG 規範中，把這一類具有互相連接配接關系的标簽頁稱為浏覽上下文組 ( browsing context group)。
一個标簽頁所包含的内容，諸如 window 對象，曆史記錄，滾動條位置等資訊稱為浏覽上下文。通過腳本互相連接配接起來的浏覽上下文就是浏覽上下文組。
規範文檔
Chrome 浏覽器會将浏覽上下文組中屬于同一站點的标簽配置設定到同一個渲染程序中。
為什麼它們必須運作在同一渲染程序中？
因為如果一組标簽頁，既在同一個浏覽上下文組中，又屬于同一站點，那麼它們可能需要在對方的标簽頁中執行腳本。
計算标簽頁使用的渲染程序數目：
noopener 與 noreferrer
Chrome 浏覽器為标簽頁配置設定渲染程序的政策：
- 如果兩個标簽頁都位于同一個浏覽上下文組，且屬于同一站點，那麼這兩個标簽頁會被浏覽器配置設定到同一個渲染程序中。
- 如果這兩個條件不能同時滿足，那麼這兩個标簽頁會分别使用不同的渲染程序來渲染。
例子：首先打開
linkmarket.aliyun.com
這個标簽頁，再在這個标簽頁中随便點選兩個連結，然後就打開了兩個新的标簽頁了，如下圖所示：
A、B、C 三個标簽頁都屬于同一站點，正常情況下，它們應該共用同一個渲染程序，不過通過上圖我們可以看出來，A、B、C 三個标簽頁分别使用了三個不同的渲染程序。
說明這三個标簽頁不在同一個浏覽上下文組中。
怎麼驗證？
可以通過控制台，來看看 B 标簽頁和 C 标簽标簽頁的 opener 的值都是 null，說明 B、C 标簽頁和 A 标簽頁沒有連接配接關系，不屬于同一浏覽上下文組。
實作的原理是什麼？
連結使用了
rel = noopener
：
- noopener：告訴浏覽器，通過這個連結打開的标簽頁中的 opener 值設定為 null
- noreferrer：告訴浏覽器，新打開的标簽頁不要有引用關系。
阿裡為什麼要把同一站點的tab簽做成無連接配接的，會避免什麼安全隐患啊？
如果多個标簽在同一個程序中，那麼一個标簽淪陷了，其它标簽都會淪陷的
更多可以參考：nofollow、noopener和noreferrer标簽的差別
什麼是 noreferrer 标簽？
簡而言之，noreferrer 标記在單擊連結時隐藏引用者資訊。如果有人從使用此标記的連結到達您的網站，您的分析将不會顯示誰提到該連結。相反，它會錯誤地顯示為您的統計流量報告中的直接流量。
這個 noreferrer 标簽在 WordPress 早些版本中是自動添加到 A 标簽中，但實際上這并不是 WordPress 本身所做的改變，而是由 WordPress 使用的富文本編輯器 TinyMCE（WordPress 預設編輯器）造成的。目的就是防止網絡釣魚攻擊，垃圾郵件發送者劫持您的網頁，可能會通路您的網站或通路機密資訊。不過現在 TinyMCE 隻強制插入 noopener 标簽，已經不會強制插入“noopener noreferrer”标簽。
什麼是 noopener 标簽？
rel =“noopener” 在新标簽中打開連結時基本上不會打開它的開啟者。這意味着，它的 window.opener 屬性将是在新标簽中打開一個連結時，而不是從那裡的連結打開同一個頁面為空。
rel =“noopener” 一般都是搭配 target="_blank"同時使用，因為 target="_blank" 也是一個安全漏洞：新的頁面可以通過 window.opener 通路您的視窗對象，并且它可以使用 window.opener.location = newURL 将您的頁面導航至不同的網址。新頁面将與您的頁面在同一個程序上運作，如果新頁面正在執行開銷極大的 JavaScript，您的頁面性能可能會受影響。
什麼是 nofollow 标簽？
nofollow 标簽就是告訴百度、Google 等搜尋引擎不要通過使用此标記的連結傳遞任何值。大多數情況下，nofollow 标簽用于阻止“PageRank”傳遞到網站上的管理頁面（例如，您不需要排名的登入頁面），或者根據 Google 的付費使用廣告客戶的 URL 連結政策。除了用于付費和管理連結之外，nofollow 标記通常用于限制 PageRank 通過部落格評論或留言簿條目中的連結傳遞。在連結到信譽或可信度可能成為問題的網站時，您也可以使用 nofollow。
noopener 和 noreferrer 标簽如何提高安全性？
noopener 和 noreferrer 标簽是阻止漏洞利用的主動權，該漏洞利用在新标簽中打開的連結。很少有成員知道這個漏洞，是以 WordPress 采取這一舉措來提高使用者的安全性。反向 Tabnabbing 是一種網絡釣魚攻擊，攻擊者用惡意文檔替換合法且可信的頁面頁籤。
當有人打開新頁籤時，網絡釣魚者會通過 window.opener 檢測引薦網址，并使用 window.opener.location = newURL 推送新的網址。
這樣，沒有人會有陷入網絡釣魚攻擊的線索，因為他們已經從可靠的來源（WordPress 建立的網站）到達網站。而使用 rel =“noopener”會阻止網絡釣魚者擷取有關連結源和與 referrer 連結相關的任何資料的資訊。
nofollow、noopener 和 noreferrer 标簽對SEO 有什麼影響？
這是許多部落客站長們關心的問題，因為大家都知道 nofollow 标簽會影響 Google 等搜尋引擎的抓取和索引連結以及傳遞 PageRank 的能力，是以大家都比較擔心 noopener 标簽和 noreferrer 标簽也會這樣做。
其實，noopener 标簽和 noreferrer 标簽對 SEO 沒有任何影響。簡而言之，它們運作在分析/浏覽器級别，而不是搜尋引擎級别。雖然在監控回報流量方面存在嚴重問題，但它不會影響站點内容的索引、抓取或排名方式。
站點隔離
目前 Chrome 浏覽器已經預設實作了站點隔離的功能，這意味着标簽頁中的 iframe 也會遵守同一站點的配置設定原則。如果 iframe 和标簽頁不屬于同一站點，那麼 iframe 會運作在單獨的渲染程序中。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>站點隔離:demo</title>
<style>iframe {
width: 800px;
height: 300px;
}</style>
</head>
<body>
<div><iframe src="iframe.html"></iframe></div>
<div><iframe src="https://www.infoq.cn/"></iframe></div>
<div><iframe src="https://geekbang.org/"></iframe></div>
<div><iframe src="https://meiqia.com/"></iframe></div>
</body>
</html> iframe 使用單獨的渲染程序：
- InfoQ、極客邦兩個 iframe 與父标簽頁不屬于同一站點，是以它們會被配置設定到不同的渲染程序中
- iframe.html 和源标簽頁屬于同一站點，是以它會和源标簽頁運作在同一個渲染程序中