网页的外部链接使用了target="_blank"，结果很惨。今天给大家分享一个web知识点。如果您从事Web开发已有一段时间，您可能已经知道这一点。不过对于刚接触的新人来说，了解一下还是很有必要的。我们知道网页中的a标签默认为当前窗口中的链接地址。如果需要在新窗口打开，需要在a标签中添加target="_blank"属性。1024翻译站顺带提下一个有趣的现象。很久以前就发现，国外的网站倾向于跳转到当前页面，而国内的网站喜欢打开新窗口。如果你不相信我，你可以验证它。不知道这是交互设计的文化差异，还是技术开发习惯。当然，这两种方法各有利弊。跳转到当前页面让操作更加连贯，不会贸然打断用户的注意力，同时也会减少浏览器的窗口（标签页）数量。但是对于需要反复返回初始页面的场景，就很麻烦了。例如，在搜索结果页面上，通常需要查看比较几个目标地址，所以将它们放在多个窗口中会更方便。我今天要谈的不仅仅是用户体验上的差异，而是安全性和性能上的差异。安全隐患如果只是加上target="_blank"，在打开一个新窗口后，新页面可以通过window.opener获取到源页面的window对象，即使是跨域的。虽然跨域页面对这个对象的属性的访问有限制，但是还是有漏网之鱼。这是打开新窗口的网页的页面控制台输出。你可以看到window.opener的一些属性。由于跨域安全策略的限制，某些属性的访问被阻止。即便如此，一些操作仍然有机会可以利用。例如修改window.opener.location的值指向另一个地址。想想看，刚才是在浏览某个网站，然后又打开了一个新窗口。结果新窗口不知不觉就把原来的网页地址给改了。这有什么用？钓鱼！当您返回钓鱼页面时，它已经伪装成登录页面，您可能会迷迷糊糊地输入帐号密码。还有一种玩法，如果你已经登录了，有些操作可能只能通过发送GET请求来完成。通过修改地址，执行了非本意的操作，实际上是CSRF攻击。性能问题除了安全风险，还可能存在性能问题。target="_blank"打开的新窗口与原页面窗口共享一个进程。如果这个新页面执行了大量性能不佳的JavaScript代码，占用了大量系统资源，您的原始页面也会受到影响。解决办法是尽量不要使用target="_blank"。如果一定要用，需要加上rel="noopener"或者rel="noreferrer"。这样新窗口的window.openner为null，新窗口将运行在一个独立的进程中，不会拖拽原页面的进程。但是，某些浏览器已优化性能。即使不加这个属性，新窗口也会在独立进程中打开。但是为了安全起见，还是加上吧。我用自己的博客网站http://www.kaysonli.com/试了一下，点击里面的外部链接打开新页面，window.openner全是null。查看页面元素，发现a标签都添加了rel="noreferrer"。博客是用Hexo生成的，看来这个设置已经成为常识了。另外，对于window.open打开的新页面，可以这样做：_空白的”;希望这个小技巧对你有用。
