48 lines
1.6 KiB
Markdown
48 lines
1.6 KiB
Markdown
# 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`
|