1.实验内容
(1)Web前端HTML
能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法，编写一个含有表单的HTML。
(2)Web前端javascipt
在（1）的基础上，编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”
尝试注入攻击：利用回显用户名注入HTML及JavaScript。
(3)Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
(4)Web后端：编写PHP网页，连接数据库，进行用户认证
(5)最简单的SQL注入，XSS攻击测试
(6)安装DVWA或WebGoat平台，并完成SQL注入、XSS、CSRF攻击。
2.实验过程
(1)Web前端HTML
①能正常安装、启停Apache
使用命令打开Apache服务：service apache2 start
此时在浏览器输入 127.0.0.1，如果可以打开Apache的默认网页，则表示开启成功：
查看Apache状态，显示开启状态：sudo systemctl status apache2
关闭apache，并查看状态，显示关闭:sudo systemctl stop apache2
②.理解HTML，理解表单，理解GET与POST方法
HTML
HTML（HyperText Markup Language，超文本标记语言）是用于创建网页和网页应用的标准标记语言。它通过一系列标签（tags）来描述网页的结构和内容。这些标签可以包含文本、图像、链接、表格、表单等多种元素，并通过浏览器进行解析和展示。HTML是构建网页的基础，与CSS（层叠样式表）和JavaScript一起，共同构成了现代网页开发的核心技术栈。
表单（Form）
表单是HTML中的一个重要元素，用于收集用户输入的数据。表单可以包含多种输入字段，如文本框、密码框、单选按钮、复选框、下拉菜单、文件上传框等。用户填写完表单后，可以通过提交（submit）操作将数据传输到服务器进行处理。表单在网页中扮演着与用户交互的重要角色，广泛应用于用户注册、登录、搜索、留言等多种场景。
GET与POST方法
GET和POST是HTTP协议中用于提交表单数据的两种方法，它们的主要区别在于数据传输的方式和安全性。
GET方法：GET方法将表单数据附加在URL的末尾，以查询字符串的形式发送。由于URL是可见的，因此GET方法不适合传输敏感数据（如密码）。此外，GET方法还有数据长度限制（通常由浏览器和服务器共同决定）。GET方法主要用于请求数据，而非提交数据。
POST方法：POST方法将表单数据封装在HTTP请求的主体（body）中发送，因此数据不会暴露在URL中。这使得POST方法更适合传输敏感数据，且没有数据长度的限制。POST方法主要用于提交数据给服务器进行处理。
③.编写一个含有表单的HTML
先在记事本写好含表单的登陆页面html代码：
cd /var/www/html 进入html的文件夹
touch 20222323login.html 创建html文件
vi 20222323login.html 进入编辑页面，将html代码粘贴进去：
使用浏览器打开制作的网页，在浏览器输入localhost/20222323login.html
可跳转到自己的登陆界面。
可提交表单，实现跳转：
(2)Web前端javascipt
①.理解JavaScript的基本功能，理解DOM
JavaScript 基本功能
嵌入在HTML页面中：JavaScript 代码可以直接嵌入在HTML文档的 《script》 标签内，这使得它非常适合用于Web开发，能够动态地修改网页内容、响应用户事件等。
动态类型：JavaScript 是一种动态类型语言，变量的类型是在运行时确定的，而不是在编译时。这意味着你可以将不同类型的值赋给同一个变量。
面向对象：虽然JavaScript不是一种纯粹的面向对象语言，但它支持面向对象编程的概念，如对象、类（通过ES6引入）、继承等。
事件驱动：JavaScript 允许你定义事件处理程序，这些程序会在特定事件发生时执行，如用户点击按钮、加载页面、提交表单等。
函数式编程：JavaScript 支持函数作为一等公民，这意味着函数可以像其他数据类型一样被传递、返回和赋值。
浏览器支持：JavaScript 最初是为Web浏览器设计的，但现在它也可以在服务器端（如Node.js）和其他环境中运行。
异步编程：JavaScript 支持异步编程，允许你在不阻塞主线程的情况下执行耗时操作，如网络请求。
DOM 的基本功能
文档表示：DOM 将HTML文档解析为一个由节点（Node）组成的树形结构，每个节点都是一个对象，表示文档的一部分。
动态访问：通过DOM，你可以使用JavaScript访问和操作文档中的任何元素，如获取元素的内容、修改元素的属性、添加或删除元素等。
事件处理：DOM 允许你注册事件监听器，以便在特定事件发生时执行JavaScript代码，如用户点击按钮、鼠标悬停在元素上等。
样式和布局：DOM 提供了访问和操作CSS样式的方法，允许你动态地改变元素的外观和布局。
跨浏览器兼容性：虽然不同的浏览器可能实现略有不同，但DOM标准确保了大多数现代浏览器都提供了相似的接口和功能，使得跨浏览器开发成为可能。
在Web开发中，JavaScript和DOM经常一起使用，以实现动态和交互式的Web页面。通过JavaScript，你可以操作DOM来更新页面的内容、响应用户输入、处理表单数据等。
②.编写JavaScript验证用户名、密码的规则。在用户点击登陆按钮后回显“欢迎+输入的用户名”
在login.html加上一段JavaScript正则表达式，来判断用户是否填写了用户名和密码。我设定的规则为：用户名须为6-12位字母/数字/中文，密码为1-20位纯数字。代码如下：
什么都不填：
只填用户名，且不符合要求：
用户名符合要求，密码不符合要求：
编写一个在用户点击登陆按钮后回显“欢迎+输入的用户名”的PHP页面:
cd /var/www/html 进入html的文件夹
touch index.php 创一个用于接收用户登陆数据的文件
vi index.php 进入编辑页面，将代码粘贴进去：
在浏览器输入localhost/20222323login.html，输入正确格式的用户名和密码后点击登录，成功跳转到欢迎界面：
③.尝试注入攻击：利用回显用户名注入HTML及JavaScript。
进入20222323login.html编辑页面，先把最大字数限制改成99：
尝试XSS攻击（跨站脚本攻击）：
准备一段脚本，注入在输入框中，随着登录信息一起提交表单，直接以该脚本作为用户名：
点击提交，注入成功：
当受害浏览器访问这个页面的时候，这段脚本也将被认为是页面的一部分，从而得到执行，即弹出对话框显示受害浏览器的Cookie信息。
(3)Web后端：MySQL基础：正常安装、启动MySQL，建库、创建用户、修改密码、建表
kali虚拟机自带mysql，输入systemctl start mysql开启MySQL服务
输入mysql -u root -p使用root权限进入，需要输入密码
建立数据库：CREATE DATABASE 20222323DB;
创建用户，设定密码：
CREATE USER 'dxh'@'localhost' IDENTIFIED BY '20222323';
将数据库20222301DB的所有权限授予当前用户：grant all privileges on 20222323DB.user_info to dxh@localhost identified by "20222323";
进入20222323DB数据库：use 20222323DB;
在数据库中创建表user_info：create table user_info (username VARCHAR(50),password VARCHAR(50));
插入数据：insert into user_info values('dxh','20222323');
查看数据：select * from user_info;
(4)Web后端：编写PHP网页，连接数据库，进行用户认证
输入以下命令：
cd /var/www/html
touch 2323login.html
vi 2323login.html
其中的代码如下：
touch login.php
vi login.php
其中的代码如下：
保持数据库和apache开启状态，在火狐浏览器输入html本地网址：http://localhost/2323login.html
输入正确的账号密码：
输入错误账户密码，点击登录，显示登录失败：
(5)最简单的SQL注入，XSS攻击测试
①.SQL注入：
在用户名输入框输入' or 1=1#，密码随意输入，点击登录
可以看到，虽然输入的账号密码明显错误，登录却成功了
当我们输入账号为' or 1=1#时，筛选条件就变为
$query = "SELECT * FROM user_info WHERE username='' or 1=1#' AND password='$pwd'";
$result = $mysqli->query($query);
会将后面部分注释掉，而前面的'' or 1=1是永真式，用这个条件进行筛选，肯定能筛选出结果，也就会被判定为登录成功了
②.XSS攻击
在用户名输入脚本，密码随便输：
(6)安装DVWA或WebGoat平台，并完成SQL注入、XSS、CSRF攻击
我选择DVWA平台，Windows上安装教程参考：https://blog.csdn.net/weixin_45876883/article/details/130379502
浏览器输入127.0.0.1/DVWA进入DVWA：
用户名和密码默认为 admin 和 password
SQL注入攻击：
正常提交payload为1
没有回显，采用盲注:
先获取长度:1' and length(database())>3#
1' and length(database())>4#
结论：数据库名长度>3但不>4，即数据库长度为4。
依次判断4个字符:
1' and substr(database(),1,1)='a'#
其余的类似，不再赘述。
XSS攻击：
反射型XSS：
查看页面源码（ctrl+u）该界面有提交按钮和输入框：
在输入框随便输入dxh，点击提交：
可以看见输入的dxh嵌入到界面中：
输入
可以看见浏览器把我的脚本解析了，一开始我以为是kali的火狐问题，所以我后面在Windows上做的，结果还是不能注入。
CSRF攻击：
输入新的密码之后就会在地址栏出现相应的链接（是get型所以提交的参数会显示），并提示密码修改成功：
此时在同一个浏览器中打开新的页面将上面的链接粘贴到地址栏并进行访问，此时成功访问：
然后在没有退出原本的登录的情况下，新打开的页面地址栏修改链接的密码为20222323dxh（原本为20222323）并回车，新页面会显示密码修改成功，此时退出登录后重新登录会发现登录密码变为新的20222323dxh而20222323无法登陆：
查看上方的链接可以看到密码已经改成了20222323dxh:
点击上方的Test
输入原本的密码20222323，发现无法登录:
输入更改后的密码20222323dxh，显示登陆成功:
3.问题及解决方案
-
问题1：XSS注入失败
-
问题1解决方案：可能换个更垃圾的浏览器就可以了，但我主机和虚拟机上所有浏览器做XSS注入都会自动把脚本注入，哪怕我在浏览器处设置了允许运行脚本。
4.学习感悟、思考等
通过这一系列实验，我深刻体会到了Web开发的安全性与复杂性。从基础的HTML到JavaScript，再到后端的MySQL与PHP，每一步都充满了挑战与收获。尤其是在尝试注入攻击时，我意识到即使是简单的回显功能，也可能成为安全漏洞的源头。通过搭建DVWA平台，我更直观地了解了SQL注入、XSS、CSRF等攻击手段，这让我对Web安全有了更深入的认识。这次实验不仅提升了我的技术能力，更让我明白了安全意识的重要性。在未来的开发中，我将更加注重代码的安全性与健壮性。
标签：浏览器,HTML,JavaScript,表单,2024,2025,html,20222323,输入 From： https://www.cnblogs.com/dxh1459110526/p/18580040