此示例使用 HTML + Canvas 實現滑動拼圖驗證碼。Canvas繪制帶隨機缺口的背景，獨立滑塊按鈕監聽滑鼠/觸摸拖拽，實時將滑塊位置映射到Ca...
rel="noopener noreferrer"
雲端運算與程式碼
2024年04月16日 22:10 560
品悟
本文摘要
`rel="noopener noreferrer"`是HTML中的屬性設置，用於提升鏈接安全性。`noopener`防止新頁面通過`window.opener`訪問原始頁面，避免跨站腳本攻擊風險；`noreferrer`防止瀏覽器發送Referer頭部，保護用戶隱私。建議同時使用這兩個屬性，以確保用戶點擊鏈接時的安全性。在HTML鏈接中設置此屬性，可有效提升網頁安全性。
`rel="noopener noreferrer"` 是HTML中的一個屬性設置，用於增加鏈接的安全性。當你在一個網頁中創建一個指向另一個網頁的鏈接時，這個屬性可以幫助防止某些潛在的安全風險。
rel="noopener"
`noopener` 是一個用於防止新打開的窗口或標簽頁通過 `window.opener` 屬性訪問到原始頁面（即包含鏈接的頁面）的JavaScript對象的屬性。如果不設置這個屬性，那麽新打開的頁面可能會使用 `window.opener` 來讀取或修改原始頁面的內容，這可能會導致一些安全問題，如跨站腳本攻擊（XSS）。
rel="noreferrer"
`noreferrer` 是一個用於防止瀏覽器發送 HTTP Referer 頭部的屬性。Referer 頭部通常包含了用戶是從哪個頁面跳轉到當前頁面的信息。在某些情況下，這可能會泄露用戶的隱私或敏感信息。通過設置 `noreferrer`，你可以確保瀏覽器不會發送這個頭部，從而增加用戶隱私的保護。
結合使用
通常，為了增加安全性，建議將 `noopener` 和 `noreferrer` 一起使用，即 `rel="noopener noreferrer"`。這樣可以同時防止通過 `window.opener` 的訪問和防止發送 Referer 頭部。
示例
下面是一個使用 `rel="noopener noreferrer"` 的HTML鏈接示例：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">點擊訪問</a>
在這個示例中，當用戶點擊鏈接時，會在一個新的瀏覽器窗口或標簽頁中打開 `https://example.com`，並且由於設置了 `rel="noopener noreferrer"`，這個新頁面將不能通過 `window.opener` 訪問原始頁面，同時瀏覽器也不會發送 Referer 頭部。
標籤： rel 頁面 noopener noreferrer 屬性 頭部
相關文章
