vue-template-compiler-patched

一个经过安全修补的 vue-template-compiler 版本，用于修复原型污染漏洞（CVE-2024-6783）和 ReDoS 漏洞（CVE-2024-9506）。

基于 [email protected]。开发与问题追踪位于 vue-patched。

相关

如果你使用 Vue 完整构建版（运行时 + 编译器）或 CDN 版 vue.js，也请将 vue 替换为 vue-patched。

此包可用于将 Vue 2.0 模板预编译为渲染函数，以避免运行时编译开销和 CSP 限制。在大多数情况下，你应将其与 vue-loader 一起使用；仅当你编写具有非常特定需求的构建工具时，才需要单独使用它。

安装

选择最适合你的安装方式。

别名安装方式

以原始的 vue-template-compiler 名称安装修补后的编译器，从而保持对等依赖（peer dependencies）得到满足，并使现有的包查找继续生效（例如在 @vue/test-utils 中）。

npm

npm install vue-template-compiler@npm:vue-template-compiler-patched@^2.7.16-patch.3 --save-dev

pnpm

pnpm add vue-template-compiler@npm:vue-template-compiler-patched@^2.7.16-patch.3 --save-dev

Yarn

yarn add vue-template-compiler@npm:vue-template-compiler-patched@^2.7.16-patch.3 --dev

标准安装方法

将编译器安装为 vue-template-compiler-patched。如果你只需要直接访问修补后的构建版本，请使用此方法。通过包名解析 vue-template-compiler 的工具将无法检测到它。

npm

npm install vue-template-compiler-patched --save-dev

pnpm

pnpm add vue-template-compiler-patched --save-dev

Yarn

yarn add vue-template-compiler-patched --dev

用法

import compiler from 'vue-template-compiler-patched'
// or: const compiler = require('vue-template-compiler-patched')

API

compiler.compile(template, [options])

编译模板字符串并返回编译后的 JavaScript 代码。返回的结果是以下格式的对象：

{
  ast: ?ASTElement, // parsed template elements to AST
  render: string, // main render function code
  staticRenderFns: Array<string>, // render code for static sub trees, if any
  errors: Array<string> // template syntax errors, if any
}

注意，返回的函数代码使用了 with，因此不能在严格模式代码中使用。

选项

• outputSourceRange 2.6 新增

  • 类型：boolean
  • 默认值：false

  将其设置为 true 会使编译结果中返回的 errors 变成形如 { msg, start, end } 的对象。start 和 end 属性是数字，用于标记模板中错误源代码的代码范围。这可以传递给 compiler.generateCodeFrame API，以生成错误的代码帧。

• whitespace

  • 类型：string
  • 有效值：'preserve' | 'condense'
  • 默认值：'preserve'

  默认值 'preserve' 按如下方式处理空白：

  • 元素标签之间仅含空白的文本节点会被压缩为单个空格。
  • 所有其他空白按原样保留。

  如果设置为 'condense'：

  • 元素标签之间仅含空白的文本节点如果包含换行符，则会被移除。否则，它会被压缩为单个空格。
  • 非纯空白文本节点内的连续空白会被压缩为单个空格。

  使用 condense 模式会得到更小的编译代码体积，并略微提升性能。然而，在某些情况下，与纯 HTML 相比，它会产生细微的视觉布局差异。

  此选项不影响 <pre> 标签。

  示例：

  <!-- source -->
  <div>
    <span>
      foo
    </span>   <span>bar</span>
  </div>
  
  <!-- whitespace: 'preserve' -->
  <div> <span>
    foo
    </span> <span>bar</span> </div>
  
  <!-- whitespace: 'condense' -->
  <div><span> foo </span> <span>bar</span></div>
  

• modules

  可以挂接到编译过程以支持自定义模板特性。但是请注意，通过注入自定义编译时模块，你的模板将无法与基于标准内置模块构建的其他构建工具（例如 vue-loader 和 vueify）配合使用。

  编译器模块的数组。有关编译器模块的详细信息，请参阅 flow 声明 中的 ModuleOptions 类型以及内置模块。

• directives

  一个对象，其键为指令名称，值为转换模板 AST 节点的函数。例如：

  compiler.compile('<div v-test></div>', {
    directives: {
      test (node, directiveMeta) {
        // transform node based on directiveMeta
      }
    }
  })
  

  默认情况下，编译时指令会提取该指令，并且该指令在运行时不会存在。如果你希望该指令也由运行时定义处理，请在 transform 函数中返回 true。

  请参考一些内置编译时指令的实现。

• preserveWhitespace 自 2.6 起已废弃

  • 类型：boolean
  • 默认值：true

  默认情况下，编译后的渲染函数会保留 HTML 标签之间的所有空白字符。如果设置为 false，标签之间的空白将被忽略。这可能会带来略微更好的性能，但可能会影响内联元素的布局。

---

compiler.compileToFunctions(template)

与 compiler.compile 类似，但直接返回实例化的函数：

{
  render: Function,
  staticRenderFns: Array<Function>
}

这仅在运行时配合预配置的构建才有用，因此它不接受任何编译时选项。此外，此方法使用了 new Function()，因此不符合 CSP 规范。

---

compiler.ssrCompile(template, [options])

2.4.0+

与 compiler.compile 相同，但通过将模板的某些部分优化为字符串拼接来生成 SSR 专用的渲染函数代码，以提升 SSR 性能。

这在 vue-loader@>=12 中默认使用，可通过 optimizeSSR 选项禁用。

---

compiler.ssrCompileToFunctions(template)

2.4.0+

与 compiler.compileToFunction 相同，但通过将模板的某些部分优化为字符串拼接来生成 SSR 专用的渲染函数代码，以提升 SSR 性能。

---

compiler.parseComponent(file, [options])

将 SFC（单文件组件，即 *.vue 文件）解析为一个描述符（参见 flow 声明 中的 SFCDescriptor 类型）。这用于 vue-loader 和 vueify 等 SFC 构建工具中。

---

compiler.generateCodeFrame(template, start, end)

生成一个代码帧，高亮显示 template 中由 start 和 end 定义的部分。这对于在更高层级的工具中进行错误报告很有用。

选项

pad

当你将提取的内容管道传输到其他预处理器时，pad 很有用，因为如果存在任何语法错误，你将获得正确的行号或字符索引。

• 使用 { pad: "line" } 时，每个块提取出的内容将根据原始文件中前置内容的每一行添加一个换行符作为前缀，以确保行号与原始文件对齐。
• 使用 { pad: "space" } 时，每个块提取出的内容将根据原始文件中前置内容的每一个字符添加一个空格作为前缀，以确保字符计数与原始文件保持一致。