一、HTML：寻找“数据入口” (The Gate)
对于开发来说，HTML 是骨架。
对于安全来说，HTML 是 攻击载荷（Payload）的发射台。
在浏览了大量的教程后，我发现 90% 的标签（如 div, span, p）对于初级渗透来说只是噪音。我将精力死死锁定在了一个标签上：<form> 表单。
1. 为什么是 Form？
因为这是用户与服务器交互的核心通道。SQL 注入、文件上传、逻辑绕过，几乎都是从这里开始的。
2. 攻击者眼里的 Form 结构
我看代码时，只关注三个属性：
- action：“靶心在哪里？” 数据被送到了哪个后端文件（如 login.php）？这决定了我要攻击的目标。
- method：“子弹怎么飞？”
- GET：参数在 URL 里裸奔，容易被日志记录，但也容易修改。
- POST：参数藏在 HTTP Body 里，这也是我在 Burp Suite 里重点抓包的地方。
- input 的 name 属性：“参数名是什么？” 这是后端接收变量的依据（如 $_POST[‘username’]），也是我构造 SQL 注入语句的拼接点。
实战感悟：
以后看到一个输入框，我脑子里出现的不再是“请输入密码”，而是：
select * from users where username = ‘ [我的Payload] ‘
//Register.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Vito Register Page</title>
<style type=”text/css”>
div{
width: 310px;
background: #ccc;
padding: 20px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
h1{
text-align: center;
}
input{
width: 302px;
height: 30px;
border: 1px solid #333;
}
.submit{
width: 308px;
height: 30px;
border: 1px solid #333;
margin-top: 20px;
border-radius: 5px;
background: green;
color: #fff;
}
a{
text-decoration: none;
color: #222;
}
</style>
</head>
<body>
<div>
<h1>Vito Register Page</h1><hr>
<form action=”” method=”post” name=”form”>
Username:<br>
<input type=”text” name=”username”><br>
<!–为了使用户体验更好 加一个span标签–>
<span></span><br>
Password:<br>
<input type=”password” name=”password”><br>
<span></span><br>
Confirm Password:<br>
<input type=”password” name=”repass”><br><br>
<span></span><br>
<input type=”submit” name=”submit” class=”submit” value=”注册”>
</form>
<a href=”login.html”>已注册，去登录</a>
</div>
</body>
</html>
<script>
//获取元素
var form = document.forms[‘form’];
var username = form.elements[‘username’];
var password = form.elements[‘password’];
var repass = form.elements[‘repass’];
var span=form.getElementsByTagName(‘span’);
//表单验证
//1.用户体验
//获取焦点事件
username.onfocus = function (){
span[0].innerHTML=”;
}
//失去焦点时进行判断
username.onblur = function (){
var len = this.value.length;
if(len == 0){
span[0].innerHTML = (‘请输入用户名’);
span[0].style.color=’red’;
}
else if(len < 4 || len>18){
span[0].innerHTML = ‘帐号长度为4-18位！’;
span[0].style.color=’blue’;
}
else{
span[0].innerHTML = ‘✅’;
span[0].style.color=’green’;
}
}
//获取焦点事件
password.onfocus = function (){
span[1].innerHTML = ”;
}
password.onblur = function (){
var len = this.value.length;
if(len == 0){
span[1].innerHTML = (‘请输入密码’);
span[1].style.color=’red’;
}
else if(len < 4 || len>18){
span[1].innerHTML = ‘密码长度为4-18位！’;
span[1].style.color=’blue’;
}
else{
span[1].innerHTML = ‘✅’;
span[1].style.color=’green’;
}
repass.onfocus = function (){
span[2].innerHTML = ”;
}
repass.onblur = function (){
if(password.value != this.value){
span[2].innerHTML=’密码不一致’;
span[2].style.color = ‘red’;
}
else{
span[2].innerHTML = ‘✅’;
span[2].style.color = ‘green’;
}
}
}
//2.数据安全
form.onsubmit = function (){
if(
username.value.length ==0||
username.value.length < 4||
username.value.length >18||
password.value.length ==0||
password.value.length < 4||
password.value.length >18||
password.value != repass.value
){
console.log(‘false’);
return false;
}
}
</script>
二、JavaScript：操纵“傀儡” (The Puppet Master)
如果说 HTML 是静态的房子，那 JS 就是房子里的管家。
只要控制了 JS，我就能控制受害者的浏览器。这就是 XSS（跨站脚本攻击） 的本质。
今天的 JS 学习，我跳过了所有的算法逻辑，只死磕一个概念：DOM (文档对象模型)。
1. DOM 的本质
DOM 就是 JS 操作 HTML 的接口。
- 开发用它来做特效。
- 黑客用它来窃取数据。
2. 两个危险的 DOM 操作
在学习过程中，我重点复现了两个场景：
- 读取敏感信息： document.cookie。只要能让受害者的浏览器执行这行代码，Session ID 就到手了，这一步就是“杀人诛心”。
- 篡改页面内容： document.write() 或 innerHTML。这是 DOM 型 XSS 的高发区。如果后端没有过滤，我输入的 <script> 标签就会被当成代码执行。
实战感悟：
XSS 不仅仅是弹一个窗 alert(1) 那么简单，它的本质是 “JS 代码注入”。只要能运行 JS，浏览器里的秘密就都不是秘密了。
三、今日总结：构建“攻击面”思维
今天的学习让我明白，安全工程师看代码的视角是反直觉的：
- 正常思维： 这个功能怎么实现？
- 黑客思维： 这个输入框如果不按套路出牌会怎样？这个参数如果被我改了会怎样？
Day 4 的任务圆满结束。
HTML 表单是我的发射器，JS DOM 是我的遥控器。
(本文为个人学习笔记，仅供技术交流)