我有一些与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/
诊断这个问题的其他方法是什么?
从JavaScript解释HTML(文本或其他)的一个更现代的选项是DOMParser API中的HTML支持(参见MDN)。这允许您使用浏览器的原生HTML解析器将字符串转换为HTML文档。自2014年底以来,所有主流浏览器的新版本都支持它。
如果我们只想解码一些文本内容,我们可以把它作为文档主体中的唯一内容,解析文档,并取出它的.body. textcontent。
var encodedStr = 'hello & world';
var parser = new DOMParser;
var dom = parser.parseFromString(
'<!doctype html><body>' + encodedStr,
“文本/html”);
var decodedString = dom.body.textContent;
console.log(解码字符串);
我们可以在DOMParser规范草案中看到,JavaScript没有为被解析的文档启用,因此我们可以在没有安全问题的情况下执行文本转换。
parseFromString(str, type)方法必须运行这些步骤,具体取决于类型:
“text / html”
使用HTML解析器解析str,并返回新创建的Document。
脚本标记必须设置为“disabled”。
请注意
脚本元素被标记为不可执行,noscript的内容被解析为标记。
这超出了这个问题的范围,但是请注意,如果您使用已解析的DOM节点本身(不仅仅是它们的文本内容)并将它们移动到活动文档DOM,那么它们的脚本可能会被重新启用,并且可能存在安全问题。我还没有研究过,所以请谨慎行事。
我在我的项目中使用了这个方法:受到其他答案的启发,但有一个额外的安全参数,在处理装饰字符时很有用
var decodeEntities=(function(){
var el=document.createElement('div');
return function(str, safeEscape){
if(str && typeof str === 'string'){
str=str.replace(/\</g, '<');
el.innerHTML=str;
if(el.innerText){
str=el.innerText;
el.innerText='';
}
else if(el.textContent){
str=el.textContent;
el.textContent='';
}
if(safeEscape)
str=str.replace(/\</g, '<');
}
return str;
}
})();
它的可用性如下:
var label='safe <b> character éntity</b>';
var safehtml='<div title="'+decodeEntities(label)+'">'+decodeEntities(label, true)+'</div>';
var htmlEnDeCode = (function() {
var charToEntityRegex,
entityToCharRegex,
charToEntity,
entityToChar;
function resetCharacterEntities() {
charToEntity = {};
entityToChar = {};
// add the default set
addCharacterEntities({
'&' : '&',
'>' : '>',
'<' : '<',
'"' : '"',
''' : "'"
});
}
function addCharacterEntities(newEntities) {
var charKeys = [],
entityKeys = [],
key, echar;
for (key in newEntities) {
echar = newEntities[key];
entityToChar[key] = echar;
charToEntity[echar] = key;
charKeys.push(echar);
entityKeys.push(key);
}
charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
}
function htmlEncode(value){
var htmlEncodeReplaceFn = function(match, capture) {
return charToEntity[capture];
};
return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
}
function htmlDecode(value) {
var htmlDecodeReplaceFn = function(match, capture) {
return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
};
return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
}
resetCharacterEntities();
return {
htmlEncode: htmlEncode,
htmlDecode: htmlDecode
};
})();
这是ExtJS的源代码。
你需要解码所有编码的HTML实体或只是&本身?
如果你只需要处理&然后你可以这样做:
var decoded = encoded.replace(/&/g, '&');
如果你需要解码所有HTML实体,那么你可以不使用jQuery:
var elem = document.createElement('textarea');
elem.innerHTML = encoded;
var decoded = elem.value;
请注意下面Mark的评论,他强调了这个答案早期版本中的安全漏洞,并建议使用textarea而不是div来减轻潜在的XSS漏洞。无论使用jQuery还是纯JavaScript,这些漏洞都存在。
这里给出的大多数答案都有一个巨大的缺点:如果您试图转换的字符串不受信任,那么您将以跨站点脚本(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版本(通常这些版本仍然不够多)。