Vue3 项目三处高风险入口HTML、动态组件与环境变量Vue 默认会转义插值内容但v-html、动态组件、自定义指令和公开的环境变量仍需要单独审查。它们的共同点是把外部输入转换为 DOM、组件选择或构建期常量。flowchart TD A[Vue3 应用程序安全注入隐患] -- B[模板层: v-html / 动态属性] B -- C[使用 DOMPurify 防御性 Composable 自动清洗] A -- D[组件层: 动态组件 component :is] D -- E[强类型组件注册表白名单 Safe Component Registry] A -- F[构建层: import.meta.env 环境变量泄露] F -- G[Vite 编译插件: ENV Key 敏感词过滤卡点] C -- H[安全的 Vue3 运行与构建时防线体系] E -- H G -- H1. Vue3 中最容易被忽略的四个安全漏洞入口前端工程师在写 Vue3 Composition API 代码时通常专注在状态流转和组件拆分上极易忽视以下四个安全攻击入口v-html指令注入直接渲染未经清洗的 HTML 字符串导致反射型或存储型 XSS。动态组件component :isdynamicName污染攻击者通过修改响应式变量dynamicName强行将组件指向敏感的内嵌全局组件或加载未知远程组件。自定义指令 (Directives) 钩子遗漏在mounted或updated指令钩子里直接操作真实 DOM 节点使用了不安全的innerHTML或未转义的setAttribute。import.meta.env密钥泄漏把带VITE_前缀的环境变量当成了凭证保险箱将后端的私钥、数据库密码或者敏感 API Token 露在前端构建包里。我们必须在 Vue3 应用中建立起针对这四个入口的硬核安全检查体系。2. 打造安全防御型 ComposableuseSafeHtml在 Vue3 项目中直接禁绝v-html在某些富文本业务里不太现实。正确的工程做法是从机制上封死直接绑定原始字符串的可能统一使用带 DOMPurify 清洗功能的受控 Composable。import { ref, computed, watchEffect, Readonly, Ref } from vue; import DOMPurify from dompurify; export interface SafeHtmlOptions { ALLOWED_TAGS?: string[]; ALLOWED_ATTR?: string[]; FORBID_ATTR?: string[]; } export function useSafeHtml( rawHtmlRef: Refstring | string, customOptions: SafeHtmlOptions {} ): ReadonlyRefstring { const sanitizedHtml refstring(); // 配置 DOMPurify 的严格防御基线 const defaultConfig: DOMPurify.Config { ALLOWED_TAGS: [b, i, em, strong, a, p, br, ul, ol, li, span, h1, h2, h3], ALLOWED_ATTR: [href, title, target, class], FORBID_ATTR: [style, onerror, onload, onclick, onmouseover], ADD_ATTR: [target], }; const finalConfig { ...defaultConfig, ...customOptions }; watchEffect(() { const rawContent typeof rawHtmlRef string ? rawHtmlRef : rawHtmlRef.value; if (!rawContent) { sanitizedHtml.value ; return; } // 强行清洗所有潜在恶意 payload const clean DOMPurify.sanitize(rawContent, finalConfig); sanitizedHtml.value clean as string; }); return computed(() sanitizedHtml.value); }在组件模板中使用时强制要求必须经过useSafeHtml包装script setup ts import { ref } from vue; import { useSafeHtml } from ./useSafeHtml; const userInputHtml ref(img srcx onerroralert(\XSS Attack!\) b安全的文本/b); // 任何未经 useSafeHtml 的变量直接绑定到 v-html 将会被 ESLint 安全规则拦截 const safeContent useSafeHtml(userInputHtml); /script template div classrich-text-container !-- 安全输出恶意 img onerror 被自动擦除 -- div v-htmlsafeContent/div /div /template3. 动态组件component :is的受控注册表防线动态组件的名称来自外部输入时应通过受控注册表映射来自应用内部固定状态时也应明确其来源和允许范围。script setup ts import { computed, Component } from vue; import UserProfileCard from ./components/UserProfileCard.vue; import UserSettingsPanel from ./components/UserSettingsPanel.vue; import FallbackNotFound from ./components/FallbackNotFound.vue; const props defineProps{ targetComponentName: string; }(); // 1. 明确的动态组件注册白名单 const COMPONENT_WHITELIST: Recordstring, Component { UserProfileCard, UserSettingsPanel, }; // 2. 安全计算属性任何未在白名单中注册的组件名统一退回到 FallbackNotFound const safeActiveComponent computedComponent(() { const matched COMPONENT_WHITELIST[props.targetComponentName]; if (!matched) { console.warn( [Vue3 Security Alert]: 检测到非法动态组件加载请求: ${props.targetComponentName} ); return FallbackNotFound; } return matched; }); /script template div classdynamic-component-wrapper !-- 安全渲染受控组件 -- component :issafeActiveComponent / /div /template4. Vite 编译期VITE_环境变量泄露检测插件很多开发者误以为在.env文件里写的变量只要不使用VITE_前缀就不会打进产物。但一旦有人糊涂把私钥加上了VITE_SECRET_KEY打包后这些敏感词会直接以明文形式埋在 JavaScript bundle 里。我们需要写一个 Vite 编译插件在打包Build Bundle阶段扫描产物中的import.meta.env一旦包含敏感词关键字直接报错打断 CI 构建。import type { Plugin } from vite; export interface EnvSecurityGuardOptions { forbiddenKeywords?: string[]; } export function viteEnvSecurityGuardPlugin(options: EnvSecurityGuardOptions {}): Plugin { const forbiddenKeywords options.forbiddenKeywords || [ SECRET, PASSWORD, PRIVATE_KEY, DATABASE_URL, TOKEN, AUTH_KEY, ]; return { name: vite-plugin-env-security-guard, apply: build, configResolved(config) { const parsedEnv config.env; const leakedKeys: string[] []; for (const [key, value] of Object.entries(parsedEnv)) { if (!key.startsWith(VITE_)) continue; // 检查 Key 名字是否包含敏感词 for (const keyword of forbiddenKeywords) { if (key.toUpperCase().includes(keyword)) { leakedKeys.push(${key} (包含敏感词 ${keyword})); } } } if (leakedKeys.length 0) { console.error(\n [Vite Environment Security Emergency Alert] ); console.error(检测到以下带有 VITE_ 前缀的环境变量可能包含敏感泄露风险); leakedKeys.forEach((item) console.error( - ${item})); console.error(请立即从 .env 文件中移除 VITE_ 前缀或擦除敏感密钥\n); throw new Error([Security Build Rejected]: 环境变量安全卡点校验失败打包强制终止。); } }, }; }5. 把三个入口变成可检查的规则前端转义和后端输出校验应配合使用前端不能承担服务端授权或密钥保护的职责。把安全检查落到具体工程细节里用统一的富文本处理函数收口v-html并测试允许的标签和属性。用注册表限制动态组件:is的候选范围。用构建检查发现疑似敏感环境变量同时从部署端避免把密钥注入前端产物。为这些入口建立代码扫描、测试用例和发布检查能更早发现回归。