本项目演示了跨站脚本攻击(XSS)的原理及防范措施，使用Vue3+Vite作为前端框架，Koa2作为后端框架，MySQL作为数据库。
跨站脚本攻击（Cross-Site Scripting，XSS）是一种常见的Web安全漏洞，攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。这些脚本可以窃取用户数据、劫持用户会话或重定向用户到恶意网站。
.
├── frontend/ # 前端Vue3+Vite项目
└── backend/ # 后端Koa2项目
- Node.js (v14+)
- MySQL数据库
- 确保MySQL服务已运行
- 在
backend/app.js和backend/init-db.js中修改数据库连接配置：
{
host: 'localhost',
user: 'root', // 修改为你的MySQL用户名
password: 'password', // 修改为你的MySQL密码
database: 'xss_demo'
}# 进入后端目录
cd backend
# 安装依赖
npm install
# 初始化数据库
npm run init-db
# 启动后端服务
npm run dev服务将在 http://localhost:3000 运行。
# 进入前端目录
cd frontend
# 安装依赖
npm install
# 启动开发服务器
npm run dev前端应用将在 http://localhost:5173 运行。
- 打开前端应用
- 尝试在两个不同的评论框中输入带有JavaScript代码的内容，例如：
<script>alert('XSS攻击成功!')</script><img src="x" >
- 观察安全版本和不安全版本的区别
- 查看评论列表中的内容如何被处理
本项目演示了以下XSS防范措施：
- 输入验证和过滤：使用xss库过滤用户输入的内容
- 输出编码：正确处理输出到HTML的数据
- 内容安全策略(CSP)：限制可执行的脚本来源
- 使用安全的框架：利用现代框架提供的安全特性
在实际项目中，应该：
- 始终对用户输入进行验证和过滤
- 使用成熟的安全库处理数据
- 实施内容安全策略(CSP)
- 定期进行安全审计和更新
- 使用HttpOnly Cookie防止JavaScript访问敏感Cookie
本项目仅用于教育目的，演示XSS攻击原理及防范措施。请勿将演示的漏洞用于任何非法或未授权的活动。