target_blank屬性值以及`rel="noopener noreferrer"`屬性

2024-09-30Cloud computing and code1690

`target="_blank"`是HTML中的一個屬性值,用於在超鏈接(`<a>`標簽)中。

1. 主要作用

target_blank屬性值以及`rel="noopener noreferrer"`屬性

   - 當設置了`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屬性值以及`rel="noopener noreferrer"`屬性” 的相關文章

mark元素的主要功能及在HTML5 中的使用mark元素例子

mark元素的主要功能及在HTML5 中的使用mark元素例子

`<mark>` 元素的主要功能是突出顯示文本中的重要部分或關鍵字。在 HTML5 標準中,`<mark>` 元素用於標記一個文檔或一個段落中需要突出顯示的文本。一旦在 HTML 文件中使用了 `<mark>` 元素,瀏覽器通常會使用黃色背景標記該元素的文本,在頁面渲染上具有很好的效果。`<mark>` 元素還可以用於添加額外的視覺標識,以使讀者更快地識別重要內容。通過指定不同的顏色樣式,可以將文本突出顯示,以吸引讀者的註意力。…

視頻嵌入代碼,簡單的 video 嵌入代碼例子

視頻嵌入代碼,簡單的 video 嵌入代碼例子

視頻嵌入代碼,簡單的 video 嵌入代碼例子:- height:視頻高度。- controls:為 true 時,添加視頻控制條。- source:指定視頻文件路徑和類型,可支持多種類型。- Your browser does not support the video tag:如果用戶的瀏覽器不支持 HTML5  標記,則會顯示此消息。值得註意的是,這種視頻嵌入方式可能會因為用戶瀏覽器兼容性問題而無法播放,因此可能需要添加備用方案,如 Flash 等。同時,需要根據實際情況調整視頻的寬高比例、大小和文件大小等參數,以便更好地適配不同的設備和網絡環境。…

HTML 和 CSS 實現網頁導航欄和下拉菜單

HTML 和 CSS 實現網頁導航欄和下拉菜單

以下是一組基於 HTML 和 CSS 實現網頁導航欄和下拉菜單的完整代碼:HTML 代碼:CSS 代碼。該代碼實現了一個簡單的網頁導航欄和下拉菜單,其中 `nav` 表示導航欄,`ul` 表示菜單,`li` 表示菜單項,`a` 表示鏈接。通過設置 CSS 樣式,將菜單項設置為了懸停時出現下拉菜單,同時用絕對定位實現了下拉菜單的顯示。在實際應用中,可能需要更多的樣式和JavaScript交互來完善導航欄和下拉菜單的功能。…

JS跳轉頁面代碼及例子

JS跳轉頁面代碼及例子

JS跳轉頁面是一種很常見的前端交互技術,下面是幾種跳轉頁面的方式:1. 直接修改 `window.location.href` 屬性,2. 使用 `window.location.replace` 方法,此方法會替換當前頁面歷史記錄,不會在瀏覽器歷史記錄中留下痕跡。3. 使用 `window.open` 方法在一個新的瀏覽器窗口或標簽頁中打開一個頁面,4. 如果你需要在某個時間間隔後自動跳轉到目標頁面,可以使用 `setTimeout` 函數。…

一個簡單的html結婚特效的代碼

一個簡單的html結婚特效的代碼

以下是一個簡單的html結婚特效的代碼:1. 使用html和css定義了一個結婚的基本樣式;2. 分別定義新娘和新郎,並使用background-image設置其背景圖;3. 定義一個心形圖案,並使用animation讓其跳動。…

html5菜鳥教程學習基本步驟

html5菜鳥教程學習基本步驟

以下是HTML5的菜鳥教程:1. 概述和基礎知識 了解HTML5的概念和新特性;熟悉HTML文件結構、標簽、元素和屬性;掌握HTML5的語義化標簽。2. 視頻和音頻 學習如何在網頁中嵌入視頻和音頻,使用video和audio標簽;熟悉媒體控制、字幕等相關屬性。3. 畫布和圖像 掌握使用canvas繪制2D圖形;熟悉圖像處理技術,如像素控制、濾鏡等。4. 表單和輸入 學習HTML5表單元素的新特性,如日期、時間、搜索等;熟悉表單數據驗證、自動填充等功能。…