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

目录

• 实验内容
• 实验环境
• 基础问题回答
• 预备知识
• 实验步骤
  • 1 macOS下Apache的配置
  • 2 macOS下PHP的配置
    • 2.1 开启PHP
    • 2.2 修改Apache目录
    • 2.3 PHP简单编程
  • 3 macOS下MySQL的安装与配置
    • 3.1 安装
    • 3.2 查看MySQL服务是否开启
    • 3.3 配置环境变量
    • 3.4 基本操作
  • 4 phpMyAdmin for mac：让MySQL可视化
  • 5 基于Eclipse+Tomcat+XAMPP的Web编程
    • 5.1 Apache Tomcat的安装和配置
    • 5.2 Eclipse for mac的安装和配置
    • 5.3 基于HTML+JSP+JavaScript的前端编程
  • 6 简单SQL注入与XSS
• 实验中遇到的问题及解决过程
• 实验总结与体会
• 参考资料

返回目录

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库进行相应数据库操作

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
             

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

• 修改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
             

  

• 在Safari中输入

  127.0.0.1

  localhost

  ，出现如下PHP的info页，表示PHP开启成功：

  

  如果不成功，用命令

  sudo apachectl restart

  重启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页，则表示目录修改成功。

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

• 测试php可正常工作：

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

    内容为：

    <?php
    include($_GET["a"]);
    ?>
               

  • 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方法提交

macOS没有自带MySQL，需要我们自己安装！

• 访问MySQL官方网站下载页面Download MySQL Community Server，下载dmg文件：

  

• 双击打开MySQL安装器进行安装：

  

• 一路next（中间需要输入用户密码），到配置MySQL Server这一步时需要选择是用强密码（SHA256）加密还是用传统密码加密，这里我们选用传统密码加密即可：

  

• 然后要求为"root"用户配置8位以上的口令：

  

• 安装完成：

  

• 打开系统偏好设置，点击最下面的MySQL图标：

  

• 发现MySQL服务已经开启：

  点击

  Stop MySQL Server

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

若不设置环境变量，输入命令太繁琐，每次登陆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

  输入刚刚设置的口令即可成功登录：

  

需要注意的是在

>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语法的点我！

为了方便，有必要安装一个可视化的工具，这里我们选择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开发。

• 下载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
             

• 下载安装Eclipse：

  ​

  

  

• 配置工作路径：

  

• 导入已有项目：

  

  

• 登录页面

  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操作：

      

  • 删除操作同理，此处就不再赘述。

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

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

• mac os下的Apache配置 macOS Sierra 10.12
• Mac 安装 MySQL - CSDN博客
• 2018.4.26 。Mac安装Mysql - LegendQi - 博客园
• （mac系统下）mysql 入门 - nicho_c - 博客园
• PHP漏洞全解(详细介绍) - agang_19 - 博客园
• mac下配置Apache+PHP+MySQL环境 - 简书
• phpMyAdmin安装并配置允许空密码登录
• Mac XAMPP 7.2.0 htdocs文件夹 - CSDN博客
• Mac下jdk的安装路径 - CSDN博客
• Mac系统上eclipse+tomcat+mysql环境的搭建 - CSDN博客
• (二)Mac下安装及配置Eclipse、JDK - CSDN博客
• XAMPP在Mac下的apache站点主目录更改 - CSDN博客
• tomcat9.0 mac终端启动成功，却无法访问http://localhost:8080/ - CSDN博客
• Video to GIF converter
• eclipse创建的jsp页面无故报错解决办法 - CSDN博客
• 关于Java Web 项目导入之后 jsp 报错解决方法 - CSDN博客
• jsp页面第一行出错 - CSDN博客