20222307 2024-2025-1 《网络与系统攻防技术》实验八实验报告
1.实验内容
(1)Web前端HTML
能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法，编写一个含有表单的HTML。
(2)Web前端javascipt
理解JavaScript的基本功能，理解DOM。
在（1）的基础上，编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”
尝试注入攻击：利用回显用户名注入HTML及JavaScript。
(3)Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
(4)Web后端：编写PHP网页，连接数据库，进行用户认证
(5)最简单的SQL注入，XSS攻击测试
(6)安装DVWA或WebGoat平台，并完成SQL注入、XSS、CSRF攻击。
2.实验过程
2.1Web前端HTML
2.1.1开启Apache服务
在kali 的浏览器中输入127.0.0.1，显示Apache默认网页，显示如下表示服务开启成功。
2.1.2创建含表单的html文件
使用指令进入Apache目录下cd /var/www/html并新建20222307login.html文件
并在浏览器中输入地址http://localhost/20222307login.html
2.1.3理解表单、GET与POST方法
表单：表单是HTML中用于收集用户输入的一种元素，通常包含输入框、下拉菜单、按钮等元素。用户可以在表单中输入数据，然后提交给服务器进行处理。
GET方法：
数据可见性：GET请求的数据会附加在URL之后，因此是可见的，可以 通过查看URL来看到传递的数据。
数据长度限制：由于URL长度的限制，GET请求传输的数据量有限。
数据类型限制：只能发送ASCII字符。
缓存和书签：GET请求可以被缓存和保存为书签。
安全性：由于数据在URL中可见，因此不安全，不适合传输敏感信息。
幂等性：GET请求被认为是幂等的，意味着多次执行相同的GET请求应该得到相同的结果，不会改变服务器的状态。
POST方法：
数据可见性：POST请求的数据包含在请求体中，不会显示在URL中，因此对用户是不可见的。
数据长度限制：POST请求没有数据长度的限制，可以传输大量的数据。
数据类型限制：可以发送二进制数据。
缓存和书签：POST请求不会被缓存，也不能被保存为书签。
安全性：由于数据不在URL中显示，因此比GET方法更安全，适合传输敏感信息。
幂等性：POST请求不是幂等的，它可能会改变服务器的状态，比如创建新的资源。
2.2Web前端JavaScript
2.2.1理解JavaScript的基本功能，理解DOM
1.JavaScript的一些基本功能：
交互性：JavaScript可以响应用户的操作，如点击、输入、鼠标移动等，从而实现动态的网页效果。
DOM操作：JavaScript可以操作文档对象模型（DOM），这意味着它可以访问和修改HTML和XML文档的结构、样式和内容。
事件处理：JavaScript可以绑定事件处理器到HTML元素上，当特定的事件发生时，执行相应的代码。
表单验证：JavaScript可以在数据被发送到服务器之前，在客户端进行表单验证。
动画和视觉效果：JavaScript可以创建动画效果和复杂的视觉效果，增强用户体验。
异步编程：JavaScript支持异步编程，允许程序在等待某些操作完成时继续执行其他任务，例如使用AJAX（Asynchronous JavaScript and XML）技术进行异步数据加载。
错误处理：JavaScript提供了错误处理机制，如try...catch语句，以便于调试和异常管理。
函数和对象：JavaScript是一种基于原型的语言，支持函数和对象的创建和操作。
模块化：JavaScript支持模块化编程，允许代码被组织成独立的模块，易于维护和重用。
性能优化：JavaScript提供了多种性能优化技术，如事件委托、防抖（debounce）和节流（throttle）等。
DOM的一些关键点：
树形结构：DOM将文档表示为一个节点树，每个节点代表文档的一部分，如元素、属性、文本等。
节点类型：DOM定义了多种类型的节点，包括元素节点、属性节点、文本节点等。
元素选择：DOM提供了多种方法来选择文档中的元素，如getElementById、getElementsByClassName、querySelector和querySelectorAll。
元素操作：DOM允许你创建、修改、删除和复制文档中的元素。
属性操作：DOM允许你访问和修改HTML元素的属性。
样式操作：DOM允许你动态地改变元素的CSS样式。
事件：DOM定义了事件模型，允许你绑定事件监听器到元素上，并在事件发生时执行代码。
遍历和搜索：DOM提供了遍历文档树和搜索特定节点的方法。
跨浏览器兼容性：DOM标准旨在跨浏览器工作，尽管在实际中可能需要处理一些兼容性问题。
DOM操作性能：频繁的DOM操作可能会影响网页性能，因此优化DOM操作是前端性能优化的一个重要方面。
2.2.2
在2.1的基础上加入JavaScript代码，用于判断用户名或密码是否为空和在用户点击登陆按钮后回显“欢迎+输入的用户名”
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录网页</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
form {
text-align: center;
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
label, input {
display: block;
width: 100%;
max-width: 300px;
margin: 10px auto;
}
input[type="button"] {
width: 100px;
margin: 20px auto;
}
</style>
<script>
function login() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (username === "" || password === "") {
alert("用户名或密码不能为空！");
return;
}
document.write("欢迎 " + username);
}
</script>
</head>
<body>
<h1>登录</h1>
<form action="" method="post">
<label for="username">用户:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="button" name="login_btu" value="登录" onclick="login()">
</form>
</body>
</html>
成功登录：
接下来尝试性攻击：
<h1>20222307</h1>
script注入：
<script>alert("20222307")</script>
2.3Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
2.3.1使用命令，开启MySQL服务，进入root权限
service mysql start
mysql -u root -p
2.3.2输入show databases;，查看数据库基本信息。
2.3.3建库
create database 2307pzs;
2.3.4创建新用户
use 2307pzs
create user '2307pzs'@'%' IDENTIFIED BY '123456';
2.3.5创建了一个名为loginuser的表并向loginuser表中插入了一条记录
create table loginuser (uname VARCHAR(20),password VARCHAR(30));
insert into loginuser values('2307pzs','2307pzs');
select * from loginuser;
将2307pzs数据库给用户2307pzs,刷新一下权限
GRANT ALL PRIVILEGES ON 2307pzs.* TO '2307pzs'@'%';
FLUSH PRIVILEGES;
2.3.6登陆验证：成功
2.4Web后端：编写PHP网页，连接数据库，进行用户认证
安装了PHPstudy具体配置方式参考了网站https://blog.csdn.net/administratorlws/article/details/141745175
打开了Apache和MySQL服务
访问了http://127.0.0.1/pikachu/install.php
并且安装pikachu平台，完成SQL注入、XSS、CSRF攻击。
SQL注入：'or 1=1#
XSS：
<script>alert("2307")
</script>
CSRF攻击(get):
根据提示先登录一个用户
进入之后，去修改信息界面，并且打开burnsuite准备抓包
分析抓到的包中有一个请求语句
看到了用户的一些信息
我们直接套用格式，讲里里面的数据进行修改后得出一个语句
127.0.0.1/pikachu/vul/csrf/csrfget/csrf_get_edit.php?sex=boy&phonenum=120&add=nba&email=kobe%40pikachu.com&submit=submit
能看到信息已经修改了
3.问题及解决方案
问题一：burnsuite无法与edge浏览器配合使用：我曾尝试了多次讲两个软件搭配着使用，即使是讲浏览器设置为代理模式，仍旧是抓不到理想的包。
解决方案：利用了burnsuite内嵌的浏览器进行了实验
问题二：在完成页面跳转的过程中，总是出现错误
解决方案：多次检查了，并修改了代码最终完成了这个任务。
4.学习感悟、思考等
通过本次实验，我掌握了如何在本地环境中安装和配置Apache服务器，以及如何启停服务。同时，我也加深了对HTML的理解，特别是表单的创建和GET与POST方法的区别。我编写了一个包含用户名和密码输入的表单，并理解了这两种HTTP方法在数据传输上的安全性和适用场景。
在前端JavaScript的学习中，我了解了JavaScript的基本功能，尤其是DOM操作的重要性。我编写了JavaScript代码来验证用户名和密码的规则，并实现了在用户点击登录按钮后，页面能够回显“欢迎+输入的用户名”的功能。这个过程中，我体会到了JavaScript在增强网页交互性方面的强大能力。
通过尝试注入攻击，我意识到了Web开发中安全性的重要性。我学习了如何利用回显用户名注入HTML和JavaScript，这让我认识到了在实际开发中需要对用户输入进行严格的验证和过滤，以防止XSS攻击。
在最简单的SQL注入和XSS攻击测试中，我了解了这两种常见的Web安全威胁，并学会了如何进行基本的测试。这些实验让我认识到了在开发过程中需要采取的安全措施，以保护网站不受攻击。
