我有一些与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/
诊断这个问题的其他方法是什么?
当前回答
编辑:你应该像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中的视图)上所证明的那样。上面的版本适用于所有输入。
更新:这似乎不工作与大字符串，它也引入了一个安全漏洞，见评论。
其他回答
元素。innerText也可以做到这一点。
jQuery将为您编码和解码。但是，您需要使用textarea标签，而不是div。
var str1 = 'One & two & three'; var str2 = "One & two & three"; $(document).ready(function() { $("#encoded").text(htmlEncode(str1)); $("#decoded").text(htmlDecode(str2)); }); function htmlDecode(value) { return $("<textarea/>").html(value).text(); } function htmlEncode(value) { return $('<textarea/>').text(value).html(); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="encoded"></div> <div id="decoded"></div>
这个问题没有指定x的来源，但如果可以的话，它有意义，可以防御恶意(或来自我们自己的应用程序的意外)输入。例如，假设x的值为&< >脚本alert('你好');> < /脚本。在jQuery中处理这个问题的一个安全而简单的方法是:
var x = "& <script>alert('hello');</script>";
var safe = $('<div />').html(x).text();
// => "& alert('hello');"
可以通过https://gist.github.com/jmblog/3222899找到。我想不出有什么理由不使用这个解决方案，因为它至少和其他解决方案一样短(如果不是更短的话)，并且提供了对XSS的防御。
(我最初是作为评论发布这篇文章的，但由于同一线程中的后续评论要求我这样做，所以我将其作为回答添加进来)。
我知道这里有很多好的答案，但由于我实现了一个有点不同的方法，我想分享一下。
这段代码是一种非常安全的安全方法，因为转义处理程序依赖于浏览器，而不是函数。因此，如果将来发现新的漏洞，将覆盖此解决方案。
const decodeHTMLEntities = text => {
// Create a new element or use one from cache, to save some element creation overhead
const el = decodeHTMLEntities.__cache_data_element
= decodeHTMLEntities.__cache_data_element
|| document.createElement('div');
const enc = text
// Prevent any mixup of existing pattern in text
.replace(/⪪/g, '⪪#')
// Encode entities in special format. This will prevent native element encoder to replace any amp characters
.replace(/&([a-z1-8]{2,31}|#x[0-9a-f]+|#\d+);/gi, '⪪$1⪫');
// Encode any HTML tags in the text to prevent script injection
el.textContent = enc;
// Decode entities from special format, back to their original HTML entities format
el.innerHTML = el.innerHTML
.replace(/⪪([a-z1-8]{2,31}|#x[0-9a-f]+|#\d+)⪫/gi, '&$1;')
.replace(/#⪫/g, '⪫');
// Get the decoded HTML entities
const dec = el.textContent;
// Clear the element content, in order to preserve a bit of memory (it is just the text may be pretty big)
el.textContent = '';
return dec;
}
// Example
console.log(decodeHTMLEntities("<script>alert('∳∳∳∳⪪#x02233⪫');</script>"));
// Prints: <script>alert('∳∳∳∳⪪##x02233⪫');</script>
顺便说一下，我选择使用字符⪪和⪫，因为它们很少被使用，因此通过匹配它们影响性能的几率显著降低。
当前投票最多的答案有从字符串中删除HTML的缺点。如果这不是你想要的(这当然不是问题的一部分)，那么我建议使用正则表达式来查找HTML实体(/&[^;]*;/gmi)，然后遍历匹配并转换它们。
function decodeHTMLEntities(str) { if (typeof str !== 'string') { return false; } var element = document.createElement('div'); return str.replace(/&[^;]*;/gmi, entity => { entity = entity.replace(/</gm, '<'); element.innerHTML = entity; return element.textContent; }); } var encoded_str = `<b>↑ CAN'T HACK ME, BRO</b>`; var decoded_str = decodeHTMLEntities(encoded_str); console.log(decoded_str);
关于XSS攻击:
虽然innerHTML不执行<script>标签中的代码，但有可能在*事件属性中运行代码，因此用户传递的字符串可能会利用上面的正则表达式:
&<img src='asdfa' error='alert(`doin\' me a hack`)' />;
因此，有必要将任何<字符转换为它们的<在将它们放入隐藏的div元素之前。
此外，为了覆盖我所有的基础，我将注意到，在全局作用域中定义的函数可以通过在控制台上重新定义它们来重写，因此使用const定义这个函数或将其放在非全局作用域中非常重要。
注意:以下示例中企图利用的漏洞会使堆栈片段编辑器混淆，因为它所做的预处理，所以您必须在浏览器的控制台中运行它，或者在它自己的文件中运行它才能查看结果。
var tests = [
"here's a spade: ♠!",
"&<script>alert('hackerman')</script>;",
"&<img src='asdfa' error='alert(`doin\' me a hack`)' />;",
"<b>↑ CAN'T HACK ME, BRO</b>"
];
var decoded = tests.map(decodeHTMLEntities).join("\n");
console.log(decoded);
结果是:
here's a spade: ♠!
&<script>alert('hackerman')</script>;
&<img src='asdfa' error='alert(`doin' me a hack`)' />;
<b>↑ CAN'T HACK ME, BRO</b>
