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博客

返回目錄