1. noopener
如果你需要用 a 标签打开一个标签页时,你会使用 target='_blank' 这个属性,此时你需要添加 rel='noreferrer noopener'
当你使用 target='_blank'
打开一个新的标签页时,新页面的 window
对象上有一个属性 opener
,它指向的是前一个页面的 window
对象,因此,后一个页面就获得了前一个页面的控制权,so 可怕!!
比如的 a 标签是这样 <a href="/index" target="_blank">打开连接</a>
,打开后在控制台输入 window.opener.alert(1)
看看?
甚至在跨域的情况下他也可以生效,比如打开
<a href='https://github.com/ZhangFe/Blog' target="_blank">链接<a/>
后,
window.opener.location.replace
更改前一个页面的 url。
那么,为了避免这种情况,就需要咱们的主角登场了!
比如你的链接现在变成了这样 <a href='/index' rel=noopener>链接<a/>
,再打开后你会发现 window.opener
已经被置为了 null,如果是一些旧的浏览器,可以使用 rel=noreferrer
,它不仅禁用了 window.opener
,后一个页面也无法获取到 referrer
,再不行,可以利用 js 来打开新的页面,之后将 opener
置为 null
来完成这个功能
var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = url;
2. nofollow
nofollow 是HTML的一个属性,用于告诉搜索引擎不要追踪特定的网页链接。可以用于阻止在PR值高的网站上以留言等方式添加链接从而提高自身网站排名的行为,以改善搜索结果的质量,防止垃圾链接的蔓延。网站站长也可对其网页中的付费链接使用nofollow来防止该链接降低搜索排名。对一些重要度低的网页内容使用nofollow,还可以使搜索引擎以不同的优先级别来抓取网页内容。