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.實驗過程
(1)Web前端HTML
1.開啟Apache服務
在kali 的瀏覽器中輸入127.0.0.1，顯示Apache預設網頁，顯示如下表示服務開啟成功。
2.建立含表單的html檔案
使用指令進入Apache目錄下cd /var/www/html並新建20222419login.html檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登入網頁</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
form {
text-align: center;
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
label, input {
display: block;
width: 100%;
max-width: 300px;
margin: 10px auto;
}
input[type="button"] {
width: 100px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>登入</h1>
<form action="" method="post">
<label for="username">使用者:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="button" name="login_btu" value="登入" onclick="login()">
</form>
</body>
</html>
在瀏覽器中訪問localhost/20222419login.html
3.理解表單、GET與POST方法
表單：HTML 表單使用 標籤來定義。表單元素包括文字框、密碼框、核取方塊、單選按鈕、提交按鈕等。這些元素用於接收使用者輸入。
get方法：
定義：GET 方法透過 URL 傳送表單資料。表單資料被編碼為 URL 引數附加在請求 URL 的末尾。
特點：
資料在 URL 中可見，安全性較低。
資料長度受限（通常為 2048 個字元）。
可用於書籤，因為引數包含在 URL 中。
多用於獲取資料而不是提交資料。
POST 方法
定義：POST 方法透過 HTTP 請求主體傳送表單資料，而不是 URL。
特點：
資料在請求主體中不可見，安全性較高。
無資料長度限制。
不會被瀏覽器快取。
適用於提交資料，如表單提交、檔案上傳等。
一般GET是隻讀，POST是寫有互動
（2）Web前端JavaScript
1.理解JavaScript的基本功能，理解DOM
JavaScript是一種用於使網頁動態和互動的程式語言，而DOM是表示網頁結構的程式設計介面。
DOM 是表示 HTML 文件的程式設計介面。它允許指令碼訪問和更新文件的內容、結構和樣式。
2.在（1）的基礎上加入JavaScript程式碼，用於判斷使用者名稱或密碼是否為空和在使用者點選登陸按鈕後回顯“歡迎+輸入的使用者名稱”
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登入網頁</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
form {
text-align: center;
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
label, input {
display: block;
width: 100%;
max-width: 300px;
margin: 10px auto;
}
input[type="button"] {
width: 100px;
margin: 20px auto;
}
</style>
<script>
function login() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (username === "" || password === "") {
alert("使用者名稱或密碼不能為空！");
return;
}
document.write("歡迎 " + username);
}
</script>
</head>
<body>
<h1>登入</h1>
<form action="" method="post">
<label for="username">使用者:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="button" name="login_btu" value="登入" onclick="login()">
</form>
</body>
</html>
測試結果：
使用者為空：
密碼為空：
成功登入：
接下來嘗試性攻擊：
html：
script注入：
（3）Web後端：MySQL基礎：正常安裝、啟動MySQL，建庫、建立使用者、修改密碼、建表
1.使用命令，開啟MySQL服務
2.使用命令，進入root許可權
3.輸入show databases;，檢視資料庫基本資訊。
4.建庫
5.建立新使用者
6.建立了一個名為loginuser的表並向loginuser表中插入了一條記錄
7.將2419hxy資料庫給2419hxy即可
8.重新整理一下許可權
9.登陸驗證：成功
(4)Web後端：編寫PHP網頁，連線資料庫，進行使用者認證
編輯welcome.php檔案
<?php
// 檢查是否有表單提交
if ($_SERVER["REQUEST_METHOD"] == "POST") {
echo "Hello World!!!<br>";
// 獲取表單資料
$user = $_POST['username'];
$pass = $_POST['password'];
// 建立資料庫連線
$servername = "localhost";
$username = "2419hxy";
$password = "123456";
$dbname = "2419hxy";
// 查詢資料庫
$sql = "SELECT * FROM loginuser WHERE uname = '$user' AND password = '$pass';";
echo $sql;
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連線是否成功
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "<br>Connected Successfully!<br>";
// 執行查詢
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<br> Welcome {$user}! <br>";
} else {
echo "<br>登入失敗，請檢查使用者名稱和密碼是否正確。<br>";
}
// 關閉資料庫連線
$conn->close();
}
?>
html網頁修改的地方：
登入失敗：
登陸成功：
(5)最簡單的SQL隱碼攻擊，XSS攻擊測試
SQL隱碼攻擊
使用者名稱為' or 1=1#，密碼任意
SQL語法：
- 在SQL查詢中，' 用於表示字串的開始和結束。
- 2.or 是一個邏輯運算子，用於連線多個條件。
- 1=1 是一個始終為真的條件，因為1總是等於1。
-
是MySQL中的註釋符號，表示該符號後面的內容將被忽略。
假設有一個SQL查詢用於驗證使用者登入，例如：SELECT * FROM users WHERE username = '$user' AND password = '$pass';
如果攻擊者在使用者名稱欄位中輸入 ' or 1=1#，最終的SQL查詢將變為：SELECT * FROM users WHERE username = '' or 1=1#' AND password = '$pass';
由於 1=1 始終為真，這個查詢將返回所有使用者的記錄，而不管密碼是什麼。這使得攻擊者能夠繞過身份驗證。
XSS攻擊
在使用者名稱中輸入：<script>alert('2419XSS')</script>，密碼任意
(6)安裝pikachu平臺，並完成SQL隱碼攻擊、XSS、CSRF攻擊。
SQL隱碼攻擊：or 1=1#
XSS：
CSRF攻擊(get):
參考連結https://blog.csdn.net/2302_82189125/article/details/138549113
啟動BurpSuite，登入賬戶後修改電話：
找到修改的值，複製這條請求然後在另一個頁面開啟
將地址改為dky
成功修改：
3.問題及解決方案
-
問題1：pikachu的CSRF無法使用
-
問題1解決方案：開啟這個路徑，找到第70行，把MYSQL_ASSOC改成MYSQLI_ASSOC，儲存檔案，重新整理網頁。
4.學習感悟、思考等
本次實驗比較順利，因為使用的pikachu是同學已經配置好了3個平臺的win10虛擬機器，所以在第六步實驗的時候節省了很多時間。前面5個實驗按部就班的完成，在html與php的時候遇到了一點小問題，就是輸入密碼後無法跳轉，但是透過詢問GPT給出了正確的解決方案。
這次實驗內容涵蓋了網頁前端和後端開發的知識，以及與資料庫互動的相關技能，整體流程比較清晰。從HTML和JavaScript的基礎部分，到後端的MySQL和PHP，再到SQL隱碼攻擊與XSS攻擊，每一步都讓我有了新的收穫。而前面5步的結果，可以直接使用pikachu這樣的平臺直接測試，大大節約了時間。