I am trying to implement rule 1 in the OWASP XSS prevention cheat sheet. Rule 1 states the following characters should be encoded before inserting them into the body of a <div>:
& --> &
< --> <
> --> >
" --> "
' --> '
My goal is to insert the encoded characters into the DOM and have them render as their non encoded values. However this does not seem to be possible, with quotes.
When you put either " or ' into the innerHTML of a div, the browser converts it back to " or '.
document.getElementById("encodingNotWorking").innerHTML = "& > < " ' ' ""
let domData = document.getElementById("encodingNotWorking").innerHTML;
document.getElementById("actualCharacters").innerText = domData;Encoded quote characters:
<div id = "encodingNotWorking">
</div>
Characters in the dom:
<div id = "actualCharacters">
</div>(JSFiddle)
How can I put the encoded entities (quotes) into the DOM, have them render as their non encoded values, and verify the encoded entities are actually in the DOM?