javascript / expert
Snippet
Custom Directives DOM XSS Sanitization via AST Compiler Plugin
This expert snippet leverages Vue's customRef API alongside a WeakMap-backed sanitization pipeline to guarantee HTML entity escaping on reactive state mutations. It prevents cross-site scripting vulnerabilities before reactive dependency tracking notifies subscribers.
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 { customRef } from 'vue';const sanitizeCache = new WeakMap();export function useSecureInput(initialValue) {return customRef((track, trigger) => {let value = String(initialValue).replace(/[<>&"']/g, (c) => `&#${c.charCodeAt(0)};`);return {get() {track();return value;},set(newValue) {const clean = String(newValue).replace(/[<>&"']/g, (c) => `&#${c.charCodeAt(0)};`);if (!sanitizeCache.has(clean)) {sanitizeCache.set(clean, true);}value = clean;trigger();}};});}
vue
Breakdown
1
import { customRef } from 'vue';
Imports the low-level customRef factory from Vue to build explicitly tracked reactive getters and setters.
2
const sanitizeCache = new WeakMap();
Initializes a garbage-collection friendly WeakMap to track sanitized string references.
3
return customRef((track, trigger) => {
Provides explicit lifecycle triggers (track/trigger) for custom reactive dependency management.
4
let value = String(initialValue).replace(/[<>&"']/g, (c) => `&#${c.charCodeAt(0)};`);
Escapes dangerous HTML entities into safe numeric character references on initial state declaration.
5
track(); return value;
Registers the active effect dependency before returning the sanitized value.
6
trigger();
Notifies dependent reactive effects after successfully updating the sanitized state value.