search

JesseZhao1990 / blog

learing summary
MIT License
62 stars 7 forks source link

rel=noopener #146

Open JesseZhao1990 opened 6 years ago

JesseZhao1990 commented 6 years ago

是什么？

当你使用 target='_blank' 打开一个新的标签页时，新页面的 window 对象上有一个属性 opener，它指向的是前一个页面的 window 对象, 也就是说在新页面有了访问原来页面的信息的权限，甚至可以控制原来页面的跳转。

举例说明一下 a页面

<html>
    <head></head>
    <body>
        <div>这是a页面</div>
        <a href="b.html" target="_blank">点击进入b页面</a>
    </body>
</html>

b页面

<html>
    <head></head>
    <body>
        <div>这是b页面，在这个页面里控制a页面跳转到百度</div>
    </body>
    <script type="text/javascript">
        window.opener.location.replace('https://www.baidu.com');
    </script>
</html>

点击a页面的按钮，会打开一个新的tab。此次再看看旧页面。已经跳转到百度了。这是一个安全漏洞

怎么防御?

为了阻止跳转页拿到前一个月页面的window对象。我们可以使用 rel=noopener. 这保证了window.opener 为空。对于旧的浏览器。你可以使用rel=noreferrer，或者是使用js脚本的方式跳转。

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;

参考资料：https://mathiasbynens.github.io/rel-noopener/#hax