我有一些与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/
诊断这个问题的其他方法是什么?
当前回答
当前投票最多的答案有从字符串中删除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>
其他回答
一个javascript解决方案，捕捉常见的:
var map = {amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'"}
str = str.replace(/&([^;]+);/g, (m, c) => map[c])
这是https://stackoverflow.com/a/4835406/2738039的反面
这里给出的大多数答案都有一个巨大的缺点:如果您试图转换的字符串不受信任，那么您将以跨站点脚本(XSS)漏洞告终。对于已接受答案中的函数，考虑如下:
htmlDecode("<img src='dummy' onerror='alert(/xss/)'>");
这里的字符串包含一个未转义的HTML标记，因此htmlDecode函数将实际运行字符串中指定的JavaScript代码，而不是解码任何内容。
这可以通过使用所有现代浏览器都支持的DOMParser来避免:
html解码(输入)功能 瓦尔多克=新住户。parseFromString(输入,“短信/ html”); 归来医生。documentElement textContent; 的 控制台.log(htmlDecode(“< img src=‘myimage.jpg’>’) <img src='myimage.jpg'> ' 控制台(htmlDecode(“<img src=‘dummy’on误差=‘alert(/xss/)'>) - "
该函数保证不会运行任何JavaScript代码作为副作用。任何HTML标记将被忽略，只返回文本内容。
兼容性说明:使用DOMParser解析HTML至少需要Chrome 30、Firefox 12、Opera 17、Internet Explorer 10、Safari 7.1或Microsoft Edge。因此，所有没有支持的浏览器都已经超过了它们的EOL，截至2017年，唯一能在野外看到的是旧的Internet Explorer和Safari版本(通常这些版本仍然不够多)。
有一种变体的效率是最高层的答案的80%。
参见基准测试:https://jsperf.com/decode-html12345678/1
console.log (decodeEntities('测试:在')); 函数decodeEntities(str) { //这将避免每次创建对象时产生任何开销 const el = decodeEntities。document.createElement('textarea') //条带脚本/html标签 埃尔。innerHTML = str .replace(/ <脚本(^ >]* > ([\ S \ S] * ?) < > \ /脚本/ gmi公司”) .replace (/ < \ / ? \ w (?:[^"'>]|"[^"]*"|'[^']*')*>/ gmi公司”); 返回el.value; ｝
如果需要留下标记，那么删除两个.replace(…)调用(如果不需要脚本，可以留下第一个调用)。
函数decodeHTMLContent(htmlText) { var txt = document.createElement("span"); 三种。innerHTML = htmlText; 返回txt.innerText; ｝ var result = decodeHTMLContent('One &两个,三个“); console.log(结果);
诀窍是使用浏览器的功能来解码特殊的HTML字符，但不允许浏览器执行结果，就像它是实际的HTML一样…这个函数使用一个正则表达式来识别和替换编码的HTML字符，一次一个字符。
function unescapeHtml(html) {
var el = document.createElement('div');
return html.replace(/\&[#0-9a-z]+;/gi, function (enc) {
el.innerHTML = enc;
return el.innerText
});
}
