本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

745

关于a标签target_blank使用rel=noopener

编程技术 | WangTwoThree | 2021-07-14 | 等你评论 | 0 次点赞

一、为什么要使用 rel='noopener'

先举个栗子,有以下两个页面

a.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>
    <a href="b.html" target="_blank">da</a>
</body>
</html>

b.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 就是让用户暴露在钓鱼攻击上。

图片alt

二、使用 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 提示

图片alt

eslint 提示后根据文档实际尝试了一下,之前忽略的小问题居然还有这么大安全问题,网络安全不可小觑。

via:
关于 a 标签 target_blank 使用 rel=noopener - 简书
https://www.jianshu.com/p/c8319e095474


猜你喜欢

暂无评论

有话要说

本页二维码

扫码手机打开

浏览TOP5
热门标签
点赞TOP5
最新评论
别人在看