当前位置:主页 > 网站开发 >正文

关于a标签target_blank利用rel=noopener的浸染

作者: 丈哥 分类: 网站开发 发布时间: 2020-10-09 17:17

一、为什么要利用rel='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>Document</title>
</head>
<body>
    <a href="b.html" target="_blank">da</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>Document</title>
</head>
<body>
    <SCRIPT>window.opener.location.href ="http://google.com"</SCRIPT>
</body>
</html>
个中在a.html中有个超链接,点击后打开新的tab页,神奇的发明原tab页已经酿成了谷歌页面。原因是利用target=_blank打开新的窗口时,赋予了新的窗口一些权限可以操纵原tab页,个中window.location就是一个。不利用 rel=noopener就是让用户袒露在垂纶进攻上。


二、利用rel=noopener

为了防备window.opener被滥用,在利用targrt=_blank时需要加上rel=noopener
<a href="www.baidu.com" target="_blank" rel="noopener" >

三、rel=norefferrer

rel=noopener支持chrome49和opera36,不支持火狐,为了兼容需要加上rel=noreferrer
<a href="www.baidu.com" target="_blank" rel="noopener norefferrer" >


四、eslint提示


eslint提示后按照文档实际实验了一下,之前忽略的小问题居然尚有这么大安详问题,网络安详不行小觑。

参考文章:eslint提示的官方文档



本文链接地址:https://www.0471seo.com/web/4945.html
  • 上一篇:<<利用摩天楼内容助手,从零排名到首页的实战案例分享

  • 下一篇:没有下一篇了>>
  • 如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!