asp.net - Preventing XSS attacks to dynamically created DOM webpages and dynamically generated javascript event handlers -

i have read following article:

https://msdn.microsoft.com/en-us/library/bb355989.aspx

now article allows me understand xss vulnerability defense webpage statically made of asp , html controls built on webpage in true markup layout fashion. understand that control input should use not server side in validation input should validate length, range, format , type. question have trying sanitize website page layout controls build on dom object dynamically when page loads. example on page load event methods add controls document object 1 @ time in method builds entire webpage during calling method. also, control event handling done methods send concatenated javascript strings, during page load, output page handle page control events. guess question is, how use asp.net validation controls, regex checking, etc. functionally when built, dom , javascript event handling on loading of webpage?

i'm afraid ms article has misled you. represents misguided, discredited approach handling injection issues. (asp.net request validation in particular unreliable waste of time.)

input validation valuable ensuring incoming data conform expected business rules , doesn't contain confusing characters control characters, not reliable means of preventing html or js injection issues leading cross-site-scripting.

the way prevent injection issues is, whenever inserting text wider context, encode text fit context. so, when you're templating string html, html-escape it; when you're putting parameter url, url-escape it; when you're writing string <script> block, js-escape it, , on.

in asp.net templates means using <%: ... %> construct put content in page instead of <%= ... %>, html-escapes automatically. (in razor, @{...} construct automatically escapes.)

at client side have @ code being used create new dom elements. in general classic bad pattern out creating markup strings inserted it, like:

element.innerhtml = '<div>hello, '+name+'</div>'; 

the quick fix here write function html-escaping on client side, eg:

function escapehtml(s) {     return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;'); }  element.innerhtml = '<div>hello, '+escapehtml(name)+'</div>'; 

it's better avoid kind of dom-xss problem writing data directly dom properties, don't need escaping:

var div = document.createelement('div'); div.textcontent = 'hello, '+name; element.appendchild(div); 

(similarly if using jquery, prefer setting text() , attr() html().)