聊聊a标签的rel="noopener"
记一下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">本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-11-17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录