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

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

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

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

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

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

mark點怎麼設置及設置例子

mark點怎麼設置及設置例子

mark 元素用於標記或高亮文本,非常適合用於文本搜索和結果導航。要在文本中使用 mark 元素,只需要將需要高亮的文本放在 mark 元素內即可。通常情況下,瀏覽器默認為高亮文本設置為黃色。 .highlight {    background-color: lightblue;    color: white;  }```上述代碼會將 mark 元素的背景顏色設置為淺藍色,文本顏色設置為白色。根據實際需要,您可以將顏色更改為您想要的顏色。…

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

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

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

javascript怎麼改變字體顏色文本顏色代碼

javascript怎麼改變字體顏色文本顏色代碼

這裏是一個簡單的 JavaScript改變文體顏色代碼示例,它會在頁面上創建一個按鈕,點擊該按鈕會使文本顏色發生變化。這段代碼首先在頁面中創建了一個按鈕,然後獲取該按鈕和一個段落元素的引用,接著為按鈕添加了一個事件監聽器,當按鈕被點擊時,段落文本顏色將變成紅色。…

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

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

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

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

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

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