vite 本身不提供运行时安全防护，但可通过配置 sri、禁用危险开发选项、控制构建产物信息、集成 csp 等方式提升安全性。

Vite 本身不直接提供运行时安全防护，但通过合理配置和周边工具链，能显著提升前端应用的安全性。重点在于构建阶段的风险控制、资源加载策略、以及与现代浏览器安全机制的协同。

启用 Subresource Integrity（SRI）校验

防止 CDN 或代理劫持导致的资源篡改。Vite 本身不内置 SRI，需借助插件实现：

• 安装 vite-plugin-sri：`npm add -D vite-plugin-sri`
• 在 vite.config.ts 中添加插件并配置哈希算法（推荐 sha384）
• 确保 index.html 中 script/link 标签使用 integrity 和 crossorigin 属性（插件会自动注入）

禁用危险的开发服务选项

本地开发时，server.hmr.overlay 或 server.host 配置不当可能暴露调试信息或开放内网访问：

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

• 生产环境严禁开启 server 配置项（构建后该配置无效，但需避免误提交）
• 开发时如需外网访问，显式设置 server.host: '0.0.0.0' 并配合防火墙限制，而非依赖默认行为
• 关闭 HMR 错误覆盖层（server.hmr.overlay = false）可减少敏感路径/堆栈泄露风险

控制构建产物暴露的信息

Vite 默认生成带 hash 的文件名，但 source map 和注释仍可能泄漏源码结构或路径：

• 生产构建禁用 source map：build.sourcemap = false（或设为 'hidden' 仅用于错误监控）
• 移除代码中敏感注释（如 API 密钥提示、内部路径说明），可用 build.rollupOptions.plugins 加入 rollup-plugin-strip
• 检查 build.outDir 输出内容，避免将 src/、env.d.ts 等未处理文件意外发布

集成 Content Security Policy（CSP）

CSP 是防御 XSS 的核心防线。Vite 不生成 CSP，但可通过以下方式支持：

• 在 index.html 的 标签中声明基础策略（适合简单场景）
• 更推荐由后端注入 CSP HTTP 头（如 Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'）
• 若需动态策略（如允许特定 CDN 脚本），配合 vite-plugin-html 注入 nonce 或 hash 值到 script 标签