noopener和noreferrer

ESLint的确是个好东西,在使用airbnb的JavaScript语法校验工具时,如下的<a>链接标签报出了安全错误:

<a className="link" href="http://www.honeywell.com/terms-conditions" target="_blank" >Terms & Conditions</a>

​ 错误提示为Prevent usage of unsafe target='_blank' (react/jsx-no-target-blank),当我们希望使用target=_blank来打开一个新标签页时,一定要加上rel='noreferrer noopener',否则你的网页就会存在很严重的安全问题!!!

危险的target='_blank'

​ 假设在浏览A页面时,通过<a target="_blank" href="http://baidu.com/">Click</a>标签链接到了B页面,那么在B页面中通过window.reopner即可获取A页面的window对象,这样的话即可拿到部分的A页面的控制权,即使B页面是跨域的也可以拿到该控制权!

​ 我们编写两个页面进行简单的测试,A页面(index.html)中有一个<a>标签,以及一个’待宰割‘的<div id='test'></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
</head>
<body>
    <div id="test"></div>
    <a href="./test.html" target="_blank">Click</a>
</body>
</html>

​ B页面(test.html)中添加如下的js代码来试图篡改A页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
</head>
<body>
    Test page
    <script type="application/javascript">
      if (window.opener) {
//      opener.location = 'http://baidu.com'
        opener.document.getElementById('test').innerHTML = 'Now A page is revised!';
      }
    </script>
</body>
</html>

​ 测试结果显示A页面<div>标签被篡改了。该例子还只是简单的页面内容改动,但如果有人恶意的使用opener.location将A页面跳转到一个钓鱼网站,而此时用户的关注点还在B页面上,等用户返回’A页面’输入了隐私信息,那么后果不堪设想。

使用rel=noopener noreferrer

​ 给<a>标签添加rel=noopener可以使window.opener在Chrome 49 and Opera 36以上版本中为null。如果点击A页面上的链接跳转到了B页面,则称A页面为B页面的referrer(来源页面),通过referrer我们可以知道网站的流量从何而来。

​ 注:可以通过document.referrer拿到页面的来源

参考

https://mathiasbynens.github.io/rel-noopener/

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md

知识共享署名4.0国际许可协议,转载请保留出处; 部分内容来自网络,若有侵权请联系我:前端学堂 » noopener和noreferrer

赞 (2) 打赏

评论 0

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏