Unescape HTML entities in JavaScript？

javascript html escaping xml-rpc

2022-08-30 00:51:20

我有一些与XML-RPC后端通信的JavaScript代码。XML-RPC 返回以下格式的字符串：

<img src='myimage.jpg'>

但是，当我使用JavaScript将字符串插入HTML时，它们会按字面意思呈现。我没有看到图像，我从字面上看到了字符串：

<img src='myimage.jpg'>

我的猜测是，HTML 是通过 XML-RPC 通道转义的。

如何在 JavaScript 中解开字符串？我尝试了此页面上的技术，但没有成功：http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/

诊断问题的其他方法有哪些？

答案 1

这里给出的大多数答案都有一个巨大的缺点：如果您尝试转换的字符串不可信，那么您最终将面临跨站点脚本（XSS）漏洞。对于接受的答案中的函数，请考虑以下事项：

htmlDecode("<img src='dummy' onerror='alert(/xss/)'>");

这里的字符串包含一个未转义的HTML标签，因此该函数实际上将运行字符串中指定的JavaScript代码，而不是解码任何内容。htmlDecode

这可以通过使用所有现代浏览器都支持的DOMParser来避免：

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

console.log(  htmlDecode("&lt;img src='myimage.jpg'&gt;")  )    
// "<img src='myimage.jpg'>"

console.log(  htmlDecode("<img src='dummy' onerror='alert(/xss/)'>")  )  
// ""

此函数保证不会运行任何 JavaScript 代码作为副作用。任何HTML标记都将被忽略，仅返回文本内容。

兼容性说明：解析 HTML 至少需要 Chrome 30、Firefox 12、Opera 17、Internet Explorer 10、Safari 7.1 或 Microsoft Edge。因此，所有没有支持的浏览器都远远超过了它们的EOL，截至2017年，唯一仍然可以在野外看到的浏览器是较旧的Internet Explorer和Safari版本（通常这些版本仍然不够多，无法打扰）。DOMParser

答案 2

您需要解码所有编码的HTML实体还是仅解码其本身？&

如果你只需要处理，那么你可以这样做：&

var decoded = encoded.replace(/&amp;/g, '&');

如果您需要解码所有HTML实体，那么您可以在没有jQuery的情况下执行此操作：

var elem = document.createElement('textarea');
elem.innerHTML = encoded;
var decoded = elem.value;

请注意Mark下面的评论，这些评论突出显示了此答案的早期版本中的安全漏洞，并建议使用textarea而不是div来缓解潜在的XSS漏洞。无论您使用 jQuery 还是普通 JavaScript，都存在这些漏洞。