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

Posted 2023-05-08

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

【英文标题】：In a markup page, how can i add something to textContent property of an html tag?

【发布时间】：2019-04-19 23:30:05

【问题描述】：

我注意到一个 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。

【问题讨论】：

您可以使用很多替代方案（primeng、material 等），但 *** 并不是真正推荐库的地方

我不是来找图书馆的。我想知道 JQXGrid 中是否有清理方法，或者是否通过 HTML 应用我希望通过节点 textContent 节点而不是呈现的 HTML 节点显示的文本字符串。

您可以使用DomSanitizer 清理您的HTML

@user184994 我知道 DomSanitizer，但这是为了绕过 Angular 安全规则。虽然我只是查看了 sanitize 方法，这可能是一个有效的选择，尤其是因为现在，我正在开发一个 Angular 组件。我必须阅读 sanitize 命令的具体示例。

【参考方案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>

【讨论】：

由于 xml 的弃用性质，我可能想改用 <pre>。我不想像在纯标记中那样使用 javascript。我会看看可能做我想做的事的 pre 标签。尝试做时：<pre><a href="#">test</a></pre> 它没有按我预期的那样做。生病继续寻找其他演示