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

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

返回目录

实验步骤

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

• 在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;

  • 选择数据库：

    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='秦诗茂';
    

  ####想学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

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博客
• Mac XAMPP 7.2.0 htdocs文件夹 - CSDN博客
• tomcat9.0 mac终端启动成功，却没法访问http://localhost:8080/ - CSDN博客
• Video to GIF converter
• eclipse建立的jsp页面无端报错解决办法 - CSDN博客
• 关于Java Web 项目导入以后 jsp 报错解决方法 - CSDN博客
• jsp页面第一行出错 - CSDN博客

返回目录