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

2024-09-30雲端運算與程式碼1713

`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"`屬性” 的相關文章

html a標簽target屬性

html a標簽target屬性

HTML語言中的標簽用於定義超鏈接。其中,標簽有一個屬性叫做target,它用於指定鏈接在何處打開。目前,標簽的target屬性有以下四個取值:- _self:鏈接會在當前窗口中打開(默認值),這意味著打開新的文檔或資源時,頁面會在當前瀏覽器窗口中重新加載,並將新文檔或資源顯示在當前窗口中。基於以上…

mark元素使用紅色代表及例子

mark元素使用紅色代表及例子

在 HTML 中,<mark> 元素用於標記或突出顯示文本中的重要或關鍵內容。為了提高用戶瀏覽體驗,這些文本內容通常被渲染成鮮艷的紅色,因為紅色是視覺上最吸引人的顏色之一。 舉個例子,在一篇文章中,我們可能會用 <mark> 標記來標記一段關鍵文字,如下所示:<…

meter元素顏色,可以使用CSS樣式來設置顏色

meter元素顏色,可以使用CSS樣式來設置顏色

meter元素可以用於表示已知範圍內的度量值,可以使用CSS樣式來設置顏色。具體來說,可以使用 <code>::-webkit-meter-optimum-value, ::-moz-meter-bar, ::-webkit-meter-bar</code> 偽元素來設置顏色…

用html和CSS3制作酷炫的導航欄代碼及例子

用html和CSS3制作酷炫的導航欄代碼及例子

使用HTML5和CSS3的新特性可以制作出很多酷炫的導航欄效果,例如下拉菜單、響應式導航欄、帶有動態效果的導航欄等等。下面以下拉菜單為例,具體步驟如下:1. 創建 HTML 結構;2. 設置基本樣式;3. 添加動態效果。這樣就可以制作出下拉菜單效果,當滑鼠懸停在菜單項上時,菜單項下面的下拉菜單顯示出…

HTML標簽屬性大全及代碼例子

HTML標簽屬性大全及代碼例子

在HTML中,屬性是在標簽中使用的特殊命令,它們提供了額外的信息以更好地描述標簽的內容和行為。屬性名表示該屬性的名稱,而屬性值表示該屬性要設置的值。HTML標簽屬性有很多種類和用途,它們可以影響標簽的內容、顏色、尺寸、超鏈接、樣式、表單等方面。一些常見的HTML標簽屬性包括:class、id、sty…

HTML網頁制作模板代碼學習

HTML網頁制作模板代碼學習

如果你想學習制作網頁,那麼學習HTML網頁制作模板代碼就是一個非常不錯的開始。在本文中,我們將為大家提供一些HTML網頁制作模板代碼的示例,幫助大家快速入門網頁制作。在互聯網時代,網頁制作已經成為了越來越廣泛的技能。HTML是網頁制作中最基礎的語言之一,通過學習HTML網頁制作模板代碼,我們可以快速…