网页外链用了 target="_blank"，结果悲剧了

今天给你们分享一个 Web 知识点。若是你有过一段时间的 Web 开发经验，可能已经知道了。不过对于刚接触的新手来讲，仍是有必要了解一下的。

咱们知道，网页里的a标签默认在当前窗口跳转连接地址，若是须要在新窗口打开，须要给 a 标签添加一个target="_blank"属性。

<a href="http://kaysonli.com/" target="_blank">1024译站</a>
复制代码

顺便提下一个有意思的现象，很早以前我就发现，国外网站倾向于在当前页跳转，而国内网站喜欢打开新窗口。不信大家能够去验证下。我不知道这是交互设计上的文化差别，仍是技术上的开发习惯。

固然，这两种方式各有优缺点。当前页跳转显得操做比较有连贯性，不会贸然打断用户的注意力，也会减小浏览器的窗口（tab 页）数量。可是对于须要反复回到初始页面的场景来讲，就很麻烦了。好比搜索结果页面，一般须要查看对比几个目标地址，保留在多个窗口仍是比较方便。

今天要说的不仅是用户体验上的差异，而是涉及安全和性能。

安全隐患

若是只是加上target="_blank"，打开新窗口后，新页面能经过window.opener获取到来源页面的window对象，即便跨域也同样。虽然跨域的页面对于这个对象的属性访问有所限制，但仍是有漏网之鱼。

这是某网页打开新窗口的页面控制台输出结果。能够看到window.opener的一些属性，某些属性的访问被拦截，是由于跨域安全策略的限制。

即使如此，仍是给一些操做留下可乘之机。好比修改window.opener.location的值，指向另一个地址。你想一想看，刚刚仍是在某个网站浏览，随后打开了新窗口，结果这个新窗口神不知鬼不觉地把原来的网页地址改了。这个能够用来作什么？钓鱼啊！等你回到那个钓鱼页面，已经假装成登陆页，你可能就稀里糊涂把帐号密码输进去了。

还有一种玩法，若是你处于登陆状态，有些操做可能只是发送一个GET请求就完事了。经过修改地址，就执行了非你本意的操做，其实就是 CSRF 攻击。

性能问题

除了安全隐患外，还有可能形成性能问题。经过target="_blank"打开的新窗口，跟原来的页面窗口共用一个进程。若是这个新页面执行了一大堆性能很差的 JavaScript 代码，占用了大量系统资源，那你原来的页面也会受到池鱼之殃。

解决方案

尽可能不使用target="_blank"，若是必定要用，须要加上rel="noopener"或者rel="noreferrer"。这样新窗口的window.openner就是null了，并且会让新窗口运行在独立的进程里，不会拖累原来页面的进程。固然，有些浏览器对性能作了优化，即便不加这个属性，新窗口也会在独立进程打开。不过为了安全考虑，仍是加上吧。

我特地用本身的博客网站 1024译站 试了一下，点击里面的外链打开新页面，window.openner都是null。查看页面元素发现，a标签都加上了rel="noreferrer"。博客是用 Hexo 生成的，看来这种设置已经成了基本常识了。

另外，对于经过window.open的方式打开的新页面，能够这样作：

var yourWindow = window.open();
yourWindow.opener = null;
yourWindow.location = "http://someurl.here";
yourWindow.target = "_blank";
复制代码

更多前端技术干货尽在微信公众号：1024译站