ESLint之jsx-no-target-blank

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

Terms & Conditions

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

危险的target='_blank'

​ 假设在浏览A页面时，通过Click标签链接到了B页面，那么在B页面中通过window.reopner即可获取A页面的window对象，这样的话即可拿到部分的A页面的控制权，即使B页面是跨域的也可以拿到该控制权！

​ 我们编写两个页面进行简单的测试，A页面（index.html）中有一个标签，以及一个’待宰割‘的

：

    


    

    Click

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

    


    Test page
    

​ 测试结果显示A页面

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

使用rel=noopener noreferrer

​ 给标签添加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