Exp8：Web基础
一、实验要求
1.Web前端HTML
能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。
2.Web前端javascipt
理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。
3.Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
4.Web后端：编写PHP网页，连接数据库，进行用户认证
5.最简单的SQL注入，XSS攻击测试
二、实验步骤
一）、Web前端HTML
1、卡里默认安装好了apache，我们直接启动服务即可 service apache2 start 没有提示就说明正常，然后在浏览器输入127.0.0.1，能打开默认网页说明服务没问题
2、 cd /var/www/html 进入apache目录下， vim simple_form.html 创建并编写一个含有简单表单的html文件，内容如下：
<html>
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h2 align="center">Login</h2>
<center>
<form action="login" method="post">
<input placeholder="E-mail" name="Name" class="user" type="email">
<br> </br>
<input placeholder="Password" name="Password" class="pass" type="password">
<br> </br>
<input type="submit" value="Login">
</form>
</center>
</body>
</html>
3、在浏览器中输入/var/www/html/simple_form.html 打开该网页
二）、Web前端javascript
1、在前面的代码基础上加上一段javascript代码来判断用户和密码是否填写，代码入下login_test.html：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>login</title>
<script type="text/javascript">
function resetValue(){
document.getElementById("username").value="";
document.getElementById("password").value="";
}
</script>
</head>
<body>
<div align="center" style="padding-top: 50px;">
<form action="login5127.php" method="GET" name="login" >
<table width="740" height="300" >
<td colspan="2"></td>
</tr>
<tr height="1">
<td width="40%"></td>
<td width="5%">username：</td>
<td><input type="text" value="input your name" name="username" id="username"/></td>
<td width="30%"></td>
</tr>
<tr height="1">
<td width="40%"></td>
<td width="5%">password：</td>
<td><input type="password" value="" name="password" id="password"/></td>
<td width="30%"></td>
</tr>
<tr height="1">
<td width="40%"></td>
<td width="5%"><input type="submit" name="login" value="登录"onClick="return Login()" /></td>
<td align="center"><td align="center"><input type="button" name="close" value="关闭" οnclick="window.close();" /></td></td>
<td width="30%"></td>
</tr>
</table>
</form>
</div>
<script language="javascript">
function Login(){
var Name = document.login.username.value ;
var Pwd = document.login.password.value ;
if ((Name =="") ){
alert("user name is NULL!");
return false ;
}
if ((Pwd=="")){
alert("password is NULL!");
return false ;
}
}
</script>
</body>
</html>
2、浏览器访问/var/www/html/login_test.html ，测试没有填写用户名或者密码时登录会怎样提示
三）、MySql基础内容
1、Mysql也是默认装好的我们直接启动即可 /etc/init.d/mysql start
2、mysql -u root -p 登录root用户，密码默认为password
3、show databases; 查看已有的数据库
4、use mysql;使用mysql数据库
5、select user, password, host from user; 查看用户信息
6、update user set password=20175127("新密码") where user='root';修改密码
7、flush privileges; 更新权限
8、exit 退出数据库，重新登录mysql -u root -p
9、create database 数据库名称;新建数据库
10、show databases; 查看已有数据库
11、use dxy; 使用刚刚创建的数据库
12、create table 表名 (字段设定列表); 创建一个登录用户表，用于后面验证登录信息
13、show tables;查看已存表，可以看见刚刚创建的表
14、insert into 表名 values('值1','值2','值3'...); 插入数据
15、select * from 表名; 查询表中数据
16、grant select,insert,update,delete on 数据库.* to 用户名@登录主机(可以是localhost,也可以是远程登录方式的IP) identified by "密码"; 将数据库权限授予当前主机登录用户
17、退出使用新用户登录 mysql -u dxy -p
四）、编写PHP网页
1、在/var/www/html 目录下创建phptest5127.php PHP测试文件代码如下：
<?php echo ($_GET["a"]); include($_GET["a"]); echo "Hello word! This is my php test page!<br>"; ?>
2、在浏览器输入localhost:80/phptest5127.php ，能够正常输出则没问题
3、输入localhost:80/phptest.php?a=/etc/passwd可以看见文件内容
4、利用PHP编写链接Mysq数据库代码，代码如下
<?php $uname=($_GET["username"]); $pwd=($_GET["password"]); $query_str="SELECT * FROM login where username='{$uname}' and password='{$pwd}';";
echo "<br> {$uname} <br>"; $mysqli = new mysqli("127.0.0.1", "dxy", "20175127", "dxy"); /* check connection */ if ($mysqli->connect_errno) { printf("Connect failed: \n"); } if ($result1= $mysqli->multi_query($query_str)) echo "welcome！<br> "; $mysqli->close(); $mysqli = new mysqli("127.0.0.1", "dxy", "20175127", "dxy"); /* check connection */ if ($mysqli->connect_errno) { printf("Connect failed: \n"); exit(); } echo "connection ok!"; /* Select queries return a resultset */ if ($result = $mysqli->query($query_str)){ if ($result->num_rows > 0 ){ echo "<br> welcome:{$uname} <br> "; } else { echo "<br> login fall <br> " ; } /* free result set */ $result->close(); } $mysqli->close(); ?>
5、浏览器输入 127.0.0.1/login_test.html进入前端页面正常登录
6、输入错误登录信息
五）、最简单的SQL注入
1、在登录界面用户名输入' or 1=1# 密码任意，可登陆成功
2、利用登录过程往表中插入数据，在用户名处输入';insert into login values('5127','123');# 密码任意，登录会显示失败，再返回登录插入的5127的账号，发现能够登录成功，说明信息成功插入数据库表中
六）、XSS攻击
1、登录界面用户名输入<img src="/home/kali/1.jpg" /> 密码任意，登录会发现加载图片，我这可能是浏览器问题没有完全显示出图片，但是有这个图片的位置
三、问题即解决
1、修改mysql数据库root密码后再登录出现权限不允许，登录失败的问题
解决：①直接百度报错有很多方法，但是我都没能解决
②重启虚拟机，我成功解决
2、创建数据库新用户并授予权限时报错
解决： flush privileges;后再尝试成功
3、登录页面出现404
解决：前端页面的action文件名要对应后端php文件，变量也要一一对应
四、基础问题回答
1、什么是表单
答：表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
2、浏览器可以解析运行什么语言
答：HTML
XML
PHP
JavaScript
ASP
3、WebServer支持哪些动态语言
答：web server支持 JavaScript、ASP、PHP、Ruby等脚本语言，ASP基于IIS WEB SERVER，是微软的服务器端脚本技术，PHP基于APACHE WEB SERVER，与ASP有几分类似，都是一种在服务器端执行的嵌入HTML文档的脚本语言。
五、实验感想
由于上学期学过《网络编程基础》，对前端代码和JavaScript都不是很陌生，PHP没有学过，就参考了同学们的代码。本次实验做完对sql注入攻击和xss攻击有了更深刻的理解，一开始修改数据库密码之前都很正常，当我再次登录时就疯狂报错，百度查到很多解决方案都没有用，最后一气之下直接重启就解决了，到现在还没搞明白为什么，看来重启大法真能解决百分之90的问题。