Secure way to output encoding HTML for insert raw html via javascript

Question

I want to be 100% secure, I create raw html this way:

const template = document.createElement('template') template.innerHTML = html_raw const cloned = template.content.cloneNode(true) document.querySelector('#app').appendChild(cloned); 

When I build the html I insert independently every string to his respective html element (from json data object) who pass the validation function

In the validation function, I white list this characters: a-z0123456789(),.:-_/@%'space obviously a space is

after validate the string I replace this characters (),.:-_/@%'space to HTML encoding, for example ( equal to (

my question is, is secure HTML encoding in this way, inserting via innerHTML from html_raw related to HTML context (xss attack)?

I saw this question about innerHTML script can not be executed: https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml

I bypass innerHTML with: <img src="" onerror=alert(0)> but if I replace with HTML encoding: <img src="" onerror=alert(0)> does not execute the script

Answer 1

If you want to insert untrusted HTML markup as text, then you should use the textContent property, notinnerHTML. The textContent property reliably prevents XSS attacks, because the content is only rendered as text and never interpreted as HTML markup, regardless of special characters like < and >.

Trying to come up with your own HTML filters is generally a bad idea, because there's a huge risk of getting this wrong. In your example, you show that angled brackets and double quotes are converted into HTML entities, but your list does not include those characters -- so that's already a mistake either in your list or your description.

If you want to be sure, use the (correct) features provided by the browser itself.