Output Encoding

Output encoding (also called output escaping) is a critical security technique that ensures untrusted data cannot be interpreted as executable code when placed into a web page. Unlike input validation, which restricts what enters the application, output encoding transforms data at the point of output to make it safe for the specific context in which it is being rendered.

The key principle of output encoding is context-awareness. Different output contexts require different encoding schemes. HTML entity encoding converts characters like < and > to < and > for HTML body content. JavaScript encoding handles data inserted into JavaScript contexts. URL encoding ensures special characters are safe in URL parameters. CSS encoding protects against injection in style contexts. Using the wrong encoding for a given context provides no protection.

Modern web frameworks such as React, Angular, and Vue provide automatic output encoding for most common contexts, significantly reducing XSS risk. However, developers must be careful when using features that bypass this automatic protection, such as React's dangerouslySetInnerHTML or Angular's bypassSecurityTrustHtml.

Best practices include always encoding output based on the specific context, using framework-provided encoding functions rather than custom implementations, never disabling automatic encoding without a thorough security review, and combining output encoding with Content Security Policy for a robust defence-in-depth strategy against injection attacks.