我有一些与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/
诊断这个问题的其他方法是什么?
这是我迄今为止尝试过的最全面的解决方案:
const STANDARD_HTML_ENTITIES = {
nbsp: String.fromCharCode(160),
amp: "&",
quot: '"',
lt: "<",
gt: ">"
};
const replaceHtmlEntities = plainTextString => {
return plainTextString
.replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec))
.replace(
/&(nbsp|amp|quot|lt|gt);/g,
(a, b) => STANDARD_HTML_ENTITIES[b]
);
};
其他答案都有问题。
document.createElement('div')方法(包括使用jQuery的方法)执行传递给它的任何javascript(一个安全问题),DOMParser.parseFromString()方法修饰空白。这是一个纯javascript解决方案,没有任何问题:
function htmlDecode(html) {
var textarea = document.createElement("textarea");
html= html.replace(/\r/g, String.fromCharCode(0xe000)); // Replace "\r" with reserved unicode character.
textarea.innerHTML = html;
var result = textarea.value;
return result.replace(new RegExp(String.fromCharCode(0xe000), 'g'), '\r');
}
TextArea是专门用来避免执行js代码。它通过了这些:
htmlDecode('<& >'); // returns "<& >" with non-breaking space.
htmlDecode(' '); // returns " "
htmlDecode('<img src="dummy" onerror="alert(\'xss\')">'); // Does not execute alert()
htmlDecode('\r\n') // returns "\r\n", doesn't lose the \r like other solutions.
编辑:你应该像Wladimir建议的那样使用DOMParser API,我编辑了我之前的答案,因为发布的函数引入了安全漏洞。
下面的代码片段是老答案的代码,只做了一些小修改:使用textarea而不是div减少了XSS漏洞,但在IE9和Firefox中仍然存在问题。
function htmlDecode(input){
var e = document.createElement('textarea');
e.innerHTML = input;
// handle case of empty input
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
htmlDecode("<img src='myimage.jpg'>");
// returns "<img src='myimage.jpg'>"
基本上,我以编程方式创建了一个DOM元素,将编码的HTML分配给它的innerHTML,并从innerHTML插入上创建的文本节点检索nodeValue。因为它只是创建了一个元素,而没有添加它,所以没有修改站点HTML。
它将跨浏览器(包括旧浏览器)工作,并接受所有的HTML字符实体。
编辑:这段代码的旧版本不能在IE空白输入上工作,正如jsFiddle (IE中的视图)上所证明的那样。上面的版本适用于所有输入。
更新:这似乎不工作与大字符串,它也引入了一个安全漏洞,见评论。