什么是noopener属性？noopener noreferrer作用区别

1、什么是noopener

noopener 是一个 HTML 属性，它在超链接（<a> 标签）中使用，目的是防止恶意网页通过 window.opener 属性访问打开链接页面的窗口对象。如果没有添加 noopener 属性，在某些情况下攻击者可能会通过修改新窗口的window.opener属性来进行攻击，例如在新窗口中运行恶意脚本或者通过该窗口获取敏感信息。因此，为了增加安全性，建议在所有外部链接中都添加 noopener 属性。

2、noopener 属性的用法

noopener 属性可以通过在超链接标签的 target 属性中设置为 _blank 来使用。例如：

<a href="https://www.laojiang.me" target="_blank" rel="noopener">点击这里</a>

在上面的示例中，当用户单击链接时，将会打开一个新窗口，并且在该窗口中访问 https://www.laojiang.me 网站时将会添加 noopener 属性，以防止恶意网页通过 window.opener 属性访问打开此链接的页面。

需要注意的是，noopener 属性只能保护新打开的窗口，如果您的网页中存在其他类型的弹出窗口，您也应该采取适当的措施来确保安全性。

3、noopener noreferrer作用

noopener noreferrer 是一个 HTML 属性，它在超链接（<a> 标签）中使用。它同时具有 noopener 和 noreferrer 两个属性的作用。

其中，noopener 的作用是阻止新打开的窗口通过 window.opener 属性访问其来源页面的对象，从而提高了安全性。

而 noreferrer 则是防止浏览器向目标网站传递来源信息，即不会把 Referer HTTP 头部信息发送到目标网站，这样在一定程度上保护了用户的隐私。

因此，如果您希望在超链接中同时实现以上两种作用，可以使用 noopener noreferrer 属性。例如：

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">点击这里</a>

需要注意的是，noreferrer 属性可能会影响某些网站的统计数据，因为这些网站无法获取到来源信息。但出于安全和隐私方面的考虑，建议您在需要时仍然使用 noreferrer 属性。

未经允许不得转载：老蒋玩运营 » 什么是noopener属性？noopener noreferrer作用区别