rel="noopener noreferrer"

`rel="noopener noreferrer"` 是HTML中的一個屬性設置,用於增加鏈接的安全性。當你在一個網頁中創建一個指向另一個網頁的鏈接時,這個屬性可以幫助防止某些潛在的安全風險。

rel="noopener"

rel="noopener noreferrer"

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

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

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

`<mark>` 元素的主要功能是突出顯示文本中的重要部分或關鍵字。在 HTML5 標準中,`<mark>` 元素用於標記一個文檔或一個段落中需要突出顯示的文本。一旦在 HTML 文件中使用了 `<mark>` 元素,瀏覽器通常會使用黃色背景標記該元素的文本,在頁…

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> 偽元素來設置顏色…

mark點怎麼設置及設置例子

mark點怎麼設置及設置例子

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

css高亮效果,CSS 創建不同高亮效果具體方法及例子

css高亮效果,CSS 創建不同高亮效果具體方法及例子

CSS 可以為  元素創建各種不同的高亮效果,具體方法如下:1. 使用默認的高亮樣式。可以通過樣式修改  元素的背景色和文本顏色,實現自定義高亮效果,例如:```html這是一段需要高亮的文本,這裏面的文本被自定義高亮了,這裏又是正常的文本。.highlight {  …