什么是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作用区别

公众号 「老蒋朋友圈」获取站长新知 / 加QQ群 「706011751」 获取商家优惠推送