bio/vue-template-compiler-patchedCVE‑2024‑6783 및 CVE-2024-9506에 대한 수정이 포함된 패치된 Vue 2.7.16 템플릿 컴파일러
프로토타입 오염 취약점(CVE-2024-6783)과 ReDoS 취약점(CVE-2024-9506)을 수정하기 위해 보안 패치를 적용한 vue-template-compiler 버전입니다.
[email protected]을 기반으로 합니다. 개발 및 이슈는 vue-patched에서 관리됩니다.
Vue 전체 빌드(런타임 + 컴파일러) 또는 CDN vue.js를 사용하는 경우, vue도 vue-patched로 교체하세요.
이 패키지는 Vue 2.0 템플릿을 렌더 함수로 미리 컴파일하여 런타임 컴파일 오버헤드와 CSP 제한을 피하는 데 사용할 수 있습니다. 대부분의 경우 vue-loader와 함께 사용해야 하며, 매우 특수한 요구 사항이 있는 빌드 도구를 작성하는 경우에만 별도로 필요합니다.
가장 적합한 설치 방법을 선택하세요.
패치된 컴파일러를 원래의 vue-template-compiler 이름으로 설치하므로, 피어 의존성이 그대로 충족되고 기존 패키지 조회가 계속 해석됩니다(예: @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
컴파일러를 vue-template-compiler-patched로 설치합니다. 패치된 빌드에 직접 접근하기만 하면 되는 경우 이 방법을 사용하세요. 패키지 이름으로 vue-template-compiler를 해석하는 도구는 이를 감지하지 못합니다.
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')
템플릿 문자열을 컴파일하고 컴파일된 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를 사용하므로 strict 모드 코드에서는 사용할 수 없습니다.
outputSourceRange 2.6에서 새로 추가됨
booleanfalse이 값을 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부터 사용 중단됨
booleantrue기본적으로 컴파일된 렌더 함수는 HTML 태그 사이의 모든 공백 문자를 보존합니다. false로 설정하면 태그 사이의 공백이 무시됩니다. 이는 성능을 약간 향상시킬 수 있지만 인라인 요소의 레이아웃에 영향을 줄 수 있습니다.
compiler.compile과 유사하지만, 인스턴스화된 함수를 직접 반환합니다:
{
render: Function,
staticRenderFns: Array<Function>
}
이것은 미리 구성된 빌드와 함께 런타임에서만 유용하므로 컴파일 타임 옵션을 받지 않습니다. 또한 이 메서드는 new Function()을 사용하므로 CSP를 준수하지 않습니다.
2.4.0+
compiler.compile과 동일하지만 SSR 성능을 향상시키기 위해 템플릿의 일부를 문자열 연결로 최적화하여 SSR 전용 렌더 함수 코드를 생성합니다.
이는 vue-loader@>=12에서 기본적으로 사용되며 optimizeSSR 옵션을 사용하여 비활성화할 수 있습니다.
2.4.0+
compiler.compileToFunction과 동일하지만 SSR 성능을 향상시키기 위해 템플릿의 일부를 문자열 연결로 최적화하여 SSR 전용 렌더 함수 코드를 생성합니다.
SFC(단일 파일 컴포넌트, 또는 *.vue 파일)를 디스크립터로 파싱합니다(flow 선언의 SFCDescriptor 타입 참조). 이는 vue-loader 및 vueify와 같은 SFC 빌드 도구에서 사용됩니다.
start와 end로 정의된 template의 부분을 강조 표시하는 코드 프레임을 생성합니다. 상위 수준 도구에서 오류 보고에 유용합니다.
padpad는 추출된 콘텐츠를 다른 전처리기로 파이프할 때 유용하며, 구문 오류가 있는 경우 올바른 줄 번호나 문자 인덱스를 얻을 수 있습니다.
{ pad: "line" }을 사용하면 각 블록에 대해 추출된 콘텐츠 앞에 원본 파일의 선행 콘텐츠에 있는 각 줄마다 하나의 줄바꿈이 접두사로 붙어 줄 번호가 원본 파일과 정렬되도록 합니다.{ pad: "space" }를 사용하면 각 블록에 대해 추출된 콘텐츠 앞에 원본 파일의 선행 콘텐츠에 있는 각 문자마다 하나의 공백이 접두사로 붙어 문자 수가 원본 파일과 동일하게 유지되도록 합니다.