苏南大叔在本文中,要分析两个比较罕见的属性值,分别是:noopenernoreferrer,是用在html的链接a里面的。本文比较水,心急的读者直接看结论就可以了。

苏南大叔:如何理解noopener和noreferrer?链接a的rel属性值 - html-noopener-noreferer
如何理解noopener和noreferrer?链接a的rel属性值(图4-1)

基础代码

对于链接到别人的网站的时候,最好是加上这两个属性值。例如:

<a href='http://sunan/' rel="noopener noreferrer" target="_blank">苏南大叔的另外一个网站</a>
注意拼写:opener中,er前面的n只有一个。referrer中,er前面的r是两个。

苏南大叔:如何理解noopener和noreferrer?链接a的rel属性值 - html-noopener-noreferer-code
如何理解noopener和noreferrer?链接a的rel属性值(图4-2)

noopener

不要传递opener信息,正常情况下来说,当一个网页给另外一个网页做了链接后,第二个网页就可以通过window.opener来获得对第一个网页的控制权。如果两者是相同域名下的两个网页的话,两者之前是可以完全控制的。如果两者是不同域名下的两个网页的话,第二个网页就可以获得非常有限的控制权限。注意:即使非常有限,但是也是有一点的危险性的。比如:

window.opener.close()

就是说:第二个第三方的网页,可以控制关掉前一个网页。是不是很可怕?

if(window.opener && !window.opener.closed) window.opener.close()

苏南大叔:如何理解noopener和noreferrer?链接a的rel属性值 - html-noopener-noreferer-js-code
如何理解noopener和noreferrer?链接a的rel属性值(图4-3)

两个网页不跨域,并不是停留在字面意义上,通过window.domain也是可以设置的。这个请参见后续的文章。

noreferrer

noreferrer这个属性值,就是用于不传递前一个页面的地址到后面的页面的。一般来说,对于第二个页面来说,referer值可以做很多判断,比如是否盗链。所以,这个值noreferer简直是bug级别的存在。更多信息,可以参考苏南大叔的这篇文章:

比如代码如下:

<a href='http://download/referer.zip' rel="noreferrer">下载某个软件</a>

苏南大叔:如何理解noopener和noreferrer?链接a的rel属性值 - html-noopener-noreferer-code-2
如何理解noopener和noreferrer?链接a的rel属性值(图4-4)

结论

在实践的过程中,可以发现:这两个值也不是万能的。譬如noreferrer这个rel属性的值,在某些浏览器下面,仍然是会发送referer的。所以,这两个值,请不要过分迷信它们的作用,也不要过分依赖它们。在实践中来看的话,并不是那么的可靠。

欢迎点击苏南大叔的博客,查看更多html知识:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   html5

本站的忠实读者小伙伴,正在阅读下面这些文章: