聊聊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">
本文链接:

评 论:

本站博客小程序
博主推荐
微信扫码关注「极客之路」
领取学习礼包
每天进步一点点~ 本站博客小程序已上线,微信搜索"薛定喵君的博客"或者在右上角找一找小程序二维码扫码直达