bio/vue-template-compiler-patchedGepatchter Vue 2.7.16 Template-Compiler mit Korrekturen für CVE‑2024‑6783 und CVE-2024-9506
Eine sicherheitsgepatchte Version von vue-template-compiler zur Behebung der Prototype-Pollution-Schwachstelle (CVE-2024-6783) und der ReDoS-Schwachstelle (CVE-2024-9506).
Basiert auf [email protected]. Entwicklung und Issues befinden sich in vue-patched.
Wenn Sie den Vue-Full-Build (Runtime + Compiler) oder das CDN vue.js verwenden, ersetzen Sie auch vue durch vue-patched.
Dieses Paket kann verwendet werden, um Vue-2.0-Templates vorab in Render-Funktionen zu kompilieren, um den Overhead der Runtime-Kompilierung und CSP-Einschränkungen zu vermeiden. In den meisten Fällen sollten Sie es zusammen mit vue-loader verwenden; separat benötigen Sie es nur, wenn Sie Build-Tools mit sehr spezifischen Anforderungen schreiben.
Wählen Sie den Installationsansatz, der am besten zu Ihnen passt.
Installiert den gepatchten Compiler unter dem ursprünglichen Namen vue-template-compiler, sodass Peer-Abhängigkeiten weiterhin erfüllt sind und bestehende Paketauflösungen weiterhin funktionieren (z. B. in @vue/test-utils).
npm install vue-template-compiler@npm:vue-template-compiler-patched@^2.7.16-patch.3 --save-dev
pnpm add vue-template-compiler@npm:vue-template-compiler-patched@^2.7.16-patch.3 --save-dev
yarn add vue-template-compiler@npm:vue-template-compiler-patched@^2.7.16-patch.3 --dev
Installiert den Compiler als vue-template-compiler-patched. Verwenden Sie diese Methode, wenn Sie nur direkten Zugriff auf den gepatchten Build benötigen. Tools, die vue-template-compiler anhand des Paketnamens auflösen, werden ihn nicht erkennen.
npm install vue-template-compiler-patched --save-dev
pnpm add vue-template-compiler-patched --save-dev
yarn add vue-template-compiler-patched --dev
import compiler from 'vue-template-compiler-patched'
// or: const compiler = require('vue-template-compiler-patched')
Kompiliert eine Template-Zeichenkette und gibt kompilierten JavaScript-Code zurück. Das zurückgegebene Ergebnis ist ein Objekt im folgenden Format:
{
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
}
Beachte, dass der zurückgegebene Funktionscode with verwendet und daher nicht im Strict-Mode-Code verwendet werden kann.
outputSourceRange neu in 2.6
booleanfalseWenn du dies auf true setzt, werden die im kompilierten Ergebnis zurückgegebenen errors zu Objekten in der Form { msg, start, end }. Die Eigenschaften start und end sind Zahlen, die den Codebereich der Fehlerquelle im Template markieren. Dies kann an die API compiler.generateCodeFrame übergeben werden, um einen Code-Frame für den Fehler zu erzeugen.
whitespace
string'preserve' | 'condense''preserve'Der Standardwert 'preserve' behandelt Leerzeichen wie folgt:
Wenn auf 'condense' gesetzt:
Die Verwendung des Condense-Modus führt zu einer kleineren Größe des kompilierten Codes und einer leicht verbesserten Performance. In bestimmten Fällen erzeugt er jedoch im Vergleich zu reinem HTML geringfügige visuelle Layoutunterschiede.
Diese Option wirkt sich nicht auf das Tag <pre> aus.
Beispiel:
<!-- 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
Es ist möglich, sich in den Kompilierungsprozess einzuklinken, um benutzerdefinierte Template-Funktionen zu unterstützen. Beachten Sie jedoch, dass Ihre Templates bei der Injektion benutzerdefinierter Compile-Time-Module nicht mit anderen Build-Tools funktionieren, die auf standardmäßigen integrierten Modulen basieren, z. B. vue-loader und vueify.
Ein Array von Compiler-Modulen. Details zu Compiler-Modulen finden Sie im Typ ModuleOptions in den Flow-Deklarationen und in den integrierten Modulen.
directives
Ein Objekt, bei dem der Schlüssel der Name der Direktive und der Wert eine Funktion ist, die einen AST-Knoten eines Templates transformiert. Zum Beispiel:
compiler.compile('<div v-test></div>', {
directives: {
test (node, directiveMeta) {
// transform node based on directiveMeta
}
}
})
Standardmäßig extrahiert eine Compile-Time-Direktive die Direktive, und die Direktive ist zur Laufzeit nicht vorhanden. Wenn die Direktive auch durch eine Laufzeitdefinition verarbeitet werden soll, geben Sie in der Transform-Funktion true zurück.
Siehe die Implementierung einiger integrierter Compile-Time-Direktiven.
preserveWhitespace Seit 2.6 veraltet
booleantrueStandardmäßig behält die kompilierte Render-Funktion alle Leerzeichen zwischen HTML-Tags bei. Wenn auf false gesetzt, werden Leerzeichen zwischen Tags ignoriert. Dies kann zu einer etwas besseren Leistung führen, aber das Layout für Inline-Elemente beeinflussen.
Ähnlich wie compiler.compile, gibt aber direkt instanziierte Funktionen zurück:
{
render: Function,
staticRenderFns: Array<Function>
}
Dies ist nur zur Laufzeit mit vorkonfigurierten Builds nützlich, daher akzeptiert es keine Optionen zur Kompilierungszeit. Darüber hinaus verwendet diese Methode new Function(), sodass sie nicht CSP-konform ist.
2.4.0+
Gleich wie compiler.compile, generiert jedoch SSR-spezifischen Renderfunktionscode, indem Teile der Vorlage zu Zeichenkettenverkettung optimiert werden, um die SSR-Leistung zu verbessern.
Dies wird standardmäßig in vue-loader@>=12 verwendet und kann mit der Option optimizeSSR deaktiviert werden.
2.4.0+
Gleich wie compiler.compileToFunction, generiert jedoch SSR-spezifischen Renderfunktionscode, indem Teile der Vorlage zu Zeichenkettenverkettung optimiert werden, um die SSR-Leistung zu verbessern.
Parst eine SFC (Single-File-Komponente oder *.vue-Datei) in einen Deskriptor (siehe den Typ SFCDescriptor in den Flow-Deklarationen). Dies wird in SFC-Build-Tools wie vue-loader und vueify verwendet.