在新選項(xiàng)卡中打開外部鏈接時(shí)，rel =“ noopener noreferrer”用於安全性和隱私； 1。 rel =“ noopener”可防止新頁(yè)面訪問窗口。開機(jī)對(duì)象，阻止其操縱原始頁(yè)面； 2。 rel =“ noreferrer”包括NOOPENER功能，並防止引用器標(biāo)頭髮送，以保持源URL私有； 3。使用兩者都是常見但多餘的，因?yàn)镹oreferrer已經(jīng)暗示了Nooopener。 4。這些屬性應(yīng)與target =“ _ blank”一起使用，以防止安全風(fēng)險(xiǎn)並保護(hù)推薦數(shù)據(jù)； 5。對(duì)於內(nèi)部鏈接，用法是可選的，但無害。這種實(shí)踐可以增強(qiáng)安全性和用戶隱私。

當(dāng)您在HTML鏈接中看到rel="noopener noreferrer"時(shí)，它是添加到<a></a>標(biāo)籤的安全性和性能相關(guān)的屬性，尤其是當(dāng)使用target="_blank" （在新的選項(xiàng)卡或窗口中打開鏈接）時(shí)。讓我們分解每個(gè)部分的含義及其重要的原因。

？什麼是rel="noopener" ？

rel="noopener"用於防止新頁(yè)面獲得對(duì)window.opener控制。

當(dāng)您打開target="_blank"的鏈接而沒有rel="noopener"時(shí)，新頁(yè)面在與您的頁(yè)面相同的過程中運(yùn)行，並且可以訪問window.opener對(duì)象。這意味著它可以從技術(shù)上瀏覽您的原始頁(yè)面（例如，通過window.opener.location = ...更改其URL - 潛在的安全風(fēng)險(xiǎn)。

使用rel="noopener"確保新頁(yè)面無法訪問開啟器窗口，從而使您的網(wǎng)站更安全。

例子：

 <a href =“ https://example.com” target =“ _ blank” rel =“ noopener”>
  開放地點(diǎn)
</a>

現(xiàn)在，即使example.com嘗試運(yùn)行window.opener.location.replace(...) ，它也無法正常工作 - window.opener將是null 。

？注意：當(dāng)鏈接進(jìn)入外部或不信任的站點(diǎn)時(shí)，主要需要rel="noopener" 。

？什麼是rel="noreferrer" ？

rel="noreferrer"進(jìn)一步：

• 它意味著noopener （因此， window.opener也被阻止）。
• 它可以防止引用標(biāo)頭髮送到目標(biāo)站點(diǎn)。

這意味著目的地網(wǎng)站不知道用戶來自何處 - 您的網(wǎng)站的URL私有。

用例：鏈接到外部站點(diǎn)時(shí)，您可能會(huì)使用此案例，並且您不希望它們?cè)诜治鲋锌吹侥挠颉?/p>

 <a href =“ https://example.com” target =“ _ blank” rel =“ noreferrer”>
  私人鏈接
</a>

??權(quán)衡權(quán)衡：如果您使用noreferrer ，則流量將在目標(biāo)站點(diǎn)的分析中顯示為“直接”或“未知”。

?你應(yīng)該兩者都使用嗎？ rel="noopener noreferrer"

是的，有時(shí) - 但實(shí)際上是多餘的。

• noreferrer在大多數(shù)瀏覽器中都已經(jīng)包含了noopener的行為。
• 因此，如果您需要安全性和隱私，則rel="noreferrer"就足夠了。
• 但是，許多開發(fā)人員仍然寫rel="noopener noreferrer"只是為了明確或與較舊的工具兼容。

 <！ - 常見的模式，略有冗餘但安全 - >
<a href =“ https://example.com” target =“ _ blank” rel =“ noopener noreferrer”>
  安全的外部鏈接
</a>

？您什麼時(shí)候應(yīng)該使用這些？

每當(dāng)您在外部鏈接上使用target="_blank"時(shí)，請(qǐng)使用rel="noopener" （或noreferrer ），尤其是：

• 鏈接到第三方網(wǎng)站
• 用戶生成的內(nèi)容（例如，評(píng)論，論壇）
• 會(huì)員鏈接您不信任目的地

對(duì)於內(nèi)部鏈接（同一站點(diǎn)），這一點(diǎn)不太關(guān)鍵，但不會(huì)受到傷害。

??rel rel="noopenner"單獨(dú)呢？

是的，只需rel="noopener"就足以滿足大多數(shù)安全需求。它阻止了window.opener而無需隱藏推薦信息。

tl; dr

• rel="noopener" →阻止window.opener訪問（安全/性能）
• rel="noreferrer" →塊推薦人信息，並包括noopener
• 在外部鏈接上使用rel="noopener" （或noreferrer ）與target="_blank"
• rel="noopener noreferrer"很常見，但略有多餘

基本上，這是更安全的外部鏈接的最佳做法。

以上是rel =' noopener noreferrer”是什麼意思？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！