In a markup page, how can i add something to textContent property of an html tag?

Question

I noticed a XSS vuln I am working to resolve where the jqxGrid will render whatever the cell is. For example: <a href="javascript:alert('test');">Hello</a>. So my thought was to find a way to resolve this. I am currently looping over the data for what needs to display, and there is a renderer and a cellsrenderer function you can pass. My question is: How do i return a HTML string such that the cell, displays text denoted in argument 6.

I have my own sanitization scripts, and stripping scripts i can apply, but i was thinking i could add the value to the textContent property of an HTML element. Is this possible to do?

Could i do something like:

return "<div text-content='VALUE'></div>";

instead of:

return "<div>" + value + " </div>";

Is there an Angular6+ version of JQXGrid we could utilize, which would benefit from the angular injection policies?

I personally am tempted to just make my own version of this grid, but... it will take too much dev time to accomplish to solve this issue.

Assumption: The server checks for this, and the client does as well. Yet, i know we will still get invalid HTML as such. That being said, assume the above value does contain malicious html/javascript.

Answer 1

If you want to show the result, you can use the xmp tag.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp

div {
  font-family: sans-serif;
}

<div>
  <p>This is some HTML</p>
</div>
<xmp>
  <p>This is some HTML</p>
</xmp>

You can also add the un-sanitized HMTL to an element and get the textContent or innerText back out, then add that to your page.

let html = "<ol><li>This is some HTML</li><li>And some more</li></ol>";

let unsanitized = document.querySelector('#unsanitized');
let sanitized = document.querySelector('#sanitized');

let tempEl = document.createElement('div');
tempEl.innerHTML = html;

unsanitized.innerHTML = html;
sanitized.innerHTML = tempEl.textContent;

<div id="unsanitized"></div>
<div id="sanitized"></div>