[html] 惡意超連結，window.opener 隨意更改你的網頁

大家寫網頁時一定學過 a 這個標籤，用來嵌入一個超連結

在這個標籤中，附帶了一個屬性為 target，可以決定開啟時是否新開分頁

我們可以常見的設置值 “_blank”，但這個值其實帶有一些風險

以下我們將詳細說明

---

 

比如我們今天在 A 網頁中嵌入一個超連結

站內連結(新開分頁)

<a href="https://wp.me/p7kqsB-cG" target="_blank">站內連結(新開分頁)</a>

在新分頁中，我們打開瀏覽器開發者工具(F12)的 console

輸入以下程式碼

console.log(window.opener);
// 印出 A 網頁的 window 物件
window.opener.document.title="hack";
// 改變 A 網頁的標題

你會發現我們可以操控原來的A網頁並且改變原來A網頁的內容

當然你會說站內連結通常不會是惡意網站吧!? (是沒錯啦~通常不太可能)

那我們試著使用站外連結

站外連結(新開分頁)

<a href="http://camel2243.github.io/" target="_blank">站外連結(新開分頁)</a>

一樣打開瀏覽器開發者工具的 console

輸入以下程式碼

console.log(window.opener);
// A 網頁的 window 物件
console.log(window.opener.title);
// 錯誤訊息，無法存取此變數
window.opener.location="http://www.google.com";
// 將 A 網頁作惡意導向

從以上程式碼可以發現，我們可以透過這個新開分頁，將 A 網頁導向惡意網站

利用這樣的手法，將使用者導至釣魚網站，便能做進一步的攻擊。

其實我們只要在 a 標籤的 rel 屬性加上 rel=noopener 即可使 window.opener === null

<a href="http://camel2243.github.io/" target="_blank" rel="noopener">站外連結(新開分頁)</a>

或者避免透過 html 的 a 標籤來新開分頁，使用 javascript 做新開分頁的動作。

var newTab=window.open();
newTab.opener=null;
newTab.location="http://www.google.com";

參考資料：

https://mathiasbynens.github.io/rel-noopener/#hax