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部落格