bio/vue-template-compiler-patchedCompilador de plantillas Vue 2.7.16 parcheado con correcciones para CVE‑2024‑6783 y CVE-2024-9506
Una versión de vue-template-compiler con parches de seguridad para corregir la vulnerabilidad de contaminación de prototipos (CVE-2024-6783) y la vulnerabilidad ReDoS (CVE-2024-9506).
Basado en [email protected]. El desarrollo y los problemas se gestionan en vue-patched.
Si utilizas la compilación completa de Vue (runtime + compilador) o el CDN vue.js, reemplaza también vue por vue-patched.
Este paquete puede utilizarse para precompilar plantillas de Vue 2.0 en funciones de renderizado y así evitar la sobrecarga de la compilación en tiempo de ejecución y las restricciones de CSP. En la mayoría de los casos deberías usarlo junto con vue-loader; solo lo necesitarás por separado si estás creando herramientas de compilación con necesidades muy específicas.
Elige el método de instalación que mejor se adapte a tus necesidades.
Instala el compilador parcheado bajo el nombre original vue-template-compiler, de modo que las dependencias entre pares sigan satisfechas y las búsquedas de paquetes existentes sigan resolviéndose (por ejemplo, en @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
Instala el compilador como vue-template-compiler-patched. Utilice este método si solo necesita acceso directo a la compilación parcheada. Las herramientas que resuelven vue-template-compiler por nombre de paquete no lo detectarán.
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')
Compila una cadena de plantilla y devuelve el código JavaScript compilado. El resultado devuelto es un objeto con el siguiente formato:
{
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
}
Ten en cuenta que el código de la función devuelta usa with y, por lo tanto, no se puede usar en código en modo estricto.
outputSourceRange nuevo en 2.6
booleanfalseEstablecer esto en true hará que los errors devueltos en el resultado compilado se conviertan en objetos con la forma { msg, start, end }. Las propiedades start y end son números que marcan el rango de código de la fuente del error en la plantilla. Esto se puede pasar a la API compiler.generateCodeFrame para generar un marco de código para el error.
whitespace
string'preserve' | 'condense''preserve'El valor predeterminado 'preserve' maneja los espacios en blanco de la siguiente manera:
Si se establece en 'condense':
Usar el modo condense dará como resultado un tamaño de código compilado menor y un rendimiento ligeramente mejorado. Sin embargo, producirá diferencias menores en el diseño visual en comparación con HTML simple en ciertos casos.
Esta opción no afecta a la etiqueta <pre>.
Ejemplo:
<!-- 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 posible engancharse al proceso de compilación para admitir características personalizadas de plantillas. Sin embargo, ten en cuenta que al inyectar módulos personalizados en tiempo de compilación, tus plantillas no funcionarán con otras herramientas de compilación basadas en los módulos integrados estándar, p. ej. vue-loader y vueify.
Un array de módulos del compilador. Para obtener detalles sobre los módulos del compilador, consulta el tipo ModuleOptions en las declaraciones de flow y los módulos integrados.
directives
Un objeto donde la clave es el nombre de la directiva y el valor es una función que transforma un nodo AST de plantilla. Por ejemplo:
compiler.compile('<div v-test></div>', {
directives: {
test (node, directiveMeta) {
// transform node based on directiveMeta
}
}
})
De forma predeterminada, una directiva de tiempo de compilación extraerá la directiva y la directiva no estará presente en tiempo de ejecución. Si desea que la directiva también sea manejada por una definición en tiempo de ejecución, devuelva true en la función de transformación.
Consulte la implementación de algunas directivas de tiempo de compilación integradas.
preserveWhitespace Obsoleto desde 2.6
booleantrueDe forma predeterminada, la función de renderizado compilada conserva todos los caracteres de espacio en blanco entre las etiquetas HTML. Si se establece en false, se ignorarán los espacios en blanco entre las etiquetas. Esto puede resultar en un rendimiento ligeramente mejor, pero puede afectar el diseño de los elementos en línea.
Similar a compiler.compile, pero devuelve directamente funciones instanciadas:
{
render: Function,
staticRenderFns: Array<Function>
}
Esto solo es útil en tiempo de ejecución con compilaciones preconfiguradas, por lo que no acepta ninguna opción en tiempo de compilación. Además, este método usa new Function(), por lo que no cumple con CSP.
2.4.0+
Igual que compiler.compile, pero genera código de función de renderizado específico para SSR optimizando partes de la plantilla en concatenación de cadenas para mejorar el rendimiento de SSR.
Esto se usa por defecto en vue-loader@>=12 y se puede desactivar usando la opción optimizeSSR.
2.4.0+
Igual que compiler.compileToFunction, pero genera código de función de renderizado específico para SSR optimizando partes de la plantilla en concatenación de cadenas para mejorar el rendimiento de SSR.