『前端安全』—— 友情链接捅你一刀没商量

一、友情链接

友情链接是指互相在自己的网站上放对方网站的链接。必须要能在网页代码中找到网址和网站名称，而且浏览网页的时候能显示网站名称，使得用户可以从合作网站中发现自己的网站，达到互相推广的目的。

友情链接一般用a链接来实现，放置在门户网站的最下方。

<a href="https://www.xxx.com/" target="_blank">xxx网站</a>

二、刀在哪里

友情链接捅你一刀没商量，那刀在哪里？刀就是 window.opener !

window.opener是什么呢？用一个例子来介绍。

比如在A页面中通过a链接打开B页面，在B页面中可以window.opener访问到A页面的window对象。

三、怎么捅

比如可以在B页面中：

• 执行 window.opener.location.href='https://www.xxx.com/'，在页面A中打开一个跟A页面一模一样的页面，诱导用户进行输入密码等不安全的操作；

• 执行 window.opener.document.getElementsByTagName('body')[0].innerHTML= '捅你一刀没商量'; 改变页面A中的内容；

等等可以通过window对象进行的恶意操作。

四、怎么防

给 a 标签加上 rel = "noopener"，例如

<a href="https://www.xxx.com/" rel = "noopener" target="_blank">
	xxx网站
</a>

rel=noopener支持chrome49和opera36，不支持火狐，为了兼容需要加上rel=noreferrer。

<a href="https://www.xxx.com/" rel = "noopener noreferrer" target="_blank">
	xxx网站
</a>

五、扩展

如果用js打开外链呢？

function openUrl(url) {
  let open = window.open();
  open.opener = null;
  open.location= url;
}

浏览器不兼容上面的作法呢？

function openUrl(url) {
  let a = document.createElement('a');
  a.rel = 'noopener noreferrer';
  a.target = "_blank";
  a.href = url;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}