关于a标签的rel=nooppener

刚刚看到了一个前端方面的问题

html的a标签属性rel="noopener"有什么作用？

a标签用了这么久也没见过这个玩意儿, 真是惭愧, 所以特意研究了一下,写在这里作为笔记吧.

首先, rel=noopener 和 rel= noreferrer 这两个属性是为了解决安全性问题

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

甚至在跨域的情况下他也可以生效, 你可以通过 window.opener.location.replace 来更改前一个页面的url.

那么, 为了避免这种情况, 就需要使用这两个神奇的属性了.

比如你的链接是 <a href='/index' rel=noopener>链接 </a> , 打开之后你会发现 window.opener 已经被置为 null 了, 如果是一些旧的浏览器, 可以使用 rel=noreferrer, 它不仅禁用了 window.opener, 后一个页面也无法获取到 referrer.