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

关注

原创最新推荐文章于 2026-11-05 15:55:44 发布 963 阅读 AI 写同款· GEO 优化 ›

私网实例既不能改子网路由也不能绑 EIP？单可用区 NLB + 安全组双放行优雅暴露多端口（含 Connection refused 全链路排障）不动共享私有子网路由：私有子网实例需要固定公网入口时，切勿把子网路由表改成 IGW，采用同可用区公网子网的单 AZ NLB + 1 个 EIP是最干净的隔离方案。牢记安全组双放行：NLBinstance模式默认保留客户端源 IP，后端实例安全组必须同时对外部客户端白名单 IP和NLB 安全组放行目标端口。区分 Timeout 与 Connection refused：Timeout 查安全组与路由，Connection refused 直接上机器跑ss -lntp查进程是否启动、是否绑错到了。阅读详情

密码学

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

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

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

一、通用安全原则

✅ Do’s（推荐）

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

❌ Don’ts（禁止）

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

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

✅ Do’s

使用 Vue 内置转义：默认情况下，Vue 会自动转义插值表达式（{{ }}）中的 HTML 内容，直接渲染用户输入；
按需使用 v-html 并过滤：必须使用 v-html 渲染 HTML 时，通过安全库（如 DOMPurify）过滤危险标签 / 属性：
```
import DOMPurify from 'dompurify'
// 过滤后再渲染
const sanitizedHTML = DOMPurify.sanitize(userProvidedHTML)
```
限制动态组件 / 渲染：动态渲染组件（<component :is="componentName">）时，校验组件名是否在白名单内；
使用 CSP 禁止内联脚本：配置 CSP 头 script-src 'self'，禁止执行内联脚本（如 <script>alert(1)</script>）；
验证 URL 参数：解析 URL 查询参数（如 location.search）时，校验格式（如 ID 必须为数字），避免注入恶意代码。

❌ Don’ts

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

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

✅ Do’s

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

❌ Don’ts

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

四、认证与授权

✅ Do’s

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

验证路由权限：使用 vue-router 导航守卫校验用户是否有权访问路由：

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

❌ Don’ts

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

五、数据存储安全

✅ Do’s

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

❌ Don’ts

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

六、Quasar 特定安全建议

✅ Do’s

使用 Quasar 官方组件：优先使用 Quasar 内置组件（如 q-input、q-btn），避免第三方组件的安全漏洞；

配置 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'"] // 必要时允许内联样式
      }
    }
  }
}

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

❌ Don’ts

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

七、生产环境部署安全

✅ Do’s

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

❌ Don’ts

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

总结

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

收录于