一.实验内容及要求

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 "欢迎&nbsp;";
		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 "欢迎&nbsp;";
	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这一学习平台的了解,从中学到了不少的知识。
最后感谢老师的指导,同学们的帮助。

posted on 2022-06-11 15:44  20192422李俊洁  阅读(54)  评论(0编辑  收藏  举报