HTML Security

/**
 * Escape HTML special characters in a string
 * Converts <, >, &, ", and ' to their HTML entity equivalents
 * @param string - String to escape (can be any type, will be converted to string)
 * @returns Escaped HTML string safe for rendering
 */
function escapeHtml(string: unknown): string;

/**
 * Escape HTML comment content to prevent comment breakout
 * Removes patterns that could terminate or malform HTML comments
 * @param src - Comment content to escape
 * @returns Sanitized comment content
 */
function escapeHtmlComment(src: string): string;

/**
 * Regular expression for CSS variable name characters that need escaping
 * Matches special characters that are invalid in CSS custom property names
 */
const cssVarNameEscapeSymbolsRE: RegExp;

/**
 * Escape CSS variable name for safe use in CSS
 * Handles both single and double escaping for different contexts
 * @param key - CSS variable name to escape
 * @param doubleEscape - Whether to use double escaping (for nested contexts)
 * @returns Escaped CSS variable name
 */
function getEscapedCssVarName(
  key: string, 
  doubleEscape: boolean
): string;

import { 
  escapeHtml, 
  escapeHtmlComment, 
  getEscapedCssVarName,
  cssVarNameEscapeSymbolsRE 
} from "@vue/shared";

// HTML content escaping
const userInput = '<script>alert("XSS attack!")</script>';
const safeHtml = escapeHtml(userInput);
console.log(safeHtml); 
// "&lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;"

// Escape various HTML characters
const mixed = 'Hello "world" & <friends>';
const escaped = escapeHtml(mixed);
console.log(escaped);
// "Hello &quot;world&quot; &amp; &lt;friends&gt;"

// Non-string input (converted to string first)
console.log(escapeHtml(123)); // "123"
console.log(escapeHtml(true)); // "true"
console.log(escapeHtml(null)); // "null"

// HTML comment escaping
const maliciousComment = "<!-- previous comment --><!-- inject -->";
const safeComment = escapeHtmlComment(maliciousComment);
console.log(safeComment); // " previous comment   inject "

// More comment attacks
const commentBreakout = "--><script>alert('xss')</script><!--";
const escapedBreakout = escapeHtmlComment(commentBreakout);
console.log(escapedBreakout); // "script>alert('xss')</script"

// CSS variable name escaping
const varName = "my var-name!";
const singleEscaped = getEscapedCssVarName(varName, false);
console.log(singleEscaped); // "my\\ var\\-name\\!"

const doubleEscaped = getEscapedCssVarName(varName, true);
console.log(doubleEscaped); // "my\\\\ var\\\\-name\\\\!"

// Special case: quotes in variable names
const quotedVar = 'my"var';
const quotesEscaped = getEscapedCssVarName(quotedVar, false);
console.log(quotesEscaped); // "my\\\"var"

const quotesDoubleEscaped = getEscapedCssVarName(quotedVar, true);
console.log(quotesDoubleEscaped); // "my\\\\\\\"var"

// CSS variable character detection
const needsEscaping = cssVarNameEscapeSymbolsRE.test("my var!"); // true
const isClean = cssVarNameEscapeSymbolsRE.test("myvar"); // false

// Safe interpolation in templates
const userContent = '<img src="x" onerror="alert(1)">';
const safeContent = escapeHtml(userContent);
// Now safe to render: {{safeContent}}

// Safe comment generation
const userComment = "--><script>malicious()</script><!--";
const safeComment = escapeHtmlComment(userComment);
// Safe to use in: <!-- ${safeComment} -->

// Safe CSS variable names
const dynamicVarName = "user input!";
const safeName = getEscapedCssVarName(dynamicVarName, false);
// Safe to use in: var(--${safeName})