聊聊a标签的rel="noopener"

2019-11-17 21:57:26

记一下noopener属性用途

属性作用的页面示例

页面代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a</title>
</head>
<body>
    <a href="b.html" target="_blank">b</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>b</title>
</head>
<body>
    <script>window.opener.location.href ="http://baidu.com"</script>
</body>
</html>

点击a页面的b链接打开新页面后会发现a页面已经跳转至百度了..

why?

target="_blank"存在一个安全漏洞,新的页面可以通过window.opener访问窗口对象,并可以使用window.opener.location = newURL 将页面导航至不同的网址。(可能有被钓鱼攻击的风险)

如何规避

使用targrt=_blank时加上rel=noopener,为了兼容火狐要加上rel=noreferrer


<a href="www.baidu.com" target="_blank" rel="noopener norefferrer">
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码

评 论:

好文推荐
每天进步一点点~