一.实验内容及要求
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.安装Webgoat或类似平台,并完成SQL注入、XSS、CSRF攻击。
二.实验过程
1.Web前端HTML
(1)能正常安装、启停Apache
浏览器输入http://127.0.0.1:8080,可见成功访问
关闭tomcat再次访问,可见访问失败
(2)理解HTML,理解表单,理解GET与POST方法
以下为百度搜索
HTML
超文本传输协议(HTTP)的设计目的是保证客户端与服务器之间的通信。
HTTP 的工作方式是客户端与服务器之间的请求-应答协议。。
web 浏览器可能是客户端,而计算机上的网络应用程序也可能作为服务器端。
表单
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
GET方法
从指定的资源请求数据。GET 提交参数一般显示在URL上。
GET 请求可被缓存。
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据
POST方法
向指定的资源提交要被处理的数据。POST 通过表单提交不会显示在URL上,更具隐蔽性。
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
(3).编写一个含有表单的HTML。
<!DOCTYPE html>
<!--登录代码-->
<html>
<body>
<form name="form1" action="login" method="post">
用户名:<br>
<input type="text" name="username" value="2019242422李俊洁">
<br>
密码:<br>
<input type="password" name="password" value="">
<br><br>
<input type="button" value="Submit">
</form>
</body>
</html>
2.Web前端javascipt
(1)理解JavaScript的基本功能,理解DOM。
- -嵌入动态文本于HTML页面
- -对浏览器事件作出响应
- -读写HTML元素
- -在数据被提交到服务器之前验证数据
- -检测访客的浏览器信息
- -控制cookies,包括创建和修改等
- -DOM
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。
(2)在 1 的基础上,编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”
<!DOCTYPE html>
<!--登录代码-->
<html>
<script type="text/javascript">
function lgcheck() {
//判断用户名是否为空
if(form1.username.value==""||
form1.password.value==""){
alert("用户名或密码不能为空!")
}else{
document.write("欢迎"+form1.username.value)
}
}
</script>
<body>
<form name="form1" action="login" method="post">
用户名:<br>
<input type="text" name="username" value="20192422李俊洁">
<br>
密码:<br>
<input type="password" name="password" value="">
<br><br>
<input type="button" value="Submit" onclick="lgcheck()">
</form>
</body>
</html>
密码中填写任意字符(因为并未设置正确密码)
(3)尝试注入攻击:利用回显用户名注入HTML及JavaScript。
注入HTML
在用户名出输入
<p><p>20192422李俊洁HTML注入</p></p>
注入JavaScript
用户名出输入
<script type="text/javascript"> alert("20192422李俊洁JavaScript注入") </script>
3.Web后端:MySQL基础
安装
启动并登录
create database ljj;//建库
CREATE USER ljj@localhost IDENTIFIED BY 'pwd123';//创建用户
ALTER user 'ljj'@'localhost' IDENTIFIED BY '20192422';//密码
CREATE TABLE IF NOT EXISTS tasks ( task_id INT(11) NOT NULL AUTO_INCREMENT, subject VARCHAR(45) DEFAULT NULL, start_date DATE DEFAULT NULL, end_date DATE DEFAULT NULL, description VARCHAR(200) DEFAULT NULL, PRIMARY KEY (task_id) ) ENGINE=InnoDB;//建表
4.Web后端
(1)编写PHP网页
<!DOCTYPE html>
<!--登录代码-->
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function lgcheck() {
//判断用户名是否为空
if(form1.username.value==""||
form1.password.value==""){
alert("用户名或密码不能为空!")
}else{
alert("欢迎"+form1.username.value)
form1.submit();
}
}
</script>
</head>
<body>
<center>
<form name="form1" action="login.php" method="post">
用户名:<br>
<input type="text" name="username" value="20192406梁健">
<br>
密码:<br>
<input type="password" name="password" value="11111">
<br><br>
<input type="button" value="Submit" onclick="lgcheck()">
</form>
</center>
</body>
</html>
后端代码:
<?php
//支持中文
header("Content-type:text/html;charset=utf-8");
$loginTel=$_POST["username"];
$loginPwd=$_POST["password"];
//测试用例
// $loginId="20192422李俊洁";
// $loginPwd="20192422";
$conn=mysqli_connect("localhost","root","root");
mysqli_select_db($conn, "lj");
$result1=mysqli_query($conn,"select * from user where uname='$loginTel' and passwd='$loginPwd'");
$result2=mysqli_query($conn, "select * from user where uname='$loginTel'");
//1表示用户名存在密码正确,2表示用户名存在密码错误,0表示用户名不存在
if(mysqli_num_rows($result1)==1){
echo "用户名密码正确,登陆成功";
echo "欢迎 ";
echo $loginTel;
}else if(mysqli_num_rows($result2)==1){
echo "用户名正确,密码错误";
}else if(mysqli_num_rows($result2)==0){
echo "用户名不存在";
}
mysqli_close($conn);
?>
(2)连接数据库
$conn=mysqli_connect("localhost","root","root");
mysqli_select_db($conn, "ljj");
....
mysqli_close($conn);
(3)进行用户认证
$result1=mysqli_query($conn,"select * from user where uname='$loginTel' and passwd='$loginPwd'");
$result2=mysqli_query($conn, "select * from user where uname='$loginTel'");
//1表示用户名存在密码正确,2表示用户名存在密码错误,0表示用户名不存在
if(mysqli_num_rows($result1)==1){
echo "登陆成功";
echo "欢迎 ";
echo $loginTel;
}else if(mysqli_num_rows($result2)==1){
echo "用户名正确,密码错误";
}else if(mysqli_num_rows($result2)==0){
echo "用户名不存在";
}
4.网页效果
数据库中的信息如下:
输入正确用户名和密码
输入错误的用户名或密码
5.最简单的SQL注入,XSS攻击测试
(1)最简单的SQL注入测试
' or '1'='1
(2)XSS攻击测试
<script type="text/javascript">alert('XSS攻击')</script>
6.安装Webgoat或类似平台,并完成SQL注入、XSS、CSRF攻击。
使用WebGoat平台
(1)下载并运行WebGoat 8.1
wget https://hub.連接.台灣/WebGoat/WebGoat/releases/download/v8.1.0/webgoat-server-8.1.0.jar
java -jar webgoat-server-8.1.0.jar
执行完后进入浏览器,输入http://localhost:8080/WebGoat/login访问WebGoat
(2)注册一个账号
(3)找到Injection板块进行SQL注入,第十二课如图所示。
(4)选择XSS进行学习,第七如图所示。
(5)选择CSRF,第三课
新建一个HTML文件,在里面填入拷贝的内容并加上HTML的必要标签
使用浏览器打开该文件,点击按钮即可获得flag
三.实验中出现的问题
在下载webgoat时,出现了不兼容的问题。
解决办法:通过查询资料,修改版本,将其改为较为旧的版本即可。
四.实验感想
这次实验是本门课程的最后一次实验,内容相对较多,相对的,我也从中学习到了更多的知识。无论是对于web前后端相关代码的熟悉,还是对于webgoat这一学习平台的了解,从中学到了不少的知识。
最后感谢老师的指导,同学们的帮助。