target=_blank为什么要使用rel=noopener

我们经常使用a标签用target='_blank'就完事了,是的,我曾经也是这么用的,直到今天测试一个在qq邮箱中用a标签在线打开一个文档时,就发现问题了,没有加rel='noopener',始终打不开文档,当加了此属性时就可以打开下载了。于是没办法只能瞅瞅该属性到底是个啥!

当你使用 target='_blank' 打开一个新的标签页时,新页面的 window 对象上有一个属性 opener,它指向的是前一个页面的 window 对象,因此,后一个页面就获得了前一个页面的控制权。

比如的 a 标签是这样 <a href='/index.html'>打开连接</a> ,打开后在控制台输入 window.opener.alert() 看看?

甚至在跨域的情况下他也可以生效,比如打开 <a href='https://blog.csdn.net/jimolangyaleng'>链接<a/>后,你可以使用 window.opener.location.replace 更改前一个页面的 url。

那么,为了避免这种情况,所以我们通常会加上rel='noopener'或rel='noopener  norefferrer'

比如你的链接现在变成了这样 <a href='/index.html' rel=noopener>链接<a/> ,再打开后你会发现 window.opener 已经被置为了 null,如果是一些旧的浏览器,可以使用 rel=norefferrer,它不仅禁用了 window.opener,后一个页面也无法获取到 refferrer,再不行,可以利用 js 来打开新的页面,之后将 opener 置为 null 来完成这个功能

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章