一、实践目标
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
1.1 Web前端HTML
kali默认已安装Apache，直接使用 service apache2 start命令打开Apache服务即可。
使用service apache2 status 查看服务情况
此时在浏览器输入 127.0.0.1，如果可以打开Apache的默认网页，则表示开启成功！
在主机中访问如下
启动成功!
使用 cd /var/www/html进入Apache目录下，新建一个简单的含有表单的html文件 1315.html
touch 1315.html（创建）
vi 1315.html（编辑）
内容如下：
<html>
<head>
<title>20201315</title>
<meta http-equiv="Content-Type" content="test/html; charset=utf-8" />
</head>
<body>
<h2>Login</h2>
<center>
<form action="myindex" method="get" name="form_login">
<input placeholder="username" name="user" class="user" type="text" onfocus="if (th is.value=='Your name') this.value='';" />
<br>
</br>
<input placeholder="Password" name="Password" class="pass" type="password" onf ocus="if (this.value=='Your password') this.value='';"/>
<br>
</br>
<input type="submit" value="Login" onClick="return validateLogin()"/>
</form>
</center>
</script>
</body>
</html>
在网页中输入/var/www/html/1315.html，显示一个网页表单
1.2 Web前端 ：javascript
添加一段JavaScript代码，以完成对用户是否填写账号和密码的判断，在用户点击登陆按钮后回显“欢迎+输入的用户名”
在</center>后添加如下代码
<!--//main-->
<script language="javascript">
function validateLogin(){
var sUserName = document.form_login.user.value;
var sPassword = document.form_login.Password.value;
if ((sUserName =="") || (sUserName=="Your name")){
alert("need name!");
return false ;
}
if ((sPassword =="") || (sPassword=="Your password")){
alert("need password!");
return false ;
}
}
效果如下：
登陆成功界面
编写登录成功后跳转的界面，主要任务是获取用户名参数并显示出来
<html>
<head>
<title>myindex</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script language="JavaScript" type="text/javascript">
var searchStr = location.search;
searchStr = searchStr.substr(1);
var searchs = searchStr.split("&");
var username = searchs[0].split("=");
document.write("欢迎您："+username[1]);
</script>
<body>
<h2 align="center">myindex</h2>
</body>
</html>
登陆成功后效果如下：
尝试注入攻击
<html>
<head>
<title>myindex</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2 align="center">myindex</h2>
<h3 id="n"></h3>
<script language="JavaScript" type="text/javascript">
function myname() {
var searchStr = location.search;
searchStr = searchStr.substr(1);
var searchs = searchStr.split("&");
var username = searchs[0].split("=");
return username[1];
}
document.getElementById("n").innerHTML = decodeURIComponent(myname());
</script>
</body>
<a id='n'></a>
</html>
尝试注入攻击
<h1>hellolzq<h1>
1.3 Web后端 ：MySQL基础
输入 service mysql start开启MySQL服务
输入sudo mysql -u root -p使用mysql，默认密码是password
创建用户
CREATE USER linziqi@localhost IDENTIFIED BY '20201315';
use mysql
输入set password for root@'localhost'=password('20201315');修改密码
输入create database LZQ1;创建一个新的数据库LZQ1，创建好之后查看一下show databases;
使用use LZQ1;使用我们创建的数据库
输入create table login(username VARCHAR(20),password VARCHAR(20));建立数据库表login，并设置字段基本信息
使用insert into 表名 values('值1','值2','值3'...);插入数据;
insert into login values ('20201315@qq.com', '20201315');
输入select * from login;查询表中的数据
在MySQL中增加新用户，输入grant select,insert,update,delete on LZQ1.* to linziqi@localhost identified by "20201315";
1.4 Web后端：编写PHP网页，连接数据库，进行用户认证
安装php
sudo apt-get install php
在/var/www/html目录下新建一个PHP测试文件phptest.php
vi phptest.php
访问127.0.0.1/phptest.php
成功执行了 PHP 代码
连接数据库，进行用户认证
写 test.php 代码
<?php
$uname=$_POST["user"];
$pwd=$_POST["Password"];
echo $uname;
$query_str="SELECT * FROM login where username='$uname' and password='$pwd';";
$mysqli = new mysqli("127.0.0.1", "root", "20201315", "LZQ1");
$query_str1="use LZQ1;";
/* check connection */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
echo "connection ok!";
/* Select queries return a resultset */
if ($result = $mysqli->query($query_str1))
echo"<br>Success into database!";
echo$uname;
if ($result = $mysqli->query($query_str)) {
if ($result->num_rows > 0 ){
echo "<br> Welcome login Mr/Mrs:{$uname}:<br> ";
}
else {
echo "<br> login failed!!!! <br> " ; }
/* free result set */
$result->close();
}
$mysqli->close();
?>
将之前的 1315.html 中的中的 action 设为 test.php
method改为 POST
登录 127.0.0.1/1315.html 查看
输入正确如下：
密码错误如下：
1.5最简单的攻击
（1）SQL 注入
输入' or 1=1#密码随意
登陆成功
(2) XSS攻击
在用户名输入<script>alert(1)</script>密码随意
2.选做
（1）安装 Wdbgoat
（2）打开 Webgoat
（3）注册用户
(4)sql 注入
SQL Injection (intro) 第 10 页
顺利过关！
(5)XSS
选择课程如下
从上图可知，电话号码那个输入框的输入参数是会回显的在这个输入框中尝试输入
<script>alert('20201315lzq')</script>
告警弹出，顺利过关
(6)CSRF
选择课程如下
成功通关！
三、基础问题回答
1.什么是表单
表单是web开发的重要组成部分，允许用户输入数据并与web应用程序交互。在web开发的上下文中，表单是允许用户将数据提交给服务器进行处理的输入字段的集合。
在HTML中，表单是使用