此示例使用 HTML + Canvas 實現滑動拼圖驗證碼。Canvas繪制帶隨機缺口的背景，獨立滑塊按鈕監聽滑鼠/觸摸拖拽，實時將滑塊位置映射到Ca...
target_blank屬性值以及`rel="noopener noreferrer"`屬性
雲端運算與程式碼
2024年09月30日 16:08 1.7K+
品悟
本
文
摘
要
`target="_blank"`是HTML中的一個屬性值，用於在超鏈接（`<a>`標簽）中。
1. 主要作用
- 當設置了`target="_blank"`後，點擊該鏈接時，會在新的瀏覽器標簽頁或者新的瀏覽器窗口（取決於瀏覽器的設置）中打開鏈接指向的目標頁面。例如：
<a href="https://www.qunapu.com" target="_blank">點擊這裏打開新頁面</a>
2. 相關安全和用戶體驗考慮
- 安全風險：從安全角度來看，在新標簽頁打開外部鏈接時，如果不註意設置，可能會存在安全風險。例如，新打開的頁面可能會通過`window.opener`等JavaScript方法訪問原始頁面的某些信息，存在跨站點腳本攻擊（XSS）的潛在風險。為了降低這種風險，可以在新頁面中設置`rel="noopener noreferrer"`屬性，像這樣：
<a href="https://www.qunapu.com" target="_blank" rel="noopener noreferrer">點擊這裏打開新頁面</a>
- 用戶體驗：從用戶體驗方面考慮，過度使用`target="_blank"`可能會導致打開過多的標簽頁，使用戶的瀏覽器標簽欄變得雜亂。所以應該謹慎使用，僅在確實需要在新標簽頁打開鏈接的情況下才使用該屬性。
在新頁面中設置`rel="noopener noreferrer"`屬性主要有以下目的：
一、防範安全風險
1. 防止跨站點腳本攻擊（XSS）
- 當一個鏈接使用`target = "_blank"`在新標簽頁打開時，新打開的頁面（如果是惡意頁面）可以通過`window.opener`對象訪問原始頁面的`window`對象。這意味著惡意頁面可能獲取原始頁面的敏感信息，如用戶的登錄狀態、個人資料數據等，從而引發跨站點腳本攻擊。
- 例如，如果原始頁面包含用戶的登錄信息（如用戶名、密碼等存儲在JavaScript變量中），惡意的新頁面可以通過`window.opener`訪問這些信息並發送給攻擊者的服務器。
- 設置`rel="noopener"`可以阻止新頁面訪問`window.opener`，從而切斷這種潛在的安全風險途徑。
2. 防止Referrer泄露
- 當新頁面打開時，如果沒有`rel="noreferrer"`，新頁面的`Referrer`頭部會包含原始頁面的URL。這可能會泄露一些敏感信息，比如原始頁面的內部結構或者特定的路徑信息。
- 對於一些企業內部的敏感頁面或者需要保護隱私的場景，防止`Referrer`泄露是很重要的。設置`rel="noreferrer"`可以確保新頁面的`Referrer`頭部不包含原始頁面的URL。
二、遵循安全最佳實踐
1. 提高頁面安全性
- 在現代Web開發中，安全是至關重要的。遵循安全最佳實踐，如設置`rel="noopener noreferrer"`，有助於確保整個Web應用的安全性。這不僅保護了用戶的數據安全，也有助於提高網站的信譽。
- 許多安全標準和指南都推薦使用這些屬性來防止與在新標簽頁打開鏈接相關的潛在安全風險。例如，OWASP（開放式Web應用程序安全項目）的安全建議中就包含了對這種安全設置的強調。
標籤： 頁面 安全 打開 設置 屬性 target_blank屬性值
相關文章
