Vue.js 中的 XSS 防护：模板插值安全机制与服务端输入净化最佳实践-php教程-PHP中文网

Vue.js 中的 XSS 防护：模板插值安全机制与服务端输入净化最佳实践

Vue.js 默认对 {{ }} 插值内容进行 HTML 实体转义，因此直接渲染用户输入（如 {{ inputed_text }}）不会触发 XSS；但若使用 v-html 或服务端未净化就存储/跨系统共享数据，仍存在真实风险。

vue.js 默认对 `{{ }}` 插值内容进行 html 实体转义，因此直接渲染用户输入（如 `

`）不会触发 XSS；但若使用 `v-html` 或服务端未净化就存储/跨系统共享数据，仍存在真实风险。

在 Vue.js 应用中，仅依赖前端模板语法的安全特性是不够的。你观察到 <p>{{ inputed_text }}</p> 对 <script>alert('XSS')</script> 等载荷无反应，这是正确的——Vue 2/3 均会对 {{ }} 内容自动执行 HTML 转义（HTML-escaping），将 → <code>、<code>> → >、" → " 等，从而阻断标签解析与脚本执行。这意味着：

✅ 安全场景（默认行为）：

<!-- 即使 inputed_text = "<script>alert(1)</script>" -->
<p>{{ inputed_text }}</p>
<!-- 渲染结果为纯文本：<script>alert(1)</script> -->

⚠️ 危险场景（绕过 Vue 自动防护）：

vue3-ant-design-vue-component-skill

封装基于 Vue 3 + Ant Design Vue 的通用业务组件，提供标准化模板与最佳实践。

下载

使用 v-html 强制解析 HTML（如 <div v-html="inputed_text"></div>）；
将未净化的数据用于 :href、:src、@click 等动态绑定属性（如 <a :href="'javascript:' + userUrl"></a>）；
更关键的是：数据持久化后被其他系统（非 Vue）直接渲染（如后台管理页用 jQuery .html() 显示、邮件模板拼接、导出 PDF 等）。

因此，真正的安全防线必须落在服务端。不能因 Vue 当前“看起来安全”而跳过输入净化——因为数据库不是 Vue 的专属领地。

✅ 推荐实践：服务端输入净化（黑名单 + 白名单结合）

虽然正则黑名单（如 /(]+>)/ig）可快速过滤基础 HTML 标签，但仅靠黑名单易被绕过（例如 alert(1)、<img>）。更稳健的做法是：

优先采用成熟库进行 HTML 净化（推荐）：

// Node.js 示例：使用 sanitize-html（白名单策略）
const sanitizeHtml = require('sanitize-html');

const clean = sanitizeHtml(userInput, {
  allowedTags: ['b', 'i', 'em', 'strong'], // 仅允许特定格式标签
  allowedAttributes: {}, // 禁用所有属性（避免 onclick/onerror 等）
  disallowedTagsMode: 'recursiveEscape' // 非法标签转义而非删除
});

若必须用正则，增强防御层级：

// 更严格的多层过滤（示例，不可替代专业库）
function sanitizeInput(str) {
  if (!str) return '';
  // 1. 移除 script/style 标签及注释
  str = str.replace(/<script>/gi, '');
  str = str.replace(/<style[\s\S]*?<\/style>/gi, '');
  str = str.replace(/<!--[\s\S]*?-->/g, '');
  // 2. 移除危险事件属性（onxxx=）
  str = str.replace(/on\w+\s*=\s*["'].*?["']/gi, '');
  // 3. 最终转义剩余尖括号和引号
  return str
    .replace(/&/g, '&')
    .replace(/, '<')
    .replace(/>/g, '>')
    .replace(/"/g, '"')
    .replace(/'/g, '&#039;');
}</script>