一、WampServer 搭建本地服务器

1、WampServer 下载安装及变小绿标

方法一：官网

方法二：中文站

问题及解决

2、访问本地服务器相关配置

1、检查是否正常搭建服务器

2、关闭 FHQ，修改配置文件

3、连接同一局域网，访问服务器

二、XSS 原理

三、XSS 演示

演示一：反射型 XSS

① 通过 GET 的方式

② 通过 POST 的方式

③ 说明

演示二：持久型 XSS

① 更改数据库密码

② 创建数据库并建表

③ 注入 XSS 演示

④ 说明

演示三：DOM 型 XSS

附录

1、cookie

2、get 和 post 的区别

一、WampServer 搭建本地服务器

1、WampServer 下载安装及变小绿标

方法一：官网

下载地址：

WampServer, la plate-forme de développement Web sous Windows - Apache, MySQL, PHPhttps://www.wampserver.com/en/#wampserver-64-bits-php-5-6-25-php-7不能下载解决方案：

WampServer下载不了怎么办-百度经验 (baidu.com)https://jingyan.baidu.com/article/948f5924c3d8b0d80ff5f992.html注意不要下载为addon版，那个是升级包，要不然你就可能出现以下界面：

或者打开官网这个版本也行，比较直接：
WampServer - Browse /WampServer 3/WampServer 3.0.0 at SourceForge.nethttps://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/

方法二：中文站

WampServer中文站 - Apache/MySQL/MariaDB/PHP集成环境软件下载站https://wampserver.site/index/index.html

安装过程简单，除了路径，一路确定即可，此处省略...

配置浏览器时，如果选择google，一般在：C:\Users\用户名\AppData\Local\Google\Chrome\Application，可以对应自行查找...

问题及解决

至于图标怎么由红变黄变绿，网上有相关教程大家可以搜【建议搜新版的教程，老版的有的博客不严谨会给你带来问题】，我只写我遇到的问题：

1、只有 wampmariadb64 服务怎么也启动不了，报错，也没有端口占用问题，各种办法都尝试了

最终的解决办法是重装，在下图这个安装步骤下，选 MariaDB 10.5.13 和 MySQL 8.0.27 版本

这样安装完后，只有 wampapache64 服务不能安装，这个好解决，左击图标，找 apache 把 httpd.conf 打开，更改端口 80 为8081，只此两处即可：

小绿标出现：

2、记得不要更改语言为 chinese（说来我也是闲得慌，因此建议安装配置时看最新教程），这个软件闪退，再打开报错进不去，目前未查到有效的解决办法，我进行了重装，两分钟搞定

2、访问本地服务器相关配置

1、检查是否正常搭建服务器

左击小绿标，点击 localhost：

显示如下界面，说明电脑已正常搭建服务器：

2、关闭 FHQ，修改配置文件

关闭 FHQ，如下图，如果不想关闭，可以参考如下文章，不难操作，不做演示：

https://zhuanlan.zhihu.com/p/148254246https://zhuanlan.zhihu.com/p/148254246

左击小绿标，点击 Apache-http-vhosts.conf 和 httpd.conf 文件，打开，搜索 Require local 字段，全部改为 Require all granted

如下是对 httpd-vhosts.conf 文件的修改，httpd.conf 的修改也是如此：

3、连接同一局域网，访问服务器

服务器和手机连在同一局域网：

服务器 IP，通过 ipconfig 命令查看：

通过手机访问服务器：

二、XSS 原理

本节两张图片来自：

前端安全系列（一）：如何防止XSS攻击？ - 美团技术团队 (meituan.com)https://tech.meituan.com/2018/09/27/fe-security.html#:~:text=XSS%20%E6%94%BB%E5%87%BB%E7%9A%84%E4%BB%8B%E7%BB%8D.%20%E5%9C%A8%E5%BC%80%E5%A7%8B%E6%9C%AC%E6%96%87%E4%B9%8B%E5%89%8D%EF%BC%8C%E6%88%91%E4%BB%AC%E5%85%88%E6%8F%90%E5%87%BA%E4%B8%80%E4%B8%AA%E9%97%AE%E9%A2%98%EF%BC%8C%E8%AF%B7%E5%88%A4%E6%96%AD%E4%BB%A5%E4%B8%8B%E4%B8%A4%E4%B8%AA%E8%AF%B4%E6%B3%95%E6%98%AF%E5%90%A6%E6%AD%A3%E7%A1%AE%EF%BC%9A.%20XSS%20%E9%98%B2%E8%8C%83%E6%98%AF%E5%90%8E%E7%AB%AF,RD%EF%BC%88%E7%A0%94%E5%8F%91%E4%BA%BA%E5%91%98%EF%BC%89%E7%9A%84%E8%B4%A3%E4%BB%BB%EF%BC%8C%E5%90%8E%E7%AB%AF%20RD%20%E5%BA%94%E8%AF%A5%E5%9C%A8%E6%89%80%E6%9C%89%E7%94%A8%E6%88%B7%E6%8F%90%E4%BA%A4%E6%95%B0%E6%8D%AE%E7%9A%84%E6%8E%A5%E5%8F%A3%EF%BC%8C%E5%AF%B9%E6%95%8F%E6%84%9F%E5%AD%97%E7%AC%A6%E8%BF%9B%E8%A1%8C%E8%BD%AC%E4%B9%89%EF%BC%8C%E6%89%8D%E8%83%BD%E8%BF%9B%E8%A1%8C%E4%B8%8B%E4%B8%80%E6%AD%A5%E6%93%8D%E4%BD%9C%E3%80%82.%20%E6%89%80%E6%9C%89%E8%A6%81%E6%8F%92%E5%85%A5%E5%88%B0%E9%A1%B5%E9%9D%A2%E4%B8%8A%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E9%83%BD%E8%A6%81%E9%80%9A%E8%BF%87%E4%B8%80%E4%B8%AA%E6%95%8F%E6%84%9F%E5%AD%97%E7%AC%A6%E8%BF%87%E6%BB%A4%E5%87%BD%E6%95%B0%E7%9A%84%E8%BD%AC%E4%B9%89%EF%BC%8C%E8%BF%87%E6%BB%A4%E6%8E%89%E9%80%9A%E7%94%A8%E7%9A%84%E6%95%8F%E6%84%9F%E5%AD%97%E7%AC%A6%E5%90%8E%EF%BC%8C%E5%B0%B1%E5%8F%AF%E4%BB%A5%E6%8F%92%E5%85%A5%E5%88%B0%E9%A1%B5%E9%9D%A2%E4%B8%AD%E3%80%82.%20%E5%A6%82%E6%9E%9C%E4%BD%A0%E8%BF%98%E4%B8%8D%E8%83%BD%E7%A1%AE%E5%AE%9A%E7%AD%94%E6%A1%88%EF%BC%8C%E9%82%A3%E4%B9%88%E5%8F%AF%E4%BB%A5%E5%B8%A6%E7%9D%80%E8%BF%99%E4%BA%9B%E9%97%AE%E9%A2%98%E5%90%91%E4%B8%8B%E7%9C%8B%EF%BC%8C%E6%88%91%E4%BB%AC%E5%B0%86%E9%80%90%E6%AD%A5%E6%8B%86%E8%A7%A3%E9%97%AE%E9%A2%98%E3%80%82.如下是 XSS 的定义：

如下是 XSS 的分类，将在下文第三节逐一演示：

三、XSS 演示

演示一：反射型 XSS

简介：非持久型、参数型跨站脚本，一般将恶意脚本附加到 URL 中

数据流向：前端注入 -> 服务器 -> 返回前端浏览器解析，后续恶意脚本携带用户 cookie 发送至恶意服务器，小黑通过访问可以处理得到私密信息

① 通过 GET 的方式

写一个 hello.php 文件，丢进 wamp 安装位置的 www 目录下：

演示代码 hello.php 如下：

<?phpecho "XSS漏洞测试，请看如下输出：<br />";$xss = $_GET['x'];echo $xss;
?>

访问时，不加参数，GET 由于不能获取值而出错：

访问时，携带参数后，有输出：

如果访问时，参数进行恶意注入，如下地址栏，访问就会出现弹窗：

点击确定后，无 GET 到任何值，因为 GET 到的东西已经执行，即 <script>

② 通过 POST 的方式

客户端呈现：enter.html

<html><head><meta charset="utf-8"><title>XSS漏洞测试</title></head><body><form action='actionEnter.php' method="post" encoding="UTF-8">请输入名字：<br><input type="text" name="name" value="" /><input type="submit" name="提交" /></form></body>
</html>

服务器端处理：actionEnter.php

<?php$name = $_POST['name'];echo $name;
?>

都丢到 www 目录下：

访问：

③ 说明

1、get 和 post 获取参数的区别见附录 2

2、虽然反射型 XSS 的 恶意代码没有注入正常服务器端，但是小黑会进行如下操作：

1、在网站上将恶意脚本作为参数附加到正常链接上，变成恶意链接，这个链接和正常的几无区别

2、当你写好密码输入框点击提交后，正常的传递给服务器，请求正常服务器的资源（假设服务器cookie 设置了密码作为它的一部分，填写相关值，就会相应存储在客户端，当浏览器请求时服务器可以读取并加以验证确定是否返回资源）

3、服务器正常返回，小黑注入的参数如果有用服务器就存，没用服务器也不会理会，正常执行，把资源返回

4、返回到浏览器（软件）这一层解析时，就会解析恶意注入的代码，由于 cookie 是绑定在域名上的，服务器再次返回时，这些恶意代码的执行极有可能会携带你的 cookie 信息，传递给黑客搭建好的服务器

5、黑客去请求恶意服务器，并对参数做分离处理，就能窃取你的 cookie 信息

演示二：持久型 XSS

简介：持久型 XSS 也叫存储型 XSS，如果服务器端没有进行过滤的话，代码就会注入到服务器端，直接影响 web 服务器的安全

① 更改数据库密码

左击图标：点击 PhpMyAdmin

初始密码为空，输入 root 后，点击执行即可进入：

进入修改密码：

如果不成功，可以通过命令行修改，网上教程挺多，不再演示：

② 创建数据库并建表

注意下边的 VARCHAR 长度尽量大于 30 做演示，否则太短后边的 script 代码注入显示不完整：

最终效果：

③ 注入 XSS 演示

客户端呈现：index2.html

<html><head><meta charset="utf-8"><title>存储型XSS演示</title></head><body>Hello!fwyxkai<br /><form action='index2action.php' method="post">请输入用户名：<br>ID：<input type="text" name="id" value="" /> <br />Name：<input type="text" name="name" value="" /> <br /><input type="submit" name="提交" /></form></body>
</html>

服务器端处理：index2action.php

<?php//$id=$_POST["id"];//$name=$_POST["name"];//echo $id,'<br />';//echo $name,'<br />';//连接数据库//我的PHP版本是7.4.26，用mysqli_connect()，而非mysql_connect()$con = mysqli_connect("localhost","root","fwyxkai","test");if (!$con) { die('Could not connect database: ' . mysqli_error()); }//插入用户数据$sql = "insert into fwyxkai (id,name) values ('{$_POST["id"]}','{$_POST["name"]}');";//针对成功的 SELECT、SHOW、DESCRIBE 或 EXPLAIN 查询，将返回一个 mysqli_result 对象。针对其他成功的查询，将返回 TRUE。如果失败，则返回 FALSE$insertdata=mysqli_query($con,$sql);if (!$insertdata){die('Error: ' . mysqli_error());}echo "1 record added";mysqli_close($con)?>

都丢到 www 目录下：

数据流向：前端 -> 服务器 -> 存入服务器端数据库 ->（经另一访问）服务器端（查库）->（另一访问）前端

正常访问前端：

添加操作处理：

查看数据库，已成功添加：

假如有业务需求，这个表可以供需求方查询，因此提供一个接口供查询：

<?php$id = $_GET['id'];$con = mysqli_connect("localhost","root","fwyxkai", "test");//查询数据$sql = "select * from fwyxkai where id='{$id}';";$result = mysqli_query($con, $sql);//mysqli_fetch_assoc() 函数从结果集中取得一行作为关联数组while($row = mysqli_fetch_assoc($result)) {echo $row['name'];}
?>

如下是查询演示：

如果注入恶意代码，存入服务器端数据库，这样当他人查询时，就会报错

细节：如果 alert 里是单引号

这样的恶意注入会失败：

改为如下两种方式注入均可：

最终显示：

当其他用户通过接口进行访问时，弹窗弹出两次：

④ 说明

上述案例仅作演示：

一般实际的存储型 XSS 更复杂、更具威胁性，数据存入到服务器端，用户访问就会触发，对 WEB 服务器的安全也会造成影响

比如小黑将制作的HDD脚本加外部脚本注入正常服务器，只要有用户访问，就会弹出这些东西...

更有甚者，用户浏览器还会对服务器返回的 XSS 和正常页面返回，自动向小黑搭建的恶意服务器发起请求，cookie 等信息就可能再次传递给恶意服务器，小黑就可进行访问自己搭建的恶意服务器来窃取用户信息...

因此服务器端一般会设置过滤，比如上例中过滤掉 script，什么样的数据可以存，数据的存入该采用什么策略...，最大限度保证不被无意或恶意的注入...，还会有绕过过滤的方法，设计 XSS 来利用漏洞，后期有时间会继续深入理解...

演示三：DOM 型 XSS

简介：XSS 针对的是 DOM-XSS 漏洞，触发时不经过后端处理，直接通过 url 传入参数控制来触发，这和第一种反射型的 GET 方式有相似之处，DOM 的介绍如下：

什么是DOM?你了解DOM树吗？_二哈汪汪叫的博客-CSDN博客_dom树https://blog.csdn.net/wei1273356078/article/details/106543967前端代码 index3.html：

<html><head><meta charset="utf-8"><title>XSS测试</title></head><body>Hello,fwyxkai!<form action='index3action.php' method="post">请输入用户名：<br><input type="text" name="name" value="" style="width:400px" /> <br /><input type="submit" name="提交" /></form></body>
</html>

服务器端处理：index3action.php，这里主要是获取输出并显示

<?php$name=$_POST["name"];
?>
<input id="username" type="text" value="<?php echo $name; ?>"/>
<div id="show">
</div><script type="text/javascript">//获取username值并输出在show内,这里是导致xss的主要原因var text = document.getElementById("username");var print = document.getElementById("show");print.innerHTML=text.value;
</script>

丢到 www 目录下：

数据流向：前端 -> 浏览器解析 -> 前端

正常访问前端：

服务器处理后返回：

恶意注入演示：

附录

1、cookie

cookie 存储在客户端： cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。因此，服务端脚本就可以读、写存储在客户端的 cookie 的值

2、get 和 post 的区别

(3条消息) get和post的区别_大鸡腿最好吃的博客-CSDN博客https://blog.csdn.net/m0_59070120/article/details/124309929#:~:text=%E5%8C%BA%E5%88%AB%20%E8%A1%A8%E7%8E%B0%E5%A6%82%E4%B8%8B%3A%201.%20get%20%E6%98%AF%E4%BB%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE%2C%20post%20%E6%98%AF%E5%90%91%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BC%A0%E9%80%81%E6%95%B0%E6%8D%AE%E3%80%82%202.,%E7%9A%84%20URL%E4%B8%AD%2C%E5%80%BC%20%E5%92%8C%20%E8%A1%A8%E5%8D%95%E5%86%85%E5%90%84%E4%B8%AA%E5%AD%97%E6%AE%B5%E4%B8%80%E4%B8%80%E5%AF%B9%E5%BA%94%2C%E5%9C%A8URL%E4%B8%AD%E5%8F%AF%E4%BB%A5%E7%9C%8B%E5%88%B0%E3%80%82%20post%20%E6%98%AF%E9%80%9A%E8%BF%87HTTP%20post%20%E6%9C%BA%E5%88%B6%2C%E5%B0%86%E8%A1%A8%E5%8D%95%E5%86%85%E5%90%84%E4%B8%AA%E5%AD%97%E6%AE%B5%E4%B8%8E%E5%85%B6%E5%86%85%E5%AE%B9(3条消息) 程序员：我终于知道post和get的区别_dotnet全栈开发的博客-CSDN博客_post与get的区别https://zhanglin.blog.csdn.net/article/details/103059900?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~OPENSEARCH~default-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~OPENSEARCH~default-1.pc_relevant_default&utm_relevant_index=2

WampServer 搭建本地服务器及 XSS 基本原理和初步实践（一）相关推荐

wampserver搭建本地服务器
打开..\wamp\bin\apache\apache2.4.9\conf\httpd.conf配置文件, <Directory "c:/wamp/www/">## P ...
使用wamp搭建本地服务器及本地服务器的访问
在学习Android开发网络知识的部分,为了便于调试,需要自己搭建服务器.没有必要从网络上花钱购买服务器,这里我们可以自己在电脑上搭建本地服务器.只要电脑和手机连接到了同一个局域网,比如都连接同一 ...
iOS开发网络篇—搭建本地服务器
iOS开发网络篇-搭建本地服务器一.简单说明说明:提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提示:提前准备好的软件 apache- ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
IIS的ARR搭建本地服务器的不停机更新（负载均衡，分布式服务器,集群）
IIS的ARR搭建本地服务器的不停机更新(负载均衡,分布式服务器,集群) 准备 2修改Host文件,添加映射. 路由规则的添加程序文件的准备结尾准备在IIS上安装Web平台安装程序,一般期初是 ...
Webpack搭建本地服务器
1.开启本地服务器 1.1.为什么要搭建本地服务器? 目前我们开发的代码,为了运行需要有两个操作: 操作一:npm run build,编译相关的代码: 操作二:通过live server或者直接通过 ...
gitblit搭建本地服务器
gitblit搭建本地服务器目标概述:在本地搭建git服务器管理项目. 准备事项:1.下载并且安装jdk.2.配置好jdk的环境变量.3.在cmd输入 java -version 查看jdk版本.( ...
纯Java+eclipse+Asix2+Tomcat8+SQLite （搭建本地服务器）
初次搭建本地服务器~ 参考:http://blog.sina.com.cn/s/blog_4979ec3e0101ad80.html http://blog.csdn.net/zztfj/articl ...
Unity打包webgl搭建本地服务器卡loading的解决方案
首先确保你的工程是正常的,比如build and run可以正常打开当然不嫌麻烦可以每次这样,相信有很多人会选择搭建本地服务器,使用IIS,我本人安装好之后,使用localhost:端口号打开本地w ...

WampServer 搭建本地服务器及 XSS 基本原理和初步实践（一）

一、WampServer 搭建本地服务器

1、WampServer 下载安装及变小绿标

方法一：官网

方法二：中文站

问题及解决

2、访问本地服务器相关配置

1、检查是否正常搭建服务器

2、关闭 FHQ，修改配置文件

3、连接同一局域网，访问服务器

二、XSS 原理

三、XSS 演示

演示一：反射型 XSS

① 通过 GET 的方式

② 通过 POST 的方式

③ 说明

演示二：持久型 XSS

① 更改数据库密码

② 创建数据库并建表

③ 注入 XSS 演示

④ 说明

演示三：DOM 型 XSS

附录

1、cookie

2、get 和 post 的区别

WampServer 搭建本地服务器及 XSS 基本原理和初步实践（一）相关推荐

最新文章

热门文章