Creating Safe Renderer/Template Functions to Avoid XSS

Renderer/Template functions are sometimes necessary when using Javascript frameworks such as Angular JS. Below is an example code to generate safe renderer/template functions using user controlled data and avoid XSS issues.

renderer: function(data) {
	var ele = document.createElement("span"); // Create your preferred element type here
	ele.setAttribute("ng-non-bindable", "ng-non-bindable"); // Disable angular binding to avoid angular expression evaluation
	ele.title = data; // Set attributes this way; Be careful NOT to set attributes like href/src/eventhandlers(on...) etc using user controlled data
	ele.textContent = data; // Set user data as textContent to avoid evaluation as HTML code
	return ele.outerHTML; // This will perform all escapes/encodings as necessary and return safe HTML string for rendering.
} 

Please take a moment to share this post: Twitter, LinkedIn. . Thank you!