Exp 8 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攻击测试

功能描述:用户能登陆,登陆用户名密码保存在数据库中,登陆成功显示欢迎页面。

二、实践过程

 1.Web前端HTML

  (1)kali中已经安装了Apache2,使用指令 service apache2 start 启动Apache服务。

     如果开启成功可以看到如下:

 (2)使用 cd /var/www/html 进入Apache目录下,并新建一个html文件20164314form.html

    html文件内容如下:

<html>

<head>

<title>CryptoTeam</title>

<!-- Meta tag Keywords -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Meta tag Keywords -->

</head>

 

<body>

<!-- main -->

<!--//header-->

    <h2>Login</h2>

        <form action="login" method="post">

            <input placeholder="E-mail" name="Name" class="user" type="text">

            <br>

            </br>

            <input  placeholder="Password" name="Password" class="pass" type="password">

            <br>

            </br>

            <input type="submit" value="Login">

        </form>

<!--//main-->

</body>

</html>

(3)在浏览器中尝试打开

 

 

 2.Web前端javascipt

 (1)在原有 simple_form.html 基础上,可以添加一段JavaScript代码,以完成对用户是否填写邮箱和密码的判断。

          修改后的 login_test.html 如下:

<html>

<head>

<title>CryptoTeam</title>

<!-- Meta tag Keywords -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Meta tag Keywords -->

</head>

 

<body>

<!-- main -->

<!--//header-->

    <h2>Login</h2>

        <form action="login" method="post" name="form_login">

            <input placeholder="E-mail" name="Email" class="user" type="text" onfocus="if (this.value=='Your email') this.value='';" />

            <br>

            </br>

            <input  placeholder="Password" name="Password" class="pass" type="password" onfocus="if (this.value=='Your password') this.value='';"/>

            <br>

            </br>

            <input type="submit" value="Login" onClick="return validateLogin()"/>

        </form>

<!--//main-->

<script language="javascript"> 

    function validateLogin(){ 

        var sUserName = document.form_login.Email.value ; 

        var sPassword = document.form_login.Password.value ;   

        if ((sUserName =="") || (sUserName=="Your email")){ 

        alert("user email!"); 

        return false ; 

        } 

 

        if ((sPassword =="") || (sPassword=="Your password")){ 

        alert("password!"); 

        return false ; 

        } 

 

    }  

</script> 

 

</body>

</html>

(2)在浏览器访问 http://127.0.0.1/20164314form.html,如果用户邮箱或密码未填,网页会报错:

         只输用户邮箱:

         

         只输密码:

         

 

3.Web后端:MySQL基础:正常安装、启动MySQL,建库、创建用户、修改密码、建表

(1)输入  /etc/init.d/mysql start  开启MySQL服务

(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=PASSWORD("20164321") where user='root';,修改密码;

       

(7) 输入 flush privileges; , 更新权限

       

(8)输入 exit 退出数据库,使用新的密码登录

        

(9)使用 create database gly; ,建立数据库

(10)使用 show databases;,查看存在的数据库

(11)使用 use gly; 使用我们创建的数据库;使用 create table 表名 (字段设定列表); 建立数据库表,并设置字段基本信息

        

(12)使用  insert into 表名 values('值1','值2','值3'...); 插入数据,并使用 select * from 表名;  查询表中的数据

(13)在MySQL中增加新用户,使用  grant select,insert,update,delete on sql.* to username@localhost identified by "password"; 

(14)增加新用户后,使用新的用户名和密码进行登录

        

 4.Web后端:编写PHP网页

 1.在/var/www/html目录下编写一个PHP文件4314php.php,利用PHP和MySQL,结合之前编写的登录网页进行登录身份认证

   文件内容如下:

<?php

$uname=($_GET["username"]);

$pwd=($_GET["Password"]);

echo $uname;

$query_str="SELECT * FROM 4314_user where username='$uname' and password='$pwd';";

$mysqli = new mysqli("127.0.0.1", "root", "123456", "4314gly");

 

/* 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_str)) {

if ($result->num_rows > 0 ){

echo "<br> {$uname}:Welcome!!! <br> ";

}

else {

echo "<br> login failed!!!! <br> " ; }

/* free result set */

$result->close();

}

$mysqli->close();

?>

 5.最简单的SQL注入,XSS攻击测试

(1)SQL注入

  SQL注入原理 是利用现有应用程序,将SQL命令注入到后台数据库引擎执行的能力,可以通过在Web表单中输入SQL语句得到一个存在安全漏洞的网站上的数据库,而不是按照设计者意图去执行SQL语句。

       在用户名输入框输入 ' or 1=1# ,密码任意输入,可登陆成功,

      

       输入的用户名与select语句组合变成 select * from users where username='' or 1=1#' and password='' ,#起到注释作用屏蔽了密码判断语句,而1=1是1,所以能够成功登陆。

 (2)XSS攻击

       XSS是一种经常出现在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到提供给其它用户使用的页面中,简单说就是在网站任何接受正常文本输入的地方,输入Javascript脚本,并让脚本执行。

       将一张名为4314.jpg的图片放在/var/www/html目录下,在用户名输入框输入  <img src="4314.jpg" />  ,密码任意输入,就可以读取图片。

 

 

三、基础问题回答

   (1)什么是表单

       表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框   等。表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

   (2)浏览器可以解析运行什么语言

       浏览器可以解析运行HTML、XML,javascript等脚本语言,对于JS脚本,会调用JS脚本引擎来处理,浏览器本身不处理程序代码。

   (3)WebServer支持哪些动态语言

       Javascript、PHP、Ruby等脚本语言

 四、实践心得

    通过这次实验,较为快速、系统地学习了一下Web的前端和后端,并将两者结合在一起使用,这次实验可以说和我们的互联网活动息息相关,每天我们访问的每一个网页都是一段代码,我们还针对代码的漏洞进行了攻击(虽然现在绝大多数网站都能阻止),理解了代码的含义,我觉得是非常有意义的。

 

 

 

 

 

 

 

posted @ 2019-05-17 22:09  FourICes  阅读(76)  评论(0编辑  收藏