Question

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

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

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

我们需要处理的一种输入示例如下：

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

Answer 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，因此不会有代码注入到您的网站中的风险。

Answer 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>

渲染编码的HTML字符

2 个答案: