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
輸入systemctl start apache2開啟apache2服務
輸入open http://127.0.0.1/，瀏覽器跳轉到apache介面，成功開啟了服務
理解HTML，理解表單，理解GET與POST方法：
HTML（超文字標記語言）是用於建立網頁的標準語言，它定義了網頁的結構和內容。HTML檔案通常以.html或.htm為字尾，由一系列標籤組成，這些標籤用於描述網頁上的元素，如標題、段落、連結、影像等。
HTML表單是用於收集使用者輸入資訊的一種基本的HTML元素。它允許使用者在網頁上輸入資料、進行選擇、上傳檔案等，然後將這些資料提交到伺服器進行處理。此外，還可以利用CSS樣式表來美化表單外觀，以及JavaScript來增強表單的功能性和使用者體驗，比如實現客戶端驗證、動態更新表單內容等。
GET和POST是HTTP協議中用於請求資料的兩種主要方法，它們在傳送資料時存在顯著差異：
GET方法：主要用於從指定的伺服器獲取資料。當使用GET方法時，查詢字串以鍵值對的形式附加在URL地址後面，一起傳送到伺服器。GET請求的資料會顯示在URL中，因此有一定的長度限制，並且不安全（資料可能被洩露）。此外，GET請求可以被快取和儲存在瀏覽器的瀏覽記錄中，但不會改變伺服器上的資源。
POST方法：主要用於向伺服器提交資料進行處理。POST請求將資料放在請求體（body）中傳送，而不是URL中，因此沒有長度限制，並且更加安全（資料不會直接暴露在URL中）。POST請求通常用於提交表單資料，如使用者註冊、登入、檔案上傳等操作。POST請求不會被快取，也不會儲存在瀏覽器的瀏覽記錄中。
進入 /var/www/html路徑，以root開啟
在目錄下新建一個能夠提交使用者名稱和密碼的含有表單的html檔案
其中的html程式碼為：
<!DOCTYPE html>
<html>
<head>
<title>20202411</title>
<style>
body {
background: linear-gradient(to bottom right, #3498db, #e74c3c);
font-family: Arial, sans-serif;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
animation: jump 1s infinite;
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
p {
margin-top: 2em;
}
form {
background: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background: #2ecc71;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: #27ae60;
}
</style>
<script>
function validateForm() {
var username = document.forms["loginForm"]["username"].value;
var password = document.forms["loginForm"]["password"].value;
if (username == "" || password == "") {
alert("Please enter both username and password.");
return false;
}
}
</script>
</head>
<body>
<h1>Login Form</h1>
<form name="loginForm" action="login.php" method="POST" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
雙擊html檔案可以瀏覽器中的登陸頁面
2.2 Web前端javascipt
理解JavaScript的基本功能，理解DOM：
JavaScript是一種輕量級的、解釋型或即時編譯型的程式語言，主要用於在瀏覽器中實現網頁的動態效果和互動性。JavaScript的基本功能有事件處理、操作DOM、非同步程式設計、JSON處理、一等函式。DOM（文件物件模型）是HTML和XML文件的程式設計介面，它提供了一種結構化的方式來訪問和操作這些文件的內容。透過JavaScript對DOM的操作，開發人員可以實現複雜的網頁應用和互動效果。
增加JavaScript驗證使用者名稱、密碼的規則：使用者名稱不能為空，且只能包含字母、數字和下劃線。密碼不能為空，且長度必須至少為6個字元。
完整程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>20222325</title>
<style>
body {
background: linear-gradient(to bottom right, #3498db, #e74c3c); /* 修改背景顏色 */
font-family: Arial, sans-serif;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
animation: jump 1s infinite;
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
p {
margin-top: 2em;
}
form {
background: rgba(0, 0, 0, 0.5); /* 表單背景顏色 */
padding: 20px;
border-radius: 10px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background: #2ecc71; /* 提交按鈕背景顏色 */
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
}
input[type="submit"]:hover {
background: #27ae60; /* 提交按鈕懸停背景顏色 */
}
</style>
<script>
function validateForm() {
var username = document.forms["loginForm"]["username"].value;
var password = document.forms["loginForm"]["password"].value;
var errorMessage = "";
if (username == "") {
errorMessage += "請輸入使用者名稱。\n";
} else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
errorMessage += "使用者名稱只能包含字母、數字和下劃線。\n";
}
if (password == "") {
errorMessage += "請輸入密碼。\n";
} else if (password.length < 6) {
errorMessage += "密碼必須至少6個字元長。\n";
}
if (errorMessage != "") {
alert(errorMessage); // 顯示錯誤資訊
return false;
} else {
alert("歡迎 " + username + "!"); // 顯示歡迎資訊
return true; // 允許表單提交
}
}
</script>
</head>
<body>
<h1>登入表單</h1>
<form name="loginForm" action="login2.php" method="POST" onsubmit="return validateForm()">
<label for="username">使用者名稱:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
不輸入密碼：
不輸入使用者名稱：
輸入使用者名稱不符合規則：
輸入密碼不符合規則：
編寫php檔案作為成功登入回顯“歡迎+輸入的使用者名稱”的PHP頁面
程式碼為：
<!DOCTYPE html>
<html>
<head>
<title>20222325</title>
<style>
body {
background: linear-gradient(to bottom right, #3498db, #e74c3c); /* 修改背景顏色 */
font-family: Arial, sans-serif;
color: white; /* 修改字型顏色 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
animation: jump 1s infinite;
}
@keyframes jump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
p {
margin-top: 2em;
}
</style>
</head>
<body>
<h1>20222325</h1>
<?php
$username = $_POST["username"];
echo "<p>Welcome, $username!</p>";
?>
</body>
</html>
輸入正確格式的使用者名稱密碼回顯歡迎+使用者名稱
嘗試進行html注入：
在使用者名稱處輸入 <p>HTML注入攻擊來自2022325tjx</p> ，提交後顯示
嘗試進行JavaScript注入：
在使用者名稱處輸入 <script type="text/javascript"> alert("JavaScript注入攻擊來自20222325tjx") </script>，提交後顯示
2.3 Web後端：MySQL基礎：正常安裝、啟動MySQL，建庫、建立使用者、修改密碼、建表
kali預設安裝mysql
依次輸入
service mysql start //開啟mysql服務
mysql -u root //以root身份登入資料庫
use mysql //使用mysql
show databases; //檢視資料庫資訊
create database 20222325tjx; //建立資料庫
use 20222325tjx //更換資料庫
grant select on 202223125tjx.* to tjx@localhost identified by "20222325tjx"; //建立使用者
set password for root@'localhost'=password('20222325'); //修改密碼
create table userinfo (username VARCHAR(20),password VARCHAR(20)); //建表
show tables //檢視新建的表
這時的表是空的，嘗試向其中插入一條資料，並檢視
2.4 Web後端：編寫PHP網頁，連線資料庫，進行使用者認證
編寫sql.php用於連線資料庫。程式碼為：
<?php
// 從POST請求中獲取使用者名稱和密碼
$username = $_POST["num"];
$password = $_POST["pwd"];
// 建立一個新的MySQLi物件，連線到本地資料庫伺服器並指定資料庫
$mysqli = new mysqli("localhost", "tjx", "tjx20222325", "tjx20222325");
/* 檢查連線 */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
echo "connection ok!";
// 使用預處理語句來防止SQL隱碼攻擊
$stmt = $mysqli->prepare("SELECT * FROM userinfo WHERE username=? AND password=?");
$stmt->bind_param("ss", $username, $password);
$stmt->execute();
$result = $stmt->get_result();
// 檢查查詢結果
if ($result->num_rows > 0) {
echo "<br>Welcome!!{$username}<br>"; // 輸出歡迎資訊
} else {
echo "<br>xss by 20222325<br>"; // 輸出登入失敗資訊
}
/* 釋放結果集 */
$result->close();
$stmt->close();
$mysqli->close(); // 關閉資料庫連線
?>
修改login2.html，將表單的“action”屬性指向“sql.php”。
輸入錯誤的使用者名稱密碼登入，登入失敗。
輸入正確的使用者名稱密碼，成功登入。
2.5 最簡單的SQL隱碼攻擊，XSS攻擊測試
sql注入：在使用者名稱一欄輸入' or 1=1# 密碼隨意輸入，成功登入。
xss攻擊：在使用者名稱一欄輸入 <script>alert("xss by 20222325");</script> 成功登入。
2.6 安裝DVWA或WebGoat平臺，並完成SQL隱碼攻擊、XSS、CSRF攻擊
kali中前往- webgoat下載 下載webgoat-2023.8.jar
進入對應目錄輸入java -jar webgoat-2023.8.jar 啟動webgoat
在瀏覽器中輸入網址http://localhost:8080/WebGoat/login，註冊新賬號並登入Webgoat平臺，我的賬號密碼均為20222325
2.6.1 sql注入
SQL隱碼攻擊是一種透過向SQL查詢語句中注入惡意程式碼來攻擊資料庫的技術。攻擊者利用應用程式在處理使用者輸入時未進行適當的驗證，將惡意SQL語句插入到查詢中，從而訪問、修改或刪除資料庫中的資料。這種攻擊可能導致資料洩露、資料篡改或資料庫服務中斷等嚴重後果。
2.6.1.1 String SQL injection
選擇A3->SQL Injection（Intro）->9，題目要求透過下面的下拉框選擇相關的資料，檢索出users表中的所有使用者資訊，我們無需知道任何特定的使用者名稱就可以得到完整的列表。
在SQL查詢語句中選擇"Smith'""or"和""1'='1"後提交
我們成功的獲取了所有使用者的資訊，注入攻擊成功
2.6.1.2 Numeric SQL injection
選擇A3->SQL Injection（Intro）->10，題目要求我們使用兩個輸入欄位，嘗試從使用者表中檢索所有資料。並且這兩個欄位中，只有一個容易受到SQL隱碼攻擊的影響，需要找出是哪一個，才能成功檢索出所有資料。
在輸入框分別輸入1，1 1=1後提交
注入攻擊成功
2.6.1.3 Compromising confidentiality with String SQL injection
選擇A3->SQL Injection（Intro）->11，題目要確認自己是不是這個公司收入最高的工作者，那麼就要檢視所有工作者的工資。
在輸入框分別輸入1，1'OR'1'='1後提交
注入攻擊成功
2.6.2 xss攻擊
XSS攻擊是一種在Web應用中注入惡意指令碼的攻擊方式。攻擊者透過在網頁中注入惡意程式碼，誘使使用者的瀏覽器執行這些指令碼，從而竊取使用者資訊、劫持使用者會話、修改網頁內容等。XSS攻擊可以分為儲存型XSS、反射型XSS和基於DOM的XSS三種型別。
選擇A3->Cross Site Sorpting->7進行Reflected XSS
在card number欄輸入<script> alert("20222325_Reflected XSS") </script>後提交
xss攻擊成功
2.6.3 csrf攻擊
跨站請求偽造，也稱為一鍵攻擊或會話騎乘，縮寫為 CSRF或 XSRF，是一種對網站的惡意利用，其中網站的使用者傳輸未經授權的命令信任。與利用使用者對特定站點的信任的跨站點指令碼 (XSS) 不同，CSRF 利用站點在使用者瀏覽器中的信任。
CSRF 攻擊針對/濫用基本 Web 功能。如果網站允許，則會導致伺服器狀態發生變化，例如更改受害者的電子郵件地址或密碼，或者購買某些東西。強迫受害者檢索資料對攻擊者沒有好處，因為攻擊者沒有收到響應，而受害者收到了。因此，CSRF 攻擊的目標是狀態更改請求。
選擇A10->Cross-Site Request Forgeries->8進行Login CSRF attack
保持此選項卡開啟，然後在另一個選項卡中根據我自己的使用者名稱建立一個使用者字首為csrf-。我的的使用者名稱是20222325，因此建立一個名為csrf-20222325的新使用者並登入。
用新使用者訪問這道題目，點選提交solved看到題目已經透過，csrf攻擊成功
3.問題及解決方案
-
問題1：想要在/var/www/html路徑下新建html檔案，發現不能新建檔案。
-
問題1解決方案：選擇以root身份開啟資料夾，新建了html檔案。
-
問題2：表單的action屬性指向php後，確認登入會提示下載php檔案而不是進入相應頁面。
-
問題2解決方案：我的html靜態頁是透過雙擊開啟的,所以提交的時侯是使用的本地路徑,是不經Apache的,瀏覽器無法直接處理PHP,就提示我下載。選擇更換為在瀏覽器中輸入localhost/login2.html開啟html檔案。
4.學習感悟、思考等
透過完成Web前端HTML部分的實驗後，我深刻理解了HTML的基本結構和表單的使用；在加入JavaScript程式碼來驗證使用者名稱和密碼的規則後進行了注入攻擊，透過在輸入框中注入HTML及JavaScript程式碼加深了我對前端安全漏洞的理解，也提高了我的防範意識；透過安裝、啟動MySQL，建庫、建立使用者、修改密碼、建表我熟悉了對資料庫的操作；簡單的SQL隱碼攻擊，XSS攻擊測試也讓我瞭解瞭如何利用這些漏洞來竊取資料或執行惡意指令碼；透過安裝和使用WebGoat平臺，我進行了幾種攻擊練習，這使我能夠深入瞭解各種Web安全威脅及其防禦方法。透過實際操作，我不僅鞏固了之前學到的知識，還提升瞭解決實際安全問題的能力。透過本次實驗，我不僅掌握了技術技能，更重要的是培養了安全意識和防範能力。
參考資料
- 手把手教你在kali-Linux 2020.3安裝webgoat
- WebGoat通關攻略與詳細解析——SQL Injection(intro)篇
- WebGoat (A7) Cross Site Scripting (XSS)
- webgoat-Request Forgeries 請求偽造