# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## 🛡️ 安全配置

本项目已配置防止点击劫持（Clickjacking）攻击的安全措施。

### 已实施的安全防护

1. **X-Frame-Options 响应头**：在开发环境中通过 Vite 配置自动添加
2. **Content Security Policy (CSP)**：通过 HTML meta 标签和响应头双重防护
3. **额外安全响应头**：包括 X-Content-Type-Options 和 X-XSS-Protection

### 快速测试

启动开发服务器后，在浏览器中打开：
```
http://localhost:5173/test-clickjacking.html
```

或使用命令行测试：
```bash
curl -I http://localhost:5173
```

### 生产环境配置

**重要**：生产环境需要在 Web 服务器（Nginx/Apache）中配置响应头。

详细配置说明请参考 [SECURITY_HEADERS.md](./SECURITY_HEADERS.md) 文档。

### 验证配置

1. 打开浏览器开发者工具（F12）
2. 切换到 Network（网络）标签
3. 刷新页面
4. 查看主文档的 Response Headers
5. 确认存在以下响应头：
   - `X-Frame-Options: SAMEORIGIN`
   - `Content-Security-Policy: frame-ancestors 'self'`
   - `X-Content-Type-Options: nosniff`
   - `X-XSS-Protection: 1; mode=block`
