【HTML】解析 <a> 的 rel 屬性 - window.opener 惡意連結實例

原視窗重新導向到首頁

如果帶有 target="_blank" 的連結沒有加上 rel 的 noopener 屬性，新視窗可以使用 window.opener 控制原視窗重新導向指定網址。

js

// 原視窗重新導向到首頁
window.opener.location.href = "https://forgetfulengineer.github.io/";

開啟原視窗的 alert

如果帶有 target="_blank" 的連結沒有加上 rel 的 noopener 屬性，新視窗可以使用 window.opener 開啟原視窗的 alert。

js

// 開啟原視窗的 alert
window.opener.alert('你點到惡意連結了');

操作原視窗的 DOM

如果帶有 target="_blank" 的連結沒有加上 rel 的 noopener 屬性，新視窗可以使用 window.opener 操作原視窗的 DOM。

js

// 操作原視窗的 DOM
window.opener.document.querySelector('body').innerHTML='<b style="color: red; font-size: 100px; margin: auto;">你點到惡意連結了</b>';

健忘筆記

現代瀏覽器在大部分情況下已經自動為帶有 target="_blank" 的連結加上 rel="noopener"，所以有沒有設定 noopener 使用 window.opener 都會得到 null，但為了確保相容性和覆蓋到所有情況，依然建議明確地設定 rel="noopener"。

😈 惡意連結實例

原視窗重新導向到首頁 開啟原視窗的 alert 操作原視窗的 DOM

回到原文章