码迷，mamicode.com
首页 > Web开发 > 详细

2017-2018-2 20155228 《网络对抗技术》 实验八：Web基础

时间：2018-05-16 19:41:15      阅读：264      评论：0      收藏：0      [点我收藏+]

标签：led   init.d   pre   img   tar   dom   sel   php文件   lse   

2017-2018-2 20155228 《网络对抗技术》 实验八：Web基础

1. 实践内容

1.1 Web前端HTML

能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。

1.2 Web前端javascipt

理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。

1.3 Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表

1.4 Web后端：编写PHP网页，连接数据库，进行用户认证

1.5 最简单的SQL注入，XSS攻击测试

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

2. 基础问题回答

2.1 什么是表单

2.2 浏览器可以解析运行什么语言。

2.3 WebServer支持哪些动态语言

3. 实践总结与体会

4. 实践过程记录

4.1 Apache的安装和使用

sudo apt-get install apache2//安装Apache2
service apache2 start//启动Apache2服务
gedit /etc/apache2/port.conf//编辑apache的端口配置文件

打开port.conf文件，将listen后面的端口号80修改为5228，以防止于其他进程形成端口冲突，保存退出

技术分享图片

service apache2 restart//重启Apache2服务
netstat -aptn//查看端口使用情况

技术分享图片

cd /var/www/html//进入apache2的工作目录
gedit test.txt//新建名为test的txt文件

打开test.txt文件，随便写一点内容

welcome back,20155228!

保存退出

打开浏览器输入

127.0.0.1:5228/test.txt

可以看到之前在test.txt写的内容

技术分享图片

4.2 前端编程

要求：编写一个简单网页，包含一个表单，输出用户名、密码然后提交

4.2.1 使用gedit新建名为login.html文件

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Login</title>
<script src="MarqueeEffect.js"></script>
<link href="MarqueeEffect.css" rel="stylesheet" type="text/css">
<script>

function inputTest(){
    if (document.getElementById("password").value.length>0){
        return true
    } else {
            return false;
    }
}

</script>
</head>
<body>
    <div class="GeneralDiv">

        <div class="Symbol" id="symbol">
            <img src="title.png" width=1366 height=640 alt=FailedToLoadTitle>
            
        </div>

        <div class="Backgorund" id="backgorund1">
            <img src="BackGround.jpg">
        </div>

        <div class="Backgorund" id="backgorund2">
            <img src="BackGround.jpg">
        </div>


        <div class="Form" id="form">

            <center>
                <p style="font-size: 28px;color: #000000;">Welcome to B.E.S.T.I.</p>
                <form action="login.php" method="GET" onsubmit="return inputTest()">
                    <p style="font-size: 16px; color: #000000;">
                        UserID &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="username" id="username">
                    </p>
                    <p style="font-size: 16px; color: #000000;">
                        Password&nbsp;&nbsp; <input type="password" name="password" id="password">
                    </p>
                    <input style="font-size: 16px;color: #000000;" type="submit" value="Login">
                </form>
            </center>
        </div>

        

    </div>
</body>
</html>

4.2.2 使用gedit新建名为MarqueeEffect.css文件

div.GeneralDiv
{
        position:absolute;
        overflow: hidden;    
        left:0;
        top:0;
        width:1366px;
        height:640px; 
}
div.Backgorund
{
        position: absolute;
        width:100%;
        height:100%;
        z-index:-1;
}
div.Symbol
{
       position:absolute;
       z-index:1;
       left:0px; 
       top:0px; 
}
div.Form
{
       position:absolute;
       z-index:1;
       left:800px; 
       top:200px; 
        
       width:360px; 
       height:240px;
       background:#00ffff;
       border:8px solid #000000; 

       color:#ffffff;
       
       
}

4.2.3 使用gedit新建名为MarqueeEffect.js文件

window.onload = function(){
        var _box1 = document.getElementById("backgorund1");
        var _box2 = document.getElementById("backgorund2");

        var x = 0;
        var y = 0;
        var fun = function(){
            _box1.style.left = x + ‘px‘;
            _box2.style.left = x+1366+‘px‘;

            x--;
            y++;
 
            if((x+1366) == 0){
                x = 0;
            }
            
            
            if((y-1366) == 0){
                y = 0;
            }
        }
       
        setInterval(fun,40);

    }

注意：这三个文件都要保存在/var/www/html目录下，如果要放在其他目录下的话要相应地调整login.html中的ScriptSrc和LinkHref

打开浏览器输入

http://127.0.0.1:5228/login.html

可以看到登录界面

技术分享图片

4.3 后端编程PHP

4.3.1 PHP的安装和测试

sudo apt-get install php//安装php
cd /var/www/html//进入apache2的工作目录
gedit test.php//新建名为test的php文件

打开test.php文件，随便写一点内容

<?php

include($_GET["a"]);

echo "<br>hello,this is /var/www/html/test.php<br>";
?>

保存退出

技术分享图片

打开test.txt文件，把内容修改为

hello,this is /var/www/html/text.txt!

保存退出

技术分享图片

打开浏览器输入

127.0.0.1:5228/test.php?a=/var/www/html/text.txt

可以看到之前在test.php和test.txt写的内容

技术分享图片

4.4 数据库MYSQL的测试和使用

/etc/init.d/mysql start//启动mysql
mysql -u root -p//以名为root的用户的身份登录数据库
p@ssw0rd//输入用户root的默认密码

技术分享图片

use mysql;//进入名为mysql的数据库，注意有分号
select user, password, host from user;//在名为user的数据表中搜索所有user，password，host信息
UPDATE user SET password=PASSWORD("123456") WHERE user=‘root‘;//重新设置名为root的用户的密码为123456
flush privileges;//更新权限使修改生效
quit;//退出mysql
mysql -u root –p//重新以名为root的用户的身份登录数据库
123456//输入用户root的新密码

技术分享图片

CREATE SCHEMA `database5228`;//新建一个名为database5228的数据库
CREATE TABLE `database5228`.`users` (`userid` INT NOT NULL COMMENT ‘‘,`username` VARCHAR(45) NULL COMMENT ‘‘,`password` VARCHAR(256) NULL COMMENT ‘‘,`enabled` VARCHAR(5) NULL COMMENT ‘‘,PRIMARY KEY (`userid`) COMMENT ‘‘);//在数据库database5228新建一个名为user的数据表，每一条记录的内容有userid、username、password、enabled，设置主键为userid
insert into users(userid,username,password,enabled) values(1,‘20155228‘,password("123"),"TRUE");//在数据表database5228中插入一条记录userid为1、username为20155228、password为123、enabled为true

技术分享图片

技术分享图片

注意这一步非常重要！忽略这一步将导致之后登陆时无法连接到数据库
注意这一步非常重要！忽略这一步将导致之后登陆时无法连接到数据库
注意这一步非常重要！忽略这一步将导致之后登陆时无法连接到数据库

grant all privileges on *.* to ‘root‘@‘localhost‘ identified by ‘123456‘ with grant option;//设置授权

4.5 web编程

4.5.1 使用gedit新建名为login.php文件

<?php
$uname=$_GET[‘username‘];
$pwd=$_GET[‘password‘];
$query_str="SELECT * FROM users WHERE username=‘{$uname}‘ and password=password(‘{$pwd}‘);";
$mysqli = new mysqli("127.0.0.1", "root", "123456", "database5228");
/* check connection */
if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}
echo "Connect to server successfully,please wait for a moment";
/* Select queries return a resultset */
if ($result = $mysqli->query($query_str)){
        if ($result->num_rows > 0 ){
                header("Refresh:1;url=welcome.html");
        } else {
                header("Refresh:1;url=failed.html");}
    /* free result set */
    $result->close();
}
$mysqli->close();
?>

4.5.2 使用gedit新建名为welcome.html文件

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>welcome</title>
<script src="MarqueeEffect.js"></script>
<link href="MarqueeEffect.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="GeneralDiv">

        <div class="Symbol" id="symbol">
            <img src="title.png" width=1366 height=640 alt=FailedToLoadTitle>
        </div>

        <div class="Backgorund" id="backgorund1">
            <img src="BackGround.jpg">
        </div>

        <div class="Backgorund" id="backgorund2">
            <img src="BackGround.jpg">
        </div>


        <div class="Form" id="form">
                                        <center>
                <p style="font-size:24;color:#000000">welcome come back!</p>
                                <p style="font-size:48;color:#000000">20155228</p>
            </center>
        </div>

        

    </div>
</body>
</html>

4.5.3 使用gedit新建名为Failed.html文件

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>LoginFailed</title>
<script src="MarqueeEffect.js"></script>
<link href="MarqueeEffect.css" rel="stylesheet" type="text/css">

</head>
<body>
    <div class="GeneralDiv">

        <div class="Symbol" id="symbol">
            <img src="title.png" width=1366 height=640 alt=FailedToLoadTitle>
            
        </div>

        <div class="Backgorund" id="backgorund1">
            <img src="BackGround.jpg">
        </div>

        <div class="Backgorund" id="backgorund2">
            <img src="BackGround.jpg">
        </div>


        <div class="Form" id="form">
                                        <center>
             <BR>
                <p style="font-size:36;color:#000000">LOGIN FAILED!</p>
                               
                <a href="login.html" style="font-size:18;color:#000000;text-decoration : none;">CLICK HERE BACK TO LOGIN PAGE</a>
            </center>
        </div>

        

    </div>
</body>
</html>

打开浏览器输入

http://127.0.0.1:5228/login.html

可以看到登录界面

技术分享图片

用户密码输入正确的界面

技术分享图片

用户密码输入不正确的界面

技术分享图片

值得一提的是设置了链接可以回到登录界面

4.5 SQL注入和XSS攻击

4.5.1 SQL注入

在登录界面的用户名输入框中输入以下内容，密码输入框输入内容随意

‘ or 1=1#

在用户名输入框中输入的内容会被发送到后台放入以下语句执行数据库查询

$query_str="SELECT * FROM users WHERE username=‘{$uname}‘ and password=password(‘{$pwd}‘);";

输入‘ or 1=1#语句得到

select * from users where username=‘‘ or 1=1#‘ and password=md5(‘‘)‘ and password=password(‘{$pwd}‘);";

注意#代表注释后面的内容

select * from users where username=‘‘ or 1=1

因为1=1永远为真，所以对账号密码的验证返回结果永远为成功

技术分享图片

技术分享图片

4.5.1 XSS攻击

为了更好地体现效果，在进行攻击之前对login.php进行修改

<?php
$uname=$_GET[‘username‘];
$pwd=$_GET[‘password‘];
echo $uname;
$query_str="SELECT * FROM users WHERE username=‘{$uname}‘ and password=password(‘{$pwd}‘);";
$mysqli = new mysqli("127.0.0.1", "root", "123456", "database5228");
/* check connection */
if ($mysqli->connect_errno) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
}
echo "Connect to server successfully";
/* Select queries return a resultset */
if ($result = $mysqli->query($query_str)) {
        if ($result->num_rows > 0 ){
                echo "<br> Wellcome login Mr/Mrs:{$uname} <br> ";
        } else {
                echo "<br> login failed <br> " ; }
    /* free result set */
    $result->close();
}
$mysqli->close();
?>

用户密码输入不正确的界面

技术分享图片

在登录界面的用户名输入框中输入以下内容，密码输入框输入内容随意

<img src="BackGround.jpg" />2015228</a>

技术分享图片

在用户名输入框中输入的内容会被赋值给uname然后被打印出来

$uname=$_GET[‘username‘];
echo $uname;

输入<img src="BackGround.jpg" />2015228</a>语句得到

echo <img src="BackGround.jpg" />2015228</a>

会导致BackGround.jpg被打印出来

技术分享图片

2017-2018-2 20155228 《网络对抗技术》 实验八：Web基础

标签：led   init.d   pre   img   tar   dom   sel   php文件   lse   

原文地址：https://www.cnblogs.com/besti20155228/p/9047528.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！