Build HTML strings with a tagged template literal that auto-escapes every interpolated value. Eliminates a class of XSS bugs without pulling in a templating library.
TypeScript
function esc(s: unknown): string {
return String(s).replace(/[&<>"']/g, c => ({
'&': '&', '<': '<', '>': '>', '"': '"', "'": ''',
}[c]!));
}
export function html(strings: TemplateStringsArray, ...values: unknown[]): string {
return strings.reduce((acc, str, i) =>
acc + str + (i < values.length ? esc(values[i]) : ''), '');
}
const name = '<script>alert(1)</script>';
const out = html`<p>Hello, ${name}!</p>`;
// '<p>Hello, <script>alert(1)</script>!</p>'Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.