最新Quasar 指南7：9527字带你了解Quasar 安全开发规范（Do’s and Don’ts）核心总结 - Quasar 完全教程：从基础到实战 --Ryan

密码学

• 不要创建自己的加密解决方案
• 不要以明文形式存储个人信息
• 不要创建自己的加密解决方案（故意重复）
• 不要忽略实施细节的任何方面
• 不要创建自己的加密解决方案（故意重复）
• 不要使用MD5或SHA1
• 不要创建自己的加密解决方案

Quasar 安全开发规范（Do’s and Don’ts）核心总结

该文档聚焦 Quasar 项目开发中的安全最佳实践，明确 “推荐做法” 与 “禁止行为”，覆盖 XSS 防护、数据验证、权限控制、依赖安全等核心维度，以下是结构化梳理：

一、通用安全原则

✅ Do’s（推荐）

1. 遵循最小权限原则：仅为用户 / 组件分配完成任务所需的最小权限（如 API 接口仅返回必要数据、前端仅渲染必要字段）；
2. 开启内容安全策略（CSP）：通过quasar.config.js配置 CSP 头，限制资源加载来源、禁止内联脚本 / 样式（降低 XSS 风险）；
3. 使用 HTTPS：所有生产环境请求强制使用 HTTPS，避免数据明文传输；
4. 定期更新依赖：通过npm audit/yarn audit检查依赖漏洞，及时升级 Quasar、Vue 及第三方包；
5. 验证所有输入：前端对用户输入（表单、URL 参数、本地存储数据）进行类型、格式、长度校验，后端二次校验；
6. 清理输出数据：渲染用户输入内容前进行转义（如 HTML 转义、JSON 序列化），避免 XSS。

❌ Don’ts（禁止）

1. 不要信任用户输入：默认所有用户输入（包括表单、Cookie、LocalStorage、URL 参数）都是不安全的；
2. 不要禁用内置安全机制：如 Quasar 组件的 XSS 防护、Vue 的 HTML 转义、浏览器的同源策略；
3. 不要硬编码敏感信息：如 API 密钥、数据库密码、JWT 密钥等，禁止写入代码 / 配置文件，需通过环境变量注入；
4. 不要忽略安全警告：如浏览器控制台的安全提示、依赖审计报告的高危漏洞；
5. 不要使用过时依赖：避免使用已停止维护、存在已知漏洞的包（如旧版本vue-router、axios）。

二、XSS 防护（跨站脚本攻击）

✅ Do’s

1. 使用 Vue 内置转义：默认情况下，Vue 会自动转义插值表达式（{{ }}）中的 HTML 内容，直接渲染用户输入；
2. 按需使用v-html并过滤：必须使用v-html渲染 HTML 时，通过安全库（如DOMPurify）过滤危险标签 / 属性：

   import DOMPurify from 'dompurify' // 过滤后再渲染 const sanitizedHTML = DOMPurify.sanitize(userProvidedHTML)

3. 限制动态组件 / 渲染：动态渲染组件（<component :is="componentName">）时，校验组件名是否在白名单内；
4. 使用 CSP 禁止内联脚本：配置 CSP 头script-src 'self'，禁止执行内联脚本（如<script>alert(1)</script>）；
5. 验证 URL 参数：解析 URL 查询参数（如location.search）时，校验格式（如 ID 必须为数字），避免注入恶意代码。

❌ Don’ts

1. 不要直接使用v-html渲染用户输入：未过滤的用户 HTML 可能包含<script>、onclick等危险代码；
2. 不要将用户输入作为 Vue 指令参数：如v-bind:class="userInput"、v-on:click="userInput"，可能导致代码注入；
3. 不要信任第三方 HTML 内容：如第三方接口返回的 HTML、富文本编辑器未过滤的内容；
4. 不要使用eval()/new Function()执行用户输入：此类方法会执行任意代码，极易引发 XSS；
5. 不要忽略 SVG / 图片 XSS：用户上传的 SVG 文件可能包含恶意脚本，需过滤或禁止上传。

三、CSRF/SSRF 防护（跨站请求伪造 / 服务器端请求伪造）

✅ Do’s

1. 使用 CSRF Token：前端请求需携带后端生成的 CSRF Token（如通过请求头、Cookie 传递），Quasar 项目可通过axios拦截器统一添加：

   axios.interceptors.request.use(config => { config.headers['X-CSRF-Token'] = document.cookie.match(/csrf_token=([^;]+)/)[1] return config })

2. 验证请求来源：前端通过Referer/Origin头验证请求来源，后端配合校验；
3. 限制 SSR 中的外部请求：使用 Quasar SSR 时，禁止通过用户输入拼接 URL 发起服务器端请求（防止 SSRF）；
4. 使用同站 Cookie：配置 Cookie 的SameSite=Strict/Lax属性，限制跨站请求携带 Cookie。

❌ Don’ts

1. 不要忽略请求头验证：如Origin、Referer为空或异常时，禁止处理敏感请求；
2. 不要使用用户输入拼接请求 URL：如axios.get(userProvidedURL)，可能导致 SSRF 攻击（访问内网服务）；
3. 不要禁用 Cookie 的SameSite属性：默认SameSite=None会增加 CSRF 风险；
4. 不要信任跨域请求的默认行为：跨域请求需后端配置 CORS（Access-Control-Allow-Origin），且仅允许可信域名。

四、认证与授权

✅ Do’s

1. 使用安全的认证机制：如 JWT、OAuth2.0，避免自定义加密算法；
2. 存储令牌安全化：
   • JWT 令牌优先存储在HttpOnly+SecureCookie 中（防止 XSS 窃取）；
   • 若存储在 LocalStorage，需配合 CSP 和令牌过期策略；
3. 实现细粒度授权：前端根据用户角色 / 权限动态渲染菜单、按钮，后端校验每个接口的访问权限；
4. 处理令牌过期：通过拦截器统一捕获 401 错误，跳转登录页或刷新令牌；
5. 验证路由权限：使用vue-router导航守卫校验用户是否有权访问路由：

   router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isLoggedIn()) { next('/login') } else { next() } })

❌ Don’ts

1. 不要明文存储密码：前端禁止记录用户密码，即使是临时存储；
2. 不要暴露敏感用户信息：如用户手机号、身份证号需脱敏展示（如138****1234）；
3. 不要依赖前端授权：前端隐藏菜单 / 按钮仅为体验优化，后端必须校验每个接口的权限；
4. 不要使用弱令牌：如简单的 MD5 哈希、短长度随机字符串作为令牌；
5. 不要忽略令牌刷新安全：刷新令牌（Refresh Token）需存储在安全位置，且设置更短的有效期。

五、数据存储安全

✅ Do’s

1. 分类存储数据：
   • 敏感数据（如令牌、用户凭证）：HttpOnlyCookie；
   • 非敏感数据（如用户偏好）：LocalStorage/SessionStorage；
2. 加密敏感本地数据：如必须存储在 LocalStorage 的敏感信息，使用crypto-js等库加密；
3. 限制存储数据大小：避免 LocalStorage 存储大量数据（最大 5MB），防止溢出；
4. 清理过期数据：定期清理无用的 Cookie、LocalStorage 数据，减少攻击面。

❌ Don’ts

1. 不要存储敏感数据在 LocalStorage/SessionStorage：此类存储可被 JS 访问，易遭 XSS 窃取；
2. 不要使用固定密钥加密：加密本地数据的密钥禁止硬编码，需通过后端动态下发；
3. 不要信任本地存储数据：LocalStorage/Cookie 可能被篡改，前端使用前需校验；
4. 不要忽略存储数据的过期时间：如令牌、临时凭证需设置过期时间，避免永久有效。

六、Quasar 特定安全建议

✅ Do’s

1. 使用 Quasar 官方组件：优先使用 Quasar 内置组件（如q-input、q-btn），避免第三方组件的安全漏洞；
2. 配置 Quasar CSP：在quasar.config.js中启用 CSP：

   // quasar.config.js module.exports = { build: { htmlFilename: 'index.html', csp: { policy: { 'default-src': ["'self'"], 'script-src': ["'self'", "https://trusted-cdn.com"], 'style-src': ["'self'", "'unsafe-inline'"] // 必要时允许内联样式 } } } }

3. 安全使用 Quasar CLI：通过quasar check检查项目配置安全，使用官方模板初始化项目；
4. SSR 安全配置：Quasar SSR 项目需禁用nodeIntegration，限制服务端权限。

❌ Don’ts

1. 不要修改 Quasar 核心源码：修改框架核心代码可能引入安全漏洞，且难以维护；
2. 不要禁用 Quasar 的安全特性：如q-input的输入过滤、q-uploader的文件类型校验；
3. 不要在 SSR 中暴露敏感环境变量：服务端环境变量需区分前后端，禁止前端访问后端密钥；
4. 不要忽略 Quasar 升级提示：框架更新可能包含安全补丁，需及时升级。

七、生产环境部署安全

✅ Do’s

1. 构建生产环境包：使用quasar build构建生产包（自动压缩、混淆代码）；
2. 启用代码混淆：通过quasar.config.js配置 Terser 混淆代码，增加逆向难度；
3. 配置服务器安全头：Nginx/Apache 配置安全响应头（CSP、X-XSS-Protection、X-Frame-Options 等）；
4. 禁用开发工具：生产环境禁止启用 Vue Devtools、Quasar 开发模式；
5. 监控安全日志：记录敏感操作日志（如登录、权限变更），便于审计。

❌ Don’ts

1. 不要部署开发环境代码到生产：开发环境包含调试信息、未压缩代码，存在安全风险；
2. 不要暴露错误详情：生产环境屏蔽详细错误栈（如 Vue 报错、API 异常），仅返回通用提示；
3. 不要开启目录浏览：Web 服务器禁止开启目录浏览功能（如 Nginx 的autoindex on）；
4. 不要使用默认端口 / 路径：避免使用 80/443 外的默认端口，敏感接口避免使用通用路径（如/api/admin）。

总结

Quasar 项目安全开发的核心是 “分层防护”：前端做输入验证 / 输出转义 / 权限控制，后端做二次校验 / 接口防护 / 数据加密，同时遵循通用安全规范（HTTPS、CSP、最小权限）。关键是 “不信任任何外部输入”，并通过工具（依赖审计、CSP 配置、代码混淆）降低攻击面，定期更新和审计项目安全状态。