阅读 5006

慎用target="_blank"

网页里的a标签默认在当前窗口跳转链接地址,如果需要在新窗口打开,需要给 a 标签添加一个target="_blank"属性。 例:

<a target="_blank" href="https://weibo.com/">打开微博页面</a>
复制代码

1 安全隐患

如果只是加上target="_blank",打开新窗口后,新页面能通过window.opener获取到来源页面的window对象,即使跨域也一样。

某些属性的访问被拦截,是因为跨域安全策略的限制。 但是,比如修改window.opener.location的值,指向另外一个地址。

即可以造成刚刚还是在某个网站浏览,随后打开了新窗口,结果这个新窗口神不知鬼不觉地把原来的网页地址改了。此时,就可以通过页面伪装,比如伪装成登陆页等,来让用户输入账号密码,从而到达黑客的目的。

2 性能问题

通过target="_blank"打开的新窗口,跟原来的页面窗口共用一个进程。如果这个新页面执行了一大堆性能不好的 JavaScript 代码,占用了大量系统资源,那你原来的页面的性能也会收到影响。

3 解决方案

  1. 尽量不使用target="_blank"
  2. 如果一定要用,需要加上rel="noopener"或者rel="noreferrer"。这样新窗口的window.openner就是null了,而且会让新窗口运行在独立的进程里,不会拖累原来页面的进程。(不过,有些浏览器对性能做了优化,即使不加这个属性,新窗口也会在独立进程打开。不过为了安全考虑,还是加上吧。)

  1. 通过window.open的方式打开的新页面:
var newWindow = window.open();
newWindow.opener = null;
newWindow.location = "https://weibo.com/";
newWindow.target = "_blank";
复制代码