2017-2018-2 20155314《网络对抗技术》Exp8 Web基础

Posted 20155314刘子健

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2017-2018-2 20155314《网络对抗技术》Exp8 Web基础相关的知识,希望对你有一定的参考价值。

2017-2018-2 20155314《网络对抗技术》Exp8 Web基础

目录

返回目录

实验内容

  1. Web前端html(0.5分)

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

  2. Web前端javascipt(0.5分)

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

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

  4. Web后端:编写php网页,连接数据库,进行用户认证(1分)

  5. 最简单的SQL注入,XSS攻击测试(1分)

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

课题负责人需要完成:登陆后可以发贴;会话管理。

返回目录

实验环境

  • macOS本机
  • macOS下Parallels Desktop虚拟机中(网络源均设置为共享网络模式):
    • Kali Linux - 64bit(攻击机,IP为10.211.55.10
    • Windows 7 - 64bit(靶机,IP为10.211.55.14

返回目录

基础问题回答

  1. 什么是表单?
    • 表单(form)是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素,表单在网页中主要负责数据采集功能,一个表单有三个基本组成部分:表单标签、表单域、表单按钮;
    • 表单标签(<form>):这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法;
    • 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等;
    • 表单按钮:包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
  2. 浏览器可以解析运行什么语言?
    • HTML(超文本标记语言)
    • XML(可扩展标记语言)
    • Python、PHP、JavaScript、ASP等(脚本语言)
  3. WebServer支持哪些动态语言?
    • JavaScript、ASP、PHP、Ruby等脚本语言,ASP基于IIS WEB SERVER,是微软的服务器端脚本技术,PHP基于APACHE WEB SERVER,与ASP有几分类似,都是一种在服务器端执行的嵌入HTML文档的脚本语言。

返回目录

预备知识

  • Web前端
    • 编程言语:html/css/javascript(js)
    • 运行环境:浏览器
    • 编程用途:在浏览器内部的动态,美观展示形式
  • Web后端
    • 编程语言:PHP/JSP/.NET...
    • 运行环境:应用服务器/中间件
    • 编程用途:对前端提交的数据进行处理并返回相应的HTML网页内容
  • 数据库编程
    • 编程语言:PHP/JSP/.NET相应的库,SQL语言
    • 运行环境:数据库服务器
    • 编程用途:基本的数据增、删、改、查

入门学习流程:

  1. WebServer:
    1. 首先掌握Apache的基本操作,安装、启停
    2. 配置修改(如监听端口)
  2. 前端编程:
    1. 熟悉HTML+JavaScript。
    2. 了解表单的概念
    3. 编写不同的HTML网页,放入到Apache工作目录,从浏览器访问。
  3. 后端编程:
    1. 了解GET/POST方法的不同
    2. 尝试使用GET/POST方法传输用户在浏览器中的输入,并在后台用PHP读出参数,根据讲出参数的不同,返回不同的内容给浏览器。
  4. 数据库编程
    1. MySql的安装、启停
    2. MySql客户端登陆
    3. 在MySql客户端中练习基本SQL操作:建库、建表、数据增、删、改、查
    4. 在PHP中调用MySql库进行相应数据库操作

返回目录

实验步骤

1 macOS下Apache的配置

macOS自带Apache这点还是很方便的!

  • 查看Apache版本,在终端中输入:

    httpd -v
    
  • 开启Apache,输入:

    sudo apachectl start
    
  • 验证Apache是否开启:

    打开Safari输入网址http://127.0.0.1http://localhost,出现如下页面就表示Apache启动成功:

    站点的根目录被设置为/Library/WebServer/Documents

  • 测试:apache可读取工作目录下的文件:

    • 输入命令:

      sudo vim /Library/WebServer/Documents/test.html 
      

      随意输入字符串:

    • Safari打开127.0.0.1/test.html可看到test.html的内容:

  • 关闭Apache:

    sudo apachectl stop
    
  • 重启Apache:

    sudo apachectl restart
    

返回目录

2 macOS下PHP的配置

macOS同样自带PHP!不过开启PHP,需要修改Apache配置文件!

2.1 开启PHP

  • 修改Apache配置文件httpd.conf,在终端中输入命令:

    sudo vim /etc/apache2/httpd.conf
    
  • 找到#LoadModule php7_module libexec/apache2/libphp7.so,删除注释(删除前面的#):

  • mac下Apache的默认文件夹为/Library/WebServer/Documents,在该目录下创建一个名为index.php文件,输入命令:

    sudo vim /Library/WebServer/Documents/index.php
    
  • 在文件中添加如下内容:

    <?php 
    phpinfo(); 
    ?>
    
  • 删除原目录下的index.html.enindex.html.en~orig文件,输入命令:

    sudo rm /Library/WebServer/Documents/index.html.en
    
    sudo rm /Library/WebServer/Documents/index.html.en~orig
    
  • 在Safari中输入127.0.0.1localhost,出现如下PHP的info页,表示PHP开启成功:

    如果不成功,用命令sudo apachectl restart重启Apache再试一下就行。

返回目录

2.2 修改Apache目录

macOS下Apache的默认文件夹为/Library/WebServer/Documents,该目录默认是隐藏的,操作不是很方便,我们可以将其修改成自定义的目录。

  • 修改配置文件httpd.conf,在终端输入命令:

    sudo vim /etc/apache2/httpd.conf
    
  • 在配置文件中找到如下两处:

    DocumentRoot "/Library/WebServer/Documents"
    

  <Directory "/Library/WebServer/Documents">
```

  • 将两处中引号中的目录替换为自定义的目录;
  • 重启Apache,将之前创建的index.php文件拷贝到自定义目录中,然后在浏览器中输入127.0.0.1localhost,如果出现PHP的info页,则表示目录修改成功。

返回目录

2.3 PHP简单编程

参考http://www.w3school.com.cn/php/

  • 测试php可正常工作:

    • 输入命令:

      sudo vim /Library/WebServer/Documents/test.php
      

      内容为:

      <?php
      include($_GET["a"]);
      ?>
      
    • Safari打开127.0.0.1/test.php?a=/etc/passwd可看到/etc/passwd文件的内容。注意PHP变量大小写敏感。

    /etc/passwd文件存放的是操作系统用户信息,该文件为所有用户可见。用户信息记录了由6个分号组成的7个信息,解释如下:

    1. 用户名
    2. 密码(已经加密)
    3. UID(用户标识),操作系统自己用的
    4. GID组标识
    5. 用户全名或本地帐号
    6. 开始目录
    7. 登录使用的Shell,就是对登录命令进行解析的工具
  • 尝试获取表单数据,输入命令:

    sudo vim /Library/WebServer/Documents/login.php
    

    内容为:

    <!DOCTYPE html>
    <html>
    <body>
    
    <?php
    echo "我的第一段 PHP 脚本!";
    
    $uname=($_GET["username"]);
    $pwd=($_GET["password"]);
    
    echo $uname;
    echo $pwd;
    
    ?>
    
    </body>
    </html>
    
  • 该php的参数是从前面login.html提交的表单获取的数据
  • 理解表单与后台服务器的数据交互方式
  • 自己再试试POST方法提交

返回目录

3 macOS下MySQL的安装与配置

macOS没有自带MySQL,需要我们自己安装!

3.1 安装

  • 访问MySQL官方网站下载页面Download MySQL Community Server,下载dmg文件:
  • 双击打开MySQL安装器进行安装:
  • 一路next(中间需要输入用户密码),到配置MySQL Server这一步时需要选择是用强密码(SHA256)加密还是用传统密码加密,这里我们选用传统密码加密即可:
  • 然后要求为"root"用户配置8位以上的口令:
  • 安装完成:

返回目录

3.2 查看MySQL服务是否开启

  • 打开系统偏好设置,点击最下面的MySQL图标:
  • 发现MySQL服务已经开启:

    点击Stop MySQL Server可以关闭MySQL服务,同时可以去掉按钮下面的对勾不让MySQL开机自启动。

返回目录

3.3 配置环境变量

若不设置环境变量,输入命令太繁琐,每次登陆mysql均需要输入命令:/usr/local/mysql/bin/ mysql -u root -p

windows系统直接在环境变量中添加mysql的路径,mac系统则需要在/home下的.bash_profile文件中新建path路径指向mysql的路径

  • 输入命令echo $HOME查看home目录:

    mac默认的home目录为当前用户根目录

  • 输入命令touch .bash_profile创建.bash_profile文件;

  • 输入命令open -e .bash_profile打开并编辑.bash_profile文件,直接输入以下语句:

    export PATH=${PATH}:/usr/local/mysql/bin
    

    然后关闭即可保存修改:

  • 输入命令source .bash_profile更新刚配置的环境变量;

  • 重新打开终端,输入命令mysql -u root -p输入刚刚设置的口令即可成功登录:

返回目录

3.4 基本操作

需要注意的是在>mysql后输入的命令都是sql命令,所以必须以;结尾,否则会提示sql语句错误!

  • 登录mysql:

    mysql -u root -p
    
    然后可以输入mqsql指令了~
  • 修改密码(折腾了好久>_<):

    mysqladmin -u root -p password 新密码
    
  • 查看版本信息:

    select version();  
    
  • 退出mysql:

    exit;
    
  • 对数据库的操作:

    • 创建数据库:

      create database tset20155314;
      
    • 查询数据库:

      show databases;
      
    • 删除数据库:

      drop database test20155314;
      
    • 选择数据库:

      use database mydb20155314;
      
  • 对数据表的操作:

    • 创建数据表:

      create table users(
      	username varchar(20),
      	password varchar(20)
      );
      
    • 增加一条记录:

      insert into users values(\'刘子健\', \'20155314\');
      
    • 查询记录:

      select * from users;
      
    • 修改一条记录:

      update users set username=\'秦诗茂\' where password=\'20155314\';
      
    • 删除一条记录:

      delete from users where username=\'秦诗茂\';		```
      <img src="https://images2018.cnblogs.com/blog/1071508/201805/1071508-20180518214934802-1805744194.png" width="100%" />
      
      

    想学sql语法的点我

返回目录

4 phpMyAdmin for mac:让MySQL可视化

为了方便,有必要安装一个可视化的工具,这里我们选择phpMyAdmin。

PhpmyAdmin是一个用PHP编写的,基于Web的MySQL数据库管理工具。它能够创建和删除数据库,创建/删除/修改表格,删除/编辑/新增字段,执行SQL脚本等。可以通过互联网控制和操作MySQL。通过PhpMyAdmin可以完全对数据库进行操作,例如建立、复制/删除数据等等。管理 MySQL-Server以及单一数据库的PHP程序,对于不熟悉MySQL命令列指令的人来说,是很方便的管理工具。

  • 访问phpMyAdmin官网,直接点击绿色按钮下载最新的zip包(多语言版本,支持简体中文):
  • 下载完成后,将解压后的文件夹重命名为phpMyAdmin,然后放到Apache路径的根目录(默认/Library/WebServer/Documents)下;
  • 在浏览器中输入localhost/phpMyAdmin,出现MySQL的登陆页面,在该页面可以设置语言:
  • 但是用root和之前设置的密码(为空)登录时会提示空密码登录被禁止而登录失败:
  • 这时我们需要修改配置文件config.sample.inc.php
    • 终端中输入命令:

      sudo vim /Library/WebServer/Documents/phpMyAdmin/config.sample.inc.php
      
    • $cfg[\'Servers\'][$i][\'AllowNoPassword\'] = false;
      改为$cfg[\'Servers\'][$i][\'AllowNoPassword\'] = true;,并且把$cfg[\'Servers\'][$i][\'host\'] = \'localhost\';改成$cfg[\'Servers\'][$i][\'host\'] = \'127.0.0.1\';

    • config.sample.inc.php复制一份改名为 config.inc.php即可:

  • 重新输入用户名root和空密码,看到如下页面,就大功告成了!!

返回目录

5 macOS下基于Eclipse+Tomcat+XAMPP的Web编程

XAMPP是大二下学期Java课上娄老师推荐的一个功能强大的建站集成软件包,它集成了Apache、MySQL、PHP、PERL和Tomcat。XAMPP非常容易安装和使用:只需下载,解压缩,启动即可。需要使用MySQL时只需要将相应的端口打开即可。

这次web实验本想在Mac下用XAMPP搭建Apache+MySQL环境,但是其中遇到了很多棘手的问题,时间原因我还是选择了用Eclipse+Tomcat+MySQL来做Web开发。

5.1 Apache Tomcat的安装和配置

  • 下载Tomcat8.5,这里我下载的是apache-tomcat-8.5.31.zip文件:

  • 解压,将解压过的文件名重命名为tomcat,并将tomcat文件夹拖到/usr/local/目录下;

  • 进入tomcat路径,启动tomcat,输入命令:

    cd /usr/local/tomcat/bin
    
  • 我们需要为.sh文件添加可执行权限,输入命令:

    sudo chmod 777 *.sh
    
  • 启动tomcat,输入命令:

    ./startup.sh
    
  • 打开Safari,输入http://localhost:8080/进行测试,若能正常进入apache页面,表示启动成功:

  • 关闭tomcat,输入命令:

    ./shutdown.sh
    

返回目录

5.2 Eclipse for mac的安装和配置

  • 下载安装Eclipse

  • 配置工作路径:
  • 导入已有项目:

返回目录

5.3 基于HTML+JSP+JavaScript的前端编程

  • 登录页面login.jsp代码如下:

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>登录</title>
        <meta name="description" content="slick Login">
        <meta name="author" content="Webdesigntuts+">
       <!-- <link rel="stylesheet" type="text/css" href="css/style.css" />   -->
            <!-- CSS -->
            <link rel="stylesheet" href="css/reset.css">
            <link rel="stylesheet" href="css/supersized.css">
            <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
        <script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
        <script type="text/javascript" src="placeholder.js"></script>
    </head>
    <body>
        <form id="slick-login" action="login" method="post" accept-charset="UTF-8">
            <label for="username">username</label><input type="text" name="username" class="placeholder" placeholder="用户名">
            <label for="password">password</label><input type="password" name="password" class="placeholder" placeholder="密码">
            <input type="submit" value="登录">
        </form>
            <!-- Javascript -->
            <script src="css/jquery-1.8.2.min.js" ></script>
            <script src="css/supersized.3.2.7.min.js" ></script>
            <script src="css/supersized-init.js" ></script>
            <script src="css/scripts.js" ></script>
    </body>
    </html>
    
  • 动态登录界面(非常酷炫,背景图可自动顺序循环切换,由1个gif腾龙动图和3个jpg/png初音妹子高清无水印大图构成,通过调用3个外部css和4个js文件来实现):

  • 登录成功,会有妹子欢迎:

  • 登录失败,当然也有妹子欢(ju)迎(jue)_

  • 登录成功,倒计时结束后跳转至后台学生选课系统界面的首页:

    • 系统首页:
    • 用户管理(对应usermanage表):
    • 学生信息(对应student表):
    • 选课管理(对应sc表):
    • 课程成绩(对应course表):
    • 用户管理(对应user表):
    • 退出用户管理系统(点击右下角的“注销退出”或右上角的“退出”均可):

      点击“确定”会退回到登录界面。
    • 对Mysql数据库执行Insert操作(以student表为例):
      • 双击“添加记录”按钮:
      • 输入value(这里设置学号、姓名、性别不能为null,否则弹窗警告),点击确定:
      • 弹窗提示添加成功:
      • 回到学生信息页面,发现最下方多了一条记录,确认是刚才新添加的,且记录条数也加了1:
      • 再回到phpMyAdmin中查看student表,发现也新增了一条记录,确认是刚才添加的,表明对Mysql数据库成功执行Insert操作:
    • 删除操作同理,此处就不再赘述。

返回目录

6 简单SQL注入与XSS

Web安全这一块是下一个实验的主要内容,篇幅原因这里就不再赘述了,详情请移步我的实验九博客:2017-2018-2 20155314《网络对抗技术》Exp9 Web安全基础

返回目录

实验中遇到的问题及解决过程

MySQL报错: ERROR 1045 (28000): Access denied for user \'root\'@\'localhost\' (using password: NO)

解决方案:修改my.cnf,添加skip-grant-tablesskip-networking

  1. 输入命令sudo vim /etc/my.cnf新建配置文件my.cnf

  2. 添加如下代码:

    [mysqld]
    skip-grant-tables
    skip-networking
    
  3. 重启MySQL;

  4. 输入命令mysql -u root -p,然后默认空密码即可成功登录:

phpMyAdmin报错: Warning: mysqli::real_connect(): (HY000/2002): No such file or directory

###解决方案 - 终端中输入命令:
```
sudo vim /Library/WebServer/Documents/phpMyAdmin/config.inc.php
```
  • $cfg[\'Servers\'][$i][\'host\'] = \'localhost\';改成$cfg[\'Servers\'][$i][\'host\'] = \'127.0.0.1\';即可:
  • 成功登录!

返回目录

实验总结与体会

  在做自己的前端时,我主要将时间花在了登录界面动态切换背景图片上,同样百度研究了大量的博客、文库和别人的模版,调用了3个外部css和4个js才完成了这一酷炫的效果。在做后台数据库时,我结合这学期选修的数据库原理与安全课上所学知识,用XAMPP集成的mysql建立了自己的学生管理系统数据库以及几个数据表,顺便也熟悉一下sql语句的语法,真是一举两得。最后令人遗憾的是,我的学生管理系统并没有实现数据库数据操纵四大功能——增删查改中的修改功能,本来想找时间好好完善一下,由于期末临近就被多次搁置了,删除功能也经常出现一些未知问题,精力有限并没能解决。

返回目录

参考资料

返回目录

以上是关于2017-2018-2 20155314《网络对抗技术》Exp8 Web基础的主要内容,如果未能解决你的问题,请参考以下文章

2017-2018-2 20155303『网络对抗技术』Exp7:网络欺诈防范

2017-2018-2 20155225《网络对抗技术》实验七 网络欺诈防范

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

2017-2018-2 20155303『网络对抗技术』Exp9:Web安全基础

2017-2018-2 20155231《网络对抗技术》实验二:后门原理与实践

2017-2018-2 20155225《网络对抗技术》实验二+ 后门进阶