⚠️ 意想不到的資安警告
近期有個網站設計專案，剛好內容裡放了一條 Google Map 的外部連結。
照理說這只是再常見不過的小功能，卻在弱掃報告裡被挑出了警告：
因為 target="_blank" 沒有加上
rel="noreferrer noopener"。
認真研究發現，這似乎只是語法上的小細節，但它為什麼會被資安工具點名？
難道一個不起眼的超連結屬性，真的可能影響到網站安全，甚至 SEO 表現？
先搞懂 rel=”nofollow noopener noreferrer” 是什麼
在進入資安與 SEO 的討論之前，我們先釐清「這三個屬性到底是什麼意思」。rel 代表 relationship (關係)，用來描述目前文件與連結資源的關係。最常見的例子是：
<link rel="stylesheet" href="/style.css">這代表引入的檔案與文件之間是「樣式表」的關係。
當 rel 被用在 <a> 標籤裡，就能透過不同的屬性值，指定連結的「行為規則」。
✅ 適用情境
-
廣告或贊助連結：
當連結來源屬於商業推廣或置入內容時，務必加上
rel="noreferrer noopener"。 - 使用者留言中的外部網址： 留言區的連結可能來自未知來源，加上 rel 屬性能避免潛在資安風險。
- 不熟悉、無法保證品質的交換連結： 若對方網站內容不明確或缺乏可信度，建議保護自己網站的同時加上 rel 屬性。
👉 如果你還不熟悉 SEO 的最基本概念，可以先看這篇《什麼是 SEO？別以為網站做完就好，排名關鍵在這裡》。
rel=”nofollow” 是什麼？
nofollow 是 Google 在 2005 年推出的一個連結屬性，目的是為了防止垃圾連結（spam links）污染搜尋結果。
它的作用很直接：告訴搜尋引擎「我放了這個連結，但我不替它背書」。
為什麼會有這東西？
早期很多人會在留言板、論壇、甚至部落格底下瘋狂貼外部連結，想靠這些「假推薦」騙取 Google 排名。
於是 Google 推出了 rel="nofollow"，讓網站管理者能主動告訴搜尋引擎：
「這個連結只是附上參考，不代表我信任它。」
🍊 小提醒：不是所有外部連結都要加 nofollow
👉 但是，如果今天你的文章裡放的是 維基百科、Google 官方文件，甚至 政府單位網站，
那這種高權重網站就不用加 nofollow。
因為這類網站就像「全班公認的學霸」一樣，引用他們只會讓你的文章更有說服力，
Google 也會覺得你有參考正統資料。
相反地，廣告連結或陌生網站才需要 nofollow，
因為誰知道對方會不會突然「變壞學生」把你拖下水呢？😅
rel=”noopener” 是什麼？
(▲ 圖片經過仿製，概念來源：thesecuritybuddy)
noopener 的用途是 阻止新分頁透過 window.opener 回頭控制原分頁。
它主要是為了防範資安風險，特別是 tabnabbing 攻擊（後面會深入介紹）。
範例：
<a href="https://example.com" target="_blank" rel="noopener">安全外部連結</a>這樣設定後，外部網站就無法透過 JavaScript 操作你的網頁。
為什麼 target=”_blank” 會被列為資安警告？
白話一些的解釋就是：如果你在連結裡加上 target="_blank"，
意思就是「開新分頁顯示」。聽起來很方便，因為這樣使用者就能一邊瀏覽外部網站，一邊保留你原本的頁面。
但問題來了！新開的分頁其實會透過一個叫 window.opener 的東西，拿到「回頭控制」你網頁的權限。 這代表什麼？想像一下👇
// 在新開的分頁中 window.opener.location = 'https://fake-login.com';
結果？使用者再切回你的網站分頁時，畫面早就被換成假登入頁，還以為自己還在原網站，乖乖輸入帳密…… 這就是所謂的 tabnabbing 攻擊。 聽起來是不是很驚悚？😨 而且更糟的是，這種攻擊根本不需要駭客多厲害， 任何人都能複製一段程式碼就做到。
所以 rel="noopener" 的作用，就是在告訴瀏覽器：
「嘿！新分頁別想回頭碰我！」
一旦加上這個屬性，新開的頁面就完全失去對舊頁的控制權，大幅降低被 tabnabbing 的風險。
👉 簡單來說： noopener 就像你幫網站裝了一道防火門， 新分頁再怎麼吵鬧，也燒不回你的主網站 🔥。
rel=”noreferrer” 是什麼？
noreferrer 的作用是 不傳送 HTTP Referer header。
當使用者從你的網站點出去，目標網站通常可以看到「來源網址」是誰。
如果加上 noreferrer，對方就無法得知流量來自哪裡。
這樣做對隱私保護很好，但同時也會帶來一個問題：
網站分析工具（例如 Google Analytics）會失去正確的 referral data，流量會被歸類成「直接流量 (direct)」。
🌿 noreferrer 是什麼？
白話一點，其實它的功能很單純： 不要讓對方知道你是從哪裡來的。
當你加上 rel="noreferrer" 時，
對方網站就看不到「引用來源」（Referrer），也就是不會知道你是從哪個頁面點過來的。
這在保護使用者隱私、或避免外部網站蒐集行為資料時特別有用。
🌱 小結：
noopener 負責防止被控制、noreferrer 負責隱藏你的身分。
兩者常常搭配一起使用，就是我們常見的
rel="noreferrer noopener"。
一般來說，當使用者從你的網站點一個外部連結，目標網站會在 HTTP 請求的 Referer 標頭裡看到來源資訊。
📘 舉例
-
情境：你在自己的文章裡放了一個連去
example.com的連結。 -
結果：使用者點擊後，
example.com就能知道「流量來自你這個網頁」。
有些時候，這會造成隱私或商業上的顧慮。
比方說：
- 你寫了一篇分析「網站設計價格」的文章，裡面連到某家報價系統。
-
對方一看
Referer就知道你在比較他們的價格， 這感覺是不是有點赤裸裸？😅
這時候 rel="noreferrer" 就派上用場了。它能讓對方完全看不到來源網址，保護使用者隱私，也避免洩漏太多商業資訊。
⚠️ 注意這個小陷阱
不過，這裡有個小陷阱：
如果你加了 noreferrer，
Google Analytics 或其他流量分析工具就收不到正確的來源，
會把這些點擊全都算進「直接流量 (direct)」。
換句話說，你原本想追蹤「有多少人是從某篇文章點去外部網站的」，結果數據被吃掉了。
👉 換句話說：
noreferrer 就像幫使用者戴上墨鏡、換了套衣服偷偷溜出去，
對方根本不知道他是從哪來的。
但同時，你自己的監視器也拍不到他的背影了。
範例：
<a href="https://example.com" target="_blank" rel="noreferrer">不洩漏來源的連結</a>
三者的差異與組合
| 屬性 | 功能說明 | 簡單記法 | 適用情境 |
|---|---|---|---|
| nofollow | 不傳遞 SEO 權重 | 「我貼這連結，但不代表我幫他背書」 | 廣告、贊助、留言、交換連結 |
| noopener | 阻止新分頁控制原分頁，防止 tabnabbing 攻擊 | 「你可以開新門出去，但別想回頭亂動我家」 | 所有 target="_blank" 外部連結 |
| noreferrer | 不傳送 Referer header，隱藏來源資訊，同時具備 noopener 效果 | 「我幫你戴墨鏡偷偷出門，沒人知道你從哪來」 | 不想洩漏來源的外部連結（但避免用在內部連結） |
實務上，三者經常組合使用，例如：
<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">外部連結</a>
這一行的意思是：
（rel=”nofollow”）
（rel=”noopener”）
（rel=”noreferrer”）
這樣一來，SEO、資安與隱私三個層面都被照顧到。
資安風險：為什麼需要 noopener？
(圖片來源：網頁開發雜記)
window.opener 的機制
當一個連結使用 target="_blank" 開新分頁時，瀏覽器會自動建立一個 window.opener。
這代表新開的分頁其實可以「回頭」對原分頁下指令。
對一般使用者來說，這幾乎是隱形的機制，不會察覺到有什麼風險。
但對駭客而言，這就是一個後門。
🍊 我的小故事
這讓我想起，我早期在開發一個功能的時候，剛好在玩「子視窗控制父視窗」這個技巧。那時候透過這樣的方式我可以操控原本的頁面，傳值、更新狀態、甚至觸發事件。
不過後來透過這次研究我才知道，window.opener 的延伸應用，對於有心人士來說是一個極具威脅的工具！惡意網站甚至能「反控制」你的主頁面。
對一般使用者來說，這幾乎是隱形的機制，不會察覺到有什麼風險；但對駭客而言，這正是一個可以被利用的後門。
Tabnabbing 攻擊案例
⚠️ 想像一個真實情境：典型的 tabnabbing 攻擊
你的網站裡放了一個連結，使用者點擊後在新分頁專心瀏覽外部網站，完全沒注意舊分頁的狀態。
在這段空檔，惡意網站透過 window.opener 偷偷下了一段程式碼：
// 在新開的分頁中執行 window.opener.location = 'https://fake-login.com';
結果：你的網站分頁畫面瞬間被換成「假登入頁」。等使用者切回來時，還以為自己仍在原網站，可能就會乖乖輸入帳號密碼這就是 「tabnabbing」 攻擊。
更可怕的是，駭客常加入延遲觸發（例如幾十秒或一分鐘後才跳轉），讓使用者更難察覺異常，等回頭時已中計。
防護重點：在所有外部連結加上 rel="noopener noreferrer"（若為付費/廣告連結，另加 nofollow），即可切斷新分頁對舊頁的回控。
為什麼這麼危險？
⚠️ 攻擊風險要點
- 低技術門檻：這種攻擊方式程式碼超簡單，幾乎任何人都能複製。
- 高隱蔽性：使用者大多專注在新分頁，不會注意舊分頁發生了什麼。
- 嚴重後果：一旦被用來導向釣魚頁，損失的不只是使用者帳號，還可能拖垮品牌信任。
換句話說，只要少了一個 rel="noopener"，就等於留了一個讓駭客「偷換門面」的機會。
瀏覽器的補救：預設 noopener
💡 注意
- 好消息是：瀏覽器也意識到了這個風險。
- Chromium 88 起：（含新版 Chrome、Edge）所有
target="_blank"預設會隱含rel="noopener"。 - 其他瀏覽器：Firefox 52 與 Safari 10.1 之後也陸續採用相同保護機制。
這代表在大多數現代瀏覽器裡，其實已經自動具備防護機制。以今天 (2025/10/05) 來看， Google Chrome 已經進展到 140 版， 早就把這個保護當成「預設行為」，所以在最新環境裡幾乎不會再出現舊時代的 tabnabbing 風險。
所以從「實務必須性」角度來說，如果你的專案主要受眾都在使用最新版本的 Chrome、Edge、Firefox、Safari，那麼就算沒寫 rel="noopener"，也不會立刻暴露在風險之下。
🔒 保守派的建議
不過，如果你是比較保守、想要在細節上更完整的人，或是需要過弱掃機器的人，還是建議顯式寫上。這麼做的好處有三：
- 1. 兼容老舊環境：IE、Edge Legacy、舊版 Safari 仍可能存在。
- 2. 語意明確：讓看到程式碼的人一眼知道有資安考量。
- 3. Lighthouse 不會跳警告：Google 工具仍會判斷
target="_blank"沒有 rel 是不安全的。
👉 換句話說，在 2025 年的今天，「已經不是一定要加」，但如果想把細節做到位，還是加上
rel="noopener" 比較保險。
SEO 與網站經營的考量
nofollow：要不要幫對方背書？
前面提過，Google 把外部連結視為一種信任背書。
你在網頁裡放了一個連結，就等於替對方網站投了一票。
如果對方是維基百科、Google 官方文件、政府單位，這類高權重網站，那完全不用擔心，因為引用這些內容反而能增加你文章的可信度與 EEAT。
但如果是廣告、贊助合作，或者你無法確保品質的交換連結，那就一定要加上 nofollow。
簡單來說：
- 信任的來源 → dofollow（不加 nofollow）
- 廣告或陌生來源 → nofollow
noreferrer：隱私與數據的兩難
noreferrer 能保護使用者隱私，不讓外部網站知道流量來源。
聽起來很好，但問題在於：
一旦加上 noreferrer，你的 Google Analytics 等分析工具就失去「流量來源」資訊，這些點擊會被歸到「直接流量 (direct)」。
因此，建議做法是：
- 內部連結 千萬不要加
noreferrer，否則 Google 會失去網站架構的脈絡。 - 外部連結 視需求決定，如果很在意隱私或不想暴露商業行為，可以加上；但如果需要追蹤轉換，就別加。
💡 進階補充：關於聯盟行銷（Affiliate Marketing）
絕大多數聯盟行銷平台，都是靠你專屬的 ID 參數（例如 aff_id=xxx）在 URL 進行歸因。只要使用者點擊的連結中包含這個 ID，不論是否有加 noreferrer，佣金都會照常被計算。換句話說，noreferrer 不會讓你拿不到錢。
但也有少部分較舊或客製化的聯盟系統，仍然依賴 HTTP Referer 來判斷來源。如果該平台明確要求「必須能看到來源網址」才能認定有效轉換，那這時候就不建議使用 noreferrer，否則可能會導致漏算佣金。
建議做法
- 內部連結：千萬不要加
noreferrer，否則 Google 會失去網站架構的脈絡。 - 外部連結：視需求決定。如果你很在意隱私或不想暴露商業行為，可以加上；但若連結涉及行銷追蹤、轉換或聯盟收益，就建議不要加。
noopener：SEO 沒有影響，但安全必須有
從 SEO 的角度來看，noopener 沒有任何正負影響。
它單純只影響瀏覽器的行為，不會改變 Google 爬蟲的收錄或排名。
所以這個屬性你可以放心使用，既不會影響 SEO，又能保護資安。
👉 這樣安排，工程師、行銷人員、SEO 負責人都能找到各自該注意的點。
開發實務與工具支援
WordPress 與其他 CMS 的預設保護
如果你有用 WordPress 這類框架，會發現很多時候系統會自動幫你補上 rel="noopener"。
這是因為框架開發者早就知道這是資安常見問題，所以乾脆把「安全預設」內建在系統裡，讓網站管理員不用額外記。
換句話說，如果你用 CMS 產生連結，它通常已經替你做了最小限度的保護。
不過，是否加上 nofollow、noreferrer，仍需要根據 SEO 與隱私需求手動調整。
前端工程師與 SEO 團隊的協作
這些屬性看起來只是「一行 HTML」，但實際上往往是 工程師 + 行銷 + SEO 團隊 必須一起協作的議題。
👥 不同角色的重點關注
-
工程師：確保網站沒有資安漏洞（
noopener） -
行銷 / SEO：確保追蹤數據正確（
noreferrer與否），避免漏掉來源分析 -
網站經營者：確保外部連結符合 Google 規範（
nofollow）
換句話說，這個小細節其實就是「網站設計專案中的跨部門協作縮影」。
小細節，其實是大課題
在網站設計專案裡，很多人常常忽略 rel="nofollow noopener noreferrer"，覺得它只是語法細節，甚至只是「看起來專業」的裝飾。
但深入研究後會發現，這個小屬性背後其實牽涉到三個領域：
- 資安：沒有
noopener，你的網站可能暴露在 tabnabbing 攻擊中，讓使用者掉進釣魚陷阱。 - 隱私與數據：加了
noreferrer可以保護使用者隱私，但同時會犧牲 GA 的流量來源追蹤。 - SEO：
nofollow則影響「要不要幫別人背書」，廣告、贊助一定要加，可信來源則可以不用。
雖然現代瀏覽器（像 Chrome 已經來到 140 版）大多已經預設防護了，但對於一個專案來說，是否顯式加上 rel，往往是「你有沒有做到細節」的象徵。
對工程師來說，這是資安習慣；對行銷與 SEO 來說，這是數據與規範；對網站經營者來說，則是專業感的展現。
👉 換句話說，這個屬性雖然小，卻是一道跨越資安、SEO、隱私三合一的考題。
如果你是講求完整性的網站設計師，建議養成習慣：凡是
target="_blank"
的外部連結，都先想清楚「這三個屬性要不要加」，讓你的專案不只漂亮，還能兼顧安全、數據與信任。
