在XAMPP环境中配置多端口可以让多个Web项目同时运行，提升本地开发效率，但多端口的开放也增加了跨站脚本攻击的暴露面，需要针对性做好防御配置。跨站脚本攻击本质是攻击者向页面注入恶意脚本，当其他用户访问时脚本执行，造成数据泄露、页面篡改等问题，多端口环境下不同项目的防护等级不一致会进一步放大风险。
XAMPP多端口配置基础
首先回顾XAMPP的多端口配置流程，以Apache服务为例，需要修改httpd.conf文件添加监听端口，再配置对应的虚拟主机。以下是添加8081端口的基础配置示例：
# 监听8081端口
Listen 8081
# 配置8081端口对应的虚拟主机
<VirtualHost *:8081>
ServerName localhost
DocumentRoot "D:/xampp/htdocs/project1"
<Directory "D:/xampp/htdocs/project1">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
</VirtualHost>
多端口环境下的XSS攻击风险点
多端口配置后常见的XSS风险主要有三类：
- 不同端口的项目防护规则不统一，部分端口的项目未做输入过滤，直接输出用户输入内容
- 端口间的Cookie共享未做限制，攻击者通过一个端口的XSS漏洞窃取其他端口的认证信息
- Apache的默认配置未开启安全响应头，浏览器无法识别恶意脚本，直接执行注入内容
针对性防御措施
1. 统一输入输出过滤规则
所有多端口项目的用户输入都需要做过滤处理，以PHP项目为例，对用户输入的内容进行HTML实体转义，避免恶意脚本被直接解析：
<?php // 获取用户输入的内容 $user_input = $_GET['content'] ?? ''; // 对输出内容进行HTML实体转义，防止XSS $safe_output = htmlspecialchars($user_input, ENT_QUOTES | ENT_HTML5, 'UTF-8'); echo $safe_output; ?>
2. 配置端口专属的安全响应头
在每个端口的虚拟主机配置中添加安全响应头，禁止浏览器执行非法脚本，同时限制Cookie的作用范围：
<VirtualHost *:8081>
ServerName localhost
DocumentRoot "D:/xampp/htdocs/project1"
<Directory "D:/xampp/htdocs/project1">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
# 添加XSS防护响应头
Header set X-XSS-Protection "1; mode=block"
# 禁止浏览器嗅探MIME类型
Header set X-Content-Type-Options "nosniff"
# 限制Cookie仅在该端口和路径下生效
Header set Set-Cookie "session_id=xxx; Path=/; Domain=localhost; Port=8081; HttpOnly; SameSite=Strict"
</VirtualHost>
3. 统一多端口的防护中间件
如果多个端口运行的是同类型项目，可以统一封装过滤中间件，避免单个项目遗漏防护。以下是PHP的通用过滤中间件示例：
<?php
class XssFilterMiddleware {
public function handle($request) {
// 过滤GET参数
foreach ($request['get'] as $key => $value) {
$request['get'][$key] = htmlspecialchars($value, ENT_QUOTES | ENT_HTML5, 'UTF-8');
}
// 过滤POST参数
foreach ($request['post'] as $key => $value) {
$request['post'][$key] = htmlspecialchars($value, ENT_QUOTES | ENT_HTML5, 'UTF-8');
}
return $request;
}
}
// 调用中间件
$request = [
'get' => $_GET,
'post' => $_POST
];
$filter = new XssFilterMiddleware();
$safe_request = $filter->handle($request);
?>
4. 限制跨端口资源访问
通过配置Content-Security-Policy响应头，限制页面仅能加载当前端口的资源，禁止跨端口的恶意脚本注入：
# 在虚拟主机配置中添加CSP规则，仅允许当前端口的资源 Header set Content-Security-Policy "default-src 'self' localhost:8081; script-src 'self' localhost:8081; style-src 'self' 'unsafe-inline'"
防御效果验证
完成配置后，可以构造XSS测试 payload 验证防御是否生效，比如访问http://localhost:8081/test.php?content=<script>alert('xss')</script>，如果页面输出的是转义后的文本而不是弹出 alert 框，说明输入过滤生效。同时检查响应头是否包含设置的安全头，确认配置正确。
做好以上配置后，XAMPP多端口环境下的跨站脚本攻击风险会大幅降低，既能保留多端口开发的便利性，也能保障本地开发和测试环境的安全性。