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

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

`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元素使用紅色代表及例子

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

在HTML中,<mark> 元素可以用於標記或強調文本中的重要或關鍵內容。這個元素通常會用醒目的紅色來渲染,因為紅色是一個視覺上非常具有註意力的顏色。在這種情況下,你可以將這些關鍵字用 <mark> 標簽包圍起來,使其突出顯示。這樣可以幫助用戶更快速地發現這個型號是這個品牌的…

mark點怎麼設置及設置例子

mark點怎麼設置及設置例子

mark 元素用於標記或高亮文本,非常適合用於文本搜索和結果導航。要在文本中使用 mark 元素,只需要將需要高亮的文本放在 mark 元素內即可。通常情況下,瀏覽器默認為高亮文本設置為黃色。 .highlight {    background-color: lightblue…

一個簡單的 HTML5 導航菜單的示例代碼

一個簡單的 HTML5 導航菜單的示例代碼

以下是一個簡單的 HTML5 導航菜單的示例代碼,這個導航菜單使用了 HTML5 中的 `nav` 標簽來包裝整個菜單,使用了 Flex 布局來對菜單進行布局和對齊,同時也設置了一些簡單的樣式來美化菜單。…

一個簡單的html放煙花特效的代碼

一個簡單的html放煙花特效的代碼

以下是一個簡單的html放煙花特效的代碼,代碼說明:1. 使用html和css定義了一個煙花的基本樣式;2. 使用javascript動態生成多個煙花元素,並使用animation讓其展開,模擬煙花爆炸效果;3. 使用setTimeout函數控制煙花爆炸持續時間,並使用setInterval控制煙花…

html5自學教程步驟及代碼例子

html5自學教程步驟及代碼例子

HTML5是最新的HTML標準,具有更多的功能和特性,讓網頁的制作更加靈活和多樣化。以下是HTML5自學教程的一些步驟:1. 學習HTML基礎知識。在深入學習HTML5之前,你需要先學習HTML的基礎知識,包括HTML文件結構、標簽、屬性和元素等。2. 熟悉HTML5的新特性。HTML5相比於之前的…