javascript / expert
Snippet
AST-Elementknoten-Bereinigung für Template-Injektionen im Compiler
Die Vue SFC-Kompilierung parst Template-Strings in einen abstrakten Syntaxbaum (AST). Durch die Nutzung von Compiler-nodeTransforms-Optionen kann die Sicherheitsarchitektur gefährliche Inline-Event-Attribute während der Kompilierung vor der Codegenerierung entfernen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { compile } from 'vue/compiler-sfc';function sanitizeAstNode(node) {if (node.type === 1) {node.props = node.props.filter(prop => {if (prop.type === 6 && prop.name.startsWith('on')) {return !/^on\w+/i.test(prop.name);}return true;});node.children.forEach(sanitizeAstNode);}}export function compileSecureTemplate(template) {return compile(template, {nodeTransforms: [(node) => {sanitizeAstNode(node);}]});}
vue
Erklärung
1
if (node.type === 1) {
Prüft, ob der AST-Knoten einen Elementknoten im Template darstellt.
2
if (prop.type === 6 && prop.name.startsWith('on')) {
Identifiziert einfache HTML-Attribute, die direkte Event-Handler versuchen.
3
return !/^on\w+/i.test(prop.name);
Entfernt potenzielle Inline-Event-Handler-Vektoren wie onload oder onerror.
4
nodeTransforms: [
Koppelt eine benutzerdefinierte Compiler-Transformation in den Vue-Kompilierungszyklus ein.