渲染编码的 HTML 字符答案

【问题标题】：Render encoded HTML Characters渲染编码的 HTML 字符
【发布时间】：2019-07-27 23:01:08
【问题描述】：

这可能是一个奇怪的查询，

作为页面上 JavaScript 组件的一部分，我显示了从 WordPress 中提取的几篇博客文章的标题。 WP 网站由营销团队维护。有时他们在标题中使用在 WP 网站上呈现良好但在抓取过程中被编码的字符（特别是 & ' 和 - ）。尽管数据来自受信任的来源，但我们需要维护某种形式的编码以帮助防止 XSS，但我们也希望看到这些字符正确呈现。 JavaScript 函数 decodeURIComponent() 可以很好地呈现字符，但不幸的是，从安全角度来看，我们是开放的。

以前有人遇到过这种问题吗？任何有关图书馆或解决此问题的方法的建议将不胜感激。

我们需要使用的输入类型示例如下：

NN &#8211; Web &#8211; Site &#8211; Test Article &#038; stuff ’ &#038; &#8211;

【问题讨论】：

从安全角度来看，它让您保持开放是什么意思？
不转义特殊字符会导致潜在的 XSS 漏洞。因此，例如，如果我们的一位营销同事不小心写了一篇题为 NN Test Post 4 – 5th December <script>alert('Ahhhh!');</script> 的帖子，这将执行
您尝试了哪些代码来解决这个非常常见的问题？顺便说一句，不需要任何库，但一小段代码示例将有很大帮助。
您的示例的问题在于它应该并且确实可以正确渲染，因此它不是问题的示例。 -> jsfiddle.net/27mjLvda
@Jonny 当您收到标题为 "NN 测试帖子 12 月 4 日至 5 日 "?从您的帖子看来，它已经正确显示了标题（特殊字符已正确转义），那么您还想发生什么？

标签： javascript html wordpress xss unicode-escapes

【解决方案1】：

参考this post 中已回答的内容，您可以使用DOMParser 安全地解释文本。

原始答案的代码示例（以防链接中断）：

var encodedStr = 'hello &amp; world';

var parser = new DOMParser;
var dom = parser.parseFromString(
   '<!doctype html><body>' + encodedStr,
   'text/html');
var decodedString = dom.body.textContent;

console.log(decodedString);

链接的帖子还指出，DomParser 中未启用 JavaScript，因此不会有代码注入您的网站的风险。

【讨论】：

【解决方案2】：

如果没有看到真实的示例代码，就不可能同时确认您的安全问题和呈现错误。

正如我在上面的评论中所说，这是一个常见问题。我个人认为这个问题也应该关闭，但这里有一个可能的修复示例。

将您的 XSS 漏洞字符串放入，没有问题。

var out = null;
function garbage(e) {
  if (out) {
    out.textContent = this.value;
  }
}
window.onload = function() {
  out = document.getElementById("out");
  var d = document.getElementById("in");
  if (d) {
    d.addEventListener("keyup",garbage,false);
  }
}

Garbage in:<br />
<input id="in" type="text" />
<p>
Garbage out:<br />
<div id="out"></div>

【讨论】：