Web前端HTML，能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法，编写一个含有表单的HTML。
Web前端javascipt，理解JavaScript的基本功能，理解DOM。在1的基础上，编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”。尝试注入攻击：利用回显用户名注入HTML及JavaScript。
Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
Web后端：编写PHP网页，连接数据库，进行用户认证
最简单的SQL注入，XSS攻击测试
安装Webgoat或类似平台，并完成SQL注入、XSS、CSRF攻击。

二、实验内容

2.1 Web前端HTML

systemctl start apache2	#开启Apache服务
systemctl stop apache2	#关闭Apache服务

HTML是一种标记语言，用于创建网页和其他互联网应用程序的结构和内容。HTML使用标记来描述文档的结构和内容，这些标记被称为HTML标签。
表单是HTML中的一种元素，用于收集用户输入的数据。表单通常包含输入字段、单选按钮、复选框、下拉列表等元素，用户可以在这些元素中输入或选择数据。
GET和POST是HTTP协议中的两种请求方法。GET方法用于从服务器获取数据，而POST方法用于向服务器提交数据。GET方法将数据附加到URL的末尾，而POST方法将数据包含在请求的正文中。GET方法通常用于获取数据，而POST方法通常用于提交表单数据或其他敏感数据。

一个简单的登录界面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body style="background: url(bg.jpg) repeat-x #fff;"  >
<img style = "margin-top:-9px"  src="banner.jpg">
<div style="text-align:center">
<h1>这是一个登录页面</h1>
<form name="form1" method="post" action="">
用户名：<input type="text" name="usrname"/>
<br><br>
密码：<input type="password" name="pwd"/>
<br><br>
<input type="submit" name="sub1" value="确定"/>
<input type="reset" name="sub1" value="重置"/>
</form>
</div>
</body>
</html>

2.2 Web前端javascipt

2.2.1 编写javascipt


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body style="background: url(bg.jpg) repeat-x #fff;"  >
    
    <--! javascipt 的内容 -->
    <script type="text/javascript">
        function check(){
            var uname = form1.usrname.value;
            var upwd = form1.pwd.value;
            
            if(uname == ""){
                alert("用户名不能为空！")}	
            else if(upwd == ""){
                alert("密码不能为空！");}
            else {
                document.write("欢迎"+uname)
            }
        }
    </script>

<img style = "margin-top:-9px"  src="banner.jpg">
<div style="text-align:center">
<h1>这是一个登录页面</h1>
<form name="form1" method="post" action="">
用户名：<input type="text" name="usrname"/>
<br><br>
密码：<input type="password" name="pwd"/>
<br><br>
<input type="submit" name="sub1" value="确定" onclick="check()"/> <--! 给点击添加函数动作 -->
<input type="reset" name="sub1" value="重置"/>
</form>
</div>
</body>
</html>

2.2.2 注入攻击：利用回显用户名注入HTML及JavaScript

 <b>重生之我是HTML注入攻击</b> 20202419 #HTML注入
 <script type="text/javascript"> alert("关于我穿越异世界成为JavaScript注入攻击的那件事20202419") </script>  20202419   #JavaScript注入

2.3 Web后端：MySQL基础

2.3.1 启动mysql

linux 系统开启mysql：

systemctl start mysql # 打开mysql服务
systemctl status mysql # 查看服务当前状态

windows：

2.3.2 常见的sql操作：

2.3.2.1 当涉及到MySQL数据库的增删改查操作时，以下是几个常见的示例：

1. 插入数据（INSERT）：
   ```sql
   INSERT INTO table_name (column1, column2, column3) VALUES (value1, value2, value3);
   ```

2. 查询数据（SELECT）：
   - 查询所有数据：
     ```sql
     SELECT * FROM table_name;
     ```
   - 查询特定列的数据：
     ```sql
     SELECT column1, column2 FROM table_name;
     ```
   - 带条件的查询：
     ```sql
     SELECT * FROM table_name WHERE condition;
     ```

3. 更新数据（UPDATE）：
   ```sql
   UPDATE table_name SET column1 = value1, column2 = value2 WHERE condition;
   ```

4. 删除数据（DELETE）：
   ```sql
   DELETE FROM table_name WHERE condition;
   ```

2.3.2.2 以下是几个用户管理的示例，假设我们有一个名为"users"的表，包含以下列：id、username和password。

1. 创建用户（INSERT）：
   ```sql
   INSERT INTO users (username, password) VALUES ('john', 'password123');
   ```

2. 查询所有用户（SELECT）：
   ```sql
   SELECT * FROM users;
   ```

3. 查询特定用户（SELECT）：
   ```sql
   SELECT * FROM users WHERE username = 'john';
   ```

4. 更新用户密码（UPDATE）：
   ```sql
   UPDATE users SET password = 'newpassword' WHERE username = 'john';
   ```

5. 删除用户（DELETE）：
   ```sql
   DELETE FROM users WHERE username = 'john';
   ```

2.3.2.3以下是几个关于数据表的示例：

1. 创建数据表：
   ```sql
   CREATE TABLE table_name (
       column1 datatype,
       column2 datatype,
       column3 datatype,
       ...
   );
   ```

2. 删除数据表：
   ```sql
   DROP TABLE table_name;
   ```

3. 添加列：
   ```sql
   ALTER TABLE table_name ADD column_name datatype;
   ```

4. 修改列的数据类型：
   ```sql
   ALTER TABLE table_name MODIFY column_name new_datatype;
   ```

5. 修改列名：
   ```sql
   ALTER TABLE table_name RENAME COLUMN old_column_name TO new_column_name;
   ```

6. 删除列：
   ```sql
   ALTER TABLE table_name DROP COLUMN column_name;
   ```

7. 约束（添加主键约束）：
   ```sql
   ALTER TABLE table_name ADD PRIMARY KEY (column_name);
   ```

8. 索引（添加索引）：
   ```sql
   CREATE INDEX index_name ON table_name (column_name);
   ```

9. 外键（添加外键约束）：
   ```sql
   ALTER TABLE table_name ADD CONSTRAINT constraint_name FOREIGN KEY (column_name) REFERENCES referenced_table (referenced_column);
   ```

2.4 Web后端编写PHP网页

2.4.1编写login.php文件

<?php
    // 数据库连接配置
    $servername = "172.16.226.87";
    $username = "root";
    $password = "DLdl@1234";
    $dbname = "user";

    // 创建数据库连接
    $conn = new mysqli($servername, $username, $password, $dbname);

    // 检查连接是否成功
    if ($conn->connect_error) {
        die("连接数据库失败: " . $conn->connect_error);
    }

    // 处理用户提交的表单数据
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // 获取用户输入的用户名和密码
        $username = $_POST["usrname"];
        $password = $_POST["pwd"];

        // 查询数据库中是否存在匹配的用户记录
        $sql = "SELECT * FROM user WHERE username = '$username' AND password = '$password'";
        $result = $conn->query($sql);

        // 检查是否查询到匹配的用户记录
        if ($result->num_rows == 1) {
            // 用户认证成功
            echo "认证成功！欢迎，" . $username . "";
        } else {
            // 用户认证失败
            echo "认证失败，请检查用户名和密码。";
        }
    }

    // 关闭数据库连接
    $conn->close();
?>

2.4.2 更新html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body style="background: url(bg.jpg) repeat-x #fff;"  >
<img style = "margin-top:-9px"  src="banner.jpg">
<div style="text-align:center">
<h1>这是一个登录页面</h1>
<form name="form1" method="post" action="login.php">
用户名：<input type="text" name="usrname"/>
<br><br>
密码：<input type="password" name="pwd"/>
<br><br>
<input type="submit" name="sub1" value="确定"/>
<input type="reset" name="sub1" value="重置"/>
</form>
</div>
</body>
</html>

2.4.3 效果

2.5 简单的SQL注入，XSS攻击测试

2.5.1 sql注入

在用户名中输入20202419 ' or 1= 1; --

不输入密码，发现可以通过验证

但是这是有问题的：因为我测试的时候数据库中只放入了一条信息，正好满足范围值为等于1的条件。

 // 检查是否查询到匹配的用户记录
        if ($result->num_rows == 1) {
            // 用户认证成功
            echo "认证成功！欢迎，" . $username . "";
        } else {
            // 用户认证失败
            echo "认证失败，请检查用户名和密码。";

当我给数据库中增加数据后就验证失败了

那么有没有办法限定返回的数据量呢，有的，用limit 1 就可以限制。

2.5.2 XSS攻击测试

# test 1
<img src="banner.jpg"/> 'or 1 = 1 limit 1; --

# test 2 
<script> alert("XSS攻击") </script> 'or 1 = 1 limit 1; --

2.6 安装Webgoat平台，完成SQL注入、XSS、CSRF攻击

2.6.1sql注入

任意
'; UPDATE employees SET salary=99999 WHERE first_name='John

2.6.2 xss攻击

<script> alert("20202419XSS") </script>

2.6.3 CSRF

由于我始终无法实现抓包，因此CSRF攻击未能成功

CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种利用用户已经登陆的身份在用户并未明确授权的情况下进行非法操作的攻击方式。

这种攻击的基本原理如下：

用户在浏览器中登陆一个信任的网站（如银行网站），并在浏览器中存储了会话cookie。
用户在没有退出该网站的情况下，访问了一个恶意网站。这个恶意网站包含了一个向信任网站发送请求的代码。比如，这个请求可能是转账操作，目标账号是攻击者的账号。
当这个请求被发送时，由于浏览器中存在信任网站的会话cookie，所以信任网站会认为这个请求是合法的，并执行相关操作（在这个例子中，就是转账）。
在整个过程中，用户可能完全不知道已经发生了这样的操作。

这就是CSRF攻击的基本原理。它利用了网站对用户的信任，以及用户对网站的信任，实现了攻击。需要注意的是，这种攻击方式不会窃取用户的密码或其他凭据，而是“借用”了用户的身份进行操作。

防止CSRF攻击的一个常用方法是使用CSRF令牌。简单来说，每当用户进行需要验证身份的操作时，网站会生成一个随机的CSRF令牌，然后在用户的请求中携带这个令牌。由于这个令牌是随机生成的，所以恶意网站无法预测这个令牌，因此无法构造有效的请求。

三、思想感悟

完成这次实验后，我对Web开发和网络安全有了更深入的理解和实践体验。以下是我对各个部分的心得体会(注：我完全赞同ChatGPT的想法)：

Web前端HTML： 我了解到，HTML是Web开发的基础，通过各种HTML标签，可以创建出各种丰富多样的网页内容。同时，我也理解了表单的重要性，它们是用户与Web应用交互的主要方式。在实践中，我学习了如何使用GET和POST方法提交表单数据。
Web前端JavaScript： 我理解了JavaScript是一种能让网页变得“活跃”的语言，使得网页可以进行更丰富的用户交互。在这个部分，我通过操作DOM来更新网页内容，感受到了JavaScript的强大功能。
Web后端MySQL： 我对数据库的概念有了更深的理解。在安装和使用MySQL的过程中，我学习了如何管理数据库、如何创建和管理用户以及如何创建表，这些都是后端开发的重要知识。
Web后端PHP： 通过编写PHP代码，我学会了如何将前端与后端连接起来，并且实现了用户认证的功能。这让我理解到，后端开发是为前端提供数据和服务的重要部分。
网络安全： 我对网络安全的重要性有了更深的认识。我学习了如何防范SQL注入和XSS攻击，这两种都是非常常见但又很危险的网络攻击方式。通过实践，我意识到了在开发Web应用时，必须始终考虑安全性。
安全平台： 通过使用Webgoat，我有了在真实环境中进行网络攻击和防御的体验。这个平台让我更直观地理解了网络攻击的原理和防御的方法。