在标记页面中，如何向 html 标记的 textContent 属性添加内容？

Question

我注意到一个 XSS 漏洞，我正在努力解决 jqxGrid 将在哪里呈现单元格的任何内容。例如：<a href="javascript:alert('test');">Hello</a>。所以我的想法是找到解决这个问题的方法。我目前正在循环遍历需要显示的数据，并且您可以传递一个渲染器和一个单元格渲染器函数。我的问题是：我如何返回一个 HTML 字符串，以便单元格显示参数 6 中表示的文本。

我有自己的清理脚本和可以应用的剥离脚本，但我想我可以将值添加到 HTML 元素的 textContent 属性中。这可以吗？

我可以这样做吗：

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

代替：

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

是否有我们可以使用的 Angular6+ 版本的 JQXGrid，它可以从角度注入策略中受益？

我个人很想制作我自己的这个网格版本，但是......解决这个问题需要花费太多的开发时间。

假设：服务器会对此进行检查，客户端也会进行检查。然而，我知道我们仍然会得到无效的 HTML。话虽如此，假设上述 value 确实包含恶意 html/javascript。

Answer 1

如果要显示结果，可以使用xmp标签。

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>

您还可以将未过滤的 HMTL 添加到元素并取出 textContent 或 innerText，然后将其添加到您的页面。

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>