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

实验内容

Web前端HTML(0.5分)

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

Web前端javascipt(0.5分)

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

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

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

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

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

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

返回目录

实验环境

macOS本机
macOS下Parallels Desktop虚拟机中（网络源均设置为共享网络模式）：
- Kali Linux - 64bit（攻击机，IP为10.211.55.10）
- Windows 7 - 64bit（靶机，IP为10.211.55.14）

返回目录

基础问题回答

什么是表单？
- 表单（form）是一个包含表单元素的区域，表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素，表单在网页中主要负责数据采集功能，一个表单有三个基本组成部分：表单标签、表单域、表单按钮；
- 表单标签（<form>）：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法；
- 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等；
- 表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
浏览器可以解析运行什么语言？
- HTML（超文本标记语言）
- XML（可扩展标记语言）
- Python、PHP、JavaScript、ASP等（脚本语言）
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语言
- 运行环境：数据库服务器
- 编程用途：基本的数据增、删、改、查

入门学习流程：

WebServer:
1. 首先掌握Apache的基本操作,安装、启停
2. 配置修改（如监听端口）
前端编程：
1. 熟悉HTML+JavaScript。
2. 了解表单的概念
3. 编写不同的HTML网页，放入到Apache工作目录，从浏览器访问。
后端编程：
1. 了解GET/POST方法的不同
2. 尝试使用GET/POST方法传输用户在浏览器中的输入，并在后台用PHP读出参数，根据讲出参数的不同，返回不同的内容给浏览器。
数据库编程
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.1或 http://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.en和index.html.en~orig文件，输入命令：

sudo rm /Library/WebServer/Documents/index.html.en

sudo rm /Library/WebServer/Documents/index.html.en~orig

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

在Safari中输入127.0.0.1或localhost，出现如下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.1或localhost，如果出现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;
```

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

选择数据库：
```
use database mydb20155314;
```

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

对数据表的操作：

创建数据表：

create table users(

	username varchar(20),

	password varchar(20)

);

增加一条记录：

insert into users values('刘子健', '20155314');

查询记录：
```
select * from users;
```

修改一条记录：

update users set username='秦诗茂' where password='20155314';

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

删除一条记录：

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-tables`和`skip-networking`

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

添加如下代码：

[mysqld]

skip-grant-tables

skip-networking

重启MySQL；
输入命令mysql -u root -p，然后默认空密码即可成功登录：

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

2017-2018-2 20155314《网络对抗技术》Exp8 Web基础
###解决方案
- 终端中输入命令：

```

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语句的语法，真是一举两得。最后令人遗憾的是，我的学生管理系统并没有实现数据库数据操纵四大功能——增删查改中的修改功能，本来想找时间好好完善一下，由于期末临近就被多次搁置了，删除功能也经常出现一些未知问题，精力有限并没能解决。

返回目录

参考资料

返回目录