Unescape HTML เอนทิตีใน Javascript?

ฉันมีรหัสจาวาสคริปต์ที่สื่อสารกับแบ็กเอนด์ XML-RPC 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/

วิธีอื่นในการวินิจฉัยปัญหามีอะไรบ้าง

แก้ไข:คุณควรใช้ DOMParser API เนื่องจากWladimir แนะนำให้ฉันแก้ไขคำตอบก่อนหน้าของฉันเนื่องจากฟังก์ชั่นที่โพสต์นั้นมีช่องโหว่ด้านความปลอดภัย

ตัวอย่างต่อไปนี้เป็นรหัสของคำตอบเก่าที่มีการดัดแปลงเล็กน้อย: การใช้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 และดึงข้อมูล nodeValue จากโหนดข้อความที่สร้างในการแทรก InnerHTML เนื่องจากเพิ่งสร้างองค์ประกอบ แต่ไม่เคยเพิ่มองค์ประกอบจึงไม่มีการแก้ไข HTML ของไซต์

มันจะทำงานข้ามเบราว์เซอร์ (รวมถึงเบราว์เซอร์ที่เก่ากว่า) และยอมรับเอนทิตีอักขระ HTMLทั้งหมด

แก้ไข: รหัสเก่าของรุ่นนี้ไม่ได้ทำงานบน IE ที่มีอินพุตว่างตามหลักฐานที่นี่ใน jsFiddle (ดูใน IE) เวอร์ชันด้านบนใช้งานได้กับอินพุตทั้งหมด

UPDATE: ปรากฏว่าสิ่งนี้ใช้ไม่ได้กับสตริงจำนวนมากและยังมีช่องโหว่ด้านความปลอดภัยอีกด้วยดูความคิดเห็น

คำตอบส่วนใหญ่ให้ที่นี่มีข้อเสียใหญ่: ถ้าสตริงที่คุณกำลังพยายามที่จะแปลงไม่น่าเชื่อถือแล้วคุณจะจบลงด้วยการข้าม Site Scripting (XSS) ช่องโหว่ สำหรับฟังก์ชันในคำตอบที่ยอมรับให้พิจารณาสิ่งต่อไปนี้:

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

สตริงที่นี่มีแท็ก HTML ที่ไม่ใช้ค่า Escape ดังนั้นแทนที่จะถอดรหัสสิ่งใดhtmlDecodeฟังก์ชันจะใช้งานโค้ด JavaScript ที่ระบุในสตริง

สิ่งนี้สามารถหลีกเลี่ยงได้โดยใช้DOMParserซึ่งรองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด :

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

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

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

ฟังก์ชั่นนี้รับประกันว่าจะไม่เรียกใช้โค้ด JavaScript ใด ๆ ว่าเป็นผลข้างเคียง แท็ก HTML ใด ๆ จะถูกละเว้นเฉพาะเนื้อหาข้อความเท่านั้นที่จะถูกส่งคืน

หมายเหตุความเข้ากันได้ : การแยก HTML ด้วยDOMParserอย่างน้อยต้องเป็น Chrome 30, Firefox 12, Opera 17, Internet Explorer 10, Safari 7.1 หรือ Microsoft Edge ดังนั้นเบราว์เซอร์ทั้งหมดที่ไม่มีการสนับสนุนจะผ่าน EOL และในปี 2560 มีเพียงเบราว์เซอร์รุ่นล่าสุดที่ยังคงสามารถพบเห็นได้ในบางครั้งเท่านั้นคือ Internet Explorer และ Safari เวอร์ชันเก่า

หากคุณใช้ jQuery:

function htmlDecode(value){ 
  return $('<div/>').html(value).text(); 
}

มิฉะนั้นให้ใช้Encoder Object ของซอฟต์แวร์อย่างเข้มงวดซึ่งมีhtmlDecode()ฟังก์ชั่นที่ยอดเยี่ยม

เคล็ดลับคือการใช้พลังของเบราว์เซอร์ในการถอดรหัสอักขระ HTML พิเศษ แต่ไม่อนุญาตให้เบราว์เซอร์เรียกใช้ผลลัพธ์ราวกับว่าเป็น html จริง ... ฟังก์ชันนี้ใช้ regex เพื่อระบุและแทนที่อักขระ HTML ที่เข้ารหัสหนึ่งอักขระ ขณะนั้น.

function unescapeHtml(html) {
    var el = document.createElement('div');
    return html.replace(/\&[#0-9a-z]+;/gi, function (enc) {
        el.innerHTML = enc;
        return el.innerText
    });
}

คำตอบของ CMS ใช้งานได้ดียกเว้นว่า HTML ที่คุณต้องการยกเลิกการใช้ Unescape นั้นยาวมากและยาวกว่า 65536 ตัวอักษร เนื่องจากใน Chrome HTML ภายในจะถูกแบ่งออกเป็นโหนดย่อยหลายโหนดแต่ละโหนดมีความยาวสูงสุด 65536 และคุณต้องเชื่อมต่อกัน ฟังก์ชั่นนี้ใช้งานได้กับสตริงที่ยาวมากด้วย:

function unencodeHtmlContent(escapedHtml) {
  var elem = document.createElement('div');
  elem.innerHTML = escapedHtml;
  var result = '';
  // Chrome splits innerHTML into many child nodes, each one at most 65536.
  // Whereas FF creates just one single huge child node.
  for (var i = 0; i < elem.childNodes.length; ++i) {
    result = result + elem.childNodes[i].nodeValue;
  }
  return result;
}

ดูคำตอบเกี่ยวกับinnerHTMLความยาวสูงสุดสำหรับข้อมูลเพิ่มเติม: https://stackoverflow.com/a/27545633/694469

ไม่ใช่การตอบคำถามของคุณโดยตรง แต่มันจะดีกว่าหรือที่ RPC ของคุณจะกลับโครงสร้างบางอย่าง (ไม่ว่าจะเป็น XML หรือ JSON หรืออะไรก็ตาม) ด้วยข้อมูลภาพเหล่านั้น (URL ในตัวอย่างของคุณ) ภายในโครงสร้างนั้น

จากนั้นคุณสามารถแยกวิเคราะห์ในจาวาสคริปต์ของคุณและสร้างการ<img>ใช้จาวาสคริปต์เอง

โครงสร้างที่คุณได้รับจาก RPC อาจมีลักษณะดังนี้:

{"img" : ["myimage.jpg", "myimage2.jpg"]}

ฉันคิดว่าวิธีนี้จะดีกว่าเนื่องจากการฉีดโค้ดที่มาจากแหล่งภายนอกลงในหน้าของคุณนั้นดูไม่ปลอดภัย การถ่ายภาพใครบางคนกำลังแย่งชิงสคริปต์ XML-RPC ของคุณและวางสิ่งที่คุณไม่ต้องการเข้าไป (แม้แต่บางจาวาสคริปต์ ... )

คริสคำตอบที่เป็นสิ่งที่ดีและสง่างาม แต่ก็ล้มเหลวถ้าค่าไม่ได้กำหนด การปรับปรุงที่เรียบง่ายทำให้มันแข็งแกร่ง:

function htmlDecode(value) {
   return (typeof value === 'undefined') ? '' : $('<div/>').html(value).text();
}

ยินดีต้อนรับคุณ ... แค่ผู้ส่งสาร ... เครดิตทั้งหมดไปที่ ourcodeworld.com ลิงค์ด้านล่าง

window.htmlentities = {
        /**
         * Converts a string to its html characters completely.
         *
         * @param {String} str String with unescaped HTML characters
         **/
        encode : function(str) {
            var buf = [];

            for (var i=str.length-1;i>=0;i--) {
                buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
            }

            return buf.join('');
        },
        /**
         * Converts an html characterSet into its original character.
         *
         * @param {String} str htmlSet entities
         **/
        decode : function(str) {
            return str.replace(/&#(\d+);/g, function(match, dec) {
                return String.fromCharCode(dec);
            });
        }
    };

เครดิตทั้งหมด: https://ourcodeworld.com/articles/read/188/encode-and-decode-html-entities-using-pure-javascript

นี่เป็นโซลูชันที่ครอบคลุมที่สุดที่ฉันได้ลองมา:

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]
        );
};

ฉันคลั่งไคล้มากพอที่จะผ่านและทำให้ฟังก์ชั่นนี้น่าจะดีถ้าไม่ครบถ้วนสมบูรณ์:

function removeEncoding(string) {
    return string.replace(/&Agrave;/g, "À").replace(/&Aacute;/g, "Á").replace(/&Acirc;/g, "Â").replace(/&Atilde;/g, "Ã").replace(/&Auml;/g, "Ä").replace(/&Aring;/g, "Å").replace(/&agrave;/g, "à").replace(/&acirc;/g, "â").replace(/&atilde;/g, "ã").replace(/&auml;/g, "ä").replace(/&aring;/g, "å").replace(/&AElig;/g, "Æ").replace(/&aelig;/g, "æ").replace(/&szlig;/g, "ß").replace(/&Ccedil;/g, "Ç").replace(/&ccedil;/g, "ç").replace(/&Egrave;/g, "È").replace(/&Eacute;/g, "É").replace(/&Ecirc;/g, "Ê").replace(/&Euml;/g, "Ë").replace(/&egrave;/g, "è").replace(/&eacute;/g, "é").replace(/&ecirc;/g, "ê").replace(/&euml;/g, "ë").replace(/&#131;/g, "ƒ").replace(/&Igrave;/g, "Ì").replace(/&Iacute;/g, "Í").replace(/&Icirc;/g, "Î").replace(/&Iuml;/g, "Ï").replace(/&igrave;/g, "ì").replace(/&iacute;/g, "í").replace(/&icirc;/g, "î").replace(/&iuml;/g, "ï").replace(/&Ntilde;/g, "Ñ").replace(/&ntilde;/g, "ñ").replace(/&Ograve;/g, "Ò").replace(/&Oacute;/g, "Ó").replace(/&Ocirc;/g, "Ô").replace(/&Otilde;/g, "Õ").replace(/&Ouml;/g, "Ö").replace(/&ograve;/g, "ò").replace(/&oacute;/g, "ó").replace(/&ocirc;/g, "ô").replace(/&otilde;/g, "õ").replace(/&ouml;/g, "ö").replace(/&Oslash;/g, "Ø").replace(/&oslash;/g, "ø").replace(/&#140;/g, "Œ").replace(/&#156;/g, "œ").replace(/&#138;/g, "Š").replace(/&#154;/g, "š").replace(/&Ugrave;/g, "Ù").replace(/&Uacute;/g, "Ú").replace(/&Ucirc;/g, "Û").replace(/&Uuml;/g, "Ü").replace(/&ugrave;/g, "ù").replace(/&uacute;/g, "ú").replace(/&ucirc;/g, "û").replace(/&uuml;/g, "ü").replace(/&#181;/g, "µ").replace(/&#215;/g, "×").replace(/&Yacute;/g, "Ý").replace(/&#159;/g, "Ÿ").replace(/&yacute;/g, "ý").replace(/&yuml;/g, "ÿ").replace(/&#176;/g, "°").replace(/&#134;/g, "†").replace(/&#135;/g, "‡").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&#177;/g, "±").replace(/&#171;/g, "«").replace(/&#187;/g, "»").replace(/&#191;/g, "¿").replace(/&#161;/g, "¡").replace(/&#183;/g, "·").replace(/&#149;/g, "•").replace(/&#153;/g, "™").replace(/&copy;/g, "©").replace(/&reg;/g, "®").replace(/&#167;/g, "§").replace(/&#182;/g, "¶").replace(/&Alpha;/g, "Α").replace(/&Beta;/g, "Β").replace(/&Gamma;/g, "Γ").replace(/&Delta;/g, "Δ").replace(/&Epsilon;/g, "Ε").replace(/&Zeta;/g, "Ζ").replace(/&Eta;/g, "Η").replace(/&Theta;/g, "Θ").replace(/&Iota;/g, "Ι").replace(/&Kappa;/g, "Κ").replace(/&Lambda;/g, "Λ").replace(/&Mu;/g, "Μ").replace(/&Nu;/g, "Ν").replace(/&Xi;/g, "Ξ").replace(/&Omicron;/g, "Ο").replace(/&Pi;/g, "Π").replace(/&Rho;/g, "Ρ").replace(/&Sigma;/g, "Σ").replace(/&Tau;/g, "Τ").replace(/&Upsilon;/g, "Υ").replace(/&Phi;/g, "Φ").replace(/&Chi;/g, "Χ").replace(/&Psi;/g, "Ψ").replace(/&Omega;/g, "Ω").replace(/&alpha;/g, "α").replace(/&beta;/g, "β").replace(/&gamma;/g, "γ").replace(/&delta;/g, "δ").replace(/&epsilon;/g, "ε").replace(/&zeta;/g, "ζ").replace(/&eta;/g, "η").replace(/&theta;/g, "θ").replace(/&iota;/g, "ι").replace(/&kappa;/g, "κ").replace(/&lambda;/g, "λ").replace(/&mu;/g, "μ").replace(/&nu;/g, "ν").replace(/&xi;/g, "ξ").replace(/&omicron;/g, "ο").replace(/&piρ;/g, "ρ").replace(/&rho;/g, "ς").replace(/&sigmaf;/g, "ς").replace(/&sigma;/g, "σ").replace(/&tau;/g, "τ").replace(/&phi;/g, "φ").replace(/&chi;/g, "χ").replace(/&psi;/g, "ψ").replace(/&omega;/g, "ω").replace(/&bull;/g, "•").replace(/&hellip;/g, "…").replace(/&prime;/g, "′").replace(/&Prime;/g, "″").replace(/&oline;/g, "‾").replace(/&frasl;/g, "⁄").replace(/&weierp;/g, "℘").replace(/&image;/g, "ℑ").replace(/&real;/g, "ℜ").replace(/&trade;/g, "™").replace(/&alefsym;/g, "ℵ").replace(/&larr;/g, "←").replace(/&uarr;/g, "↑").replace(/&rarr;/g, "→").replace(/&darr;/g, "↓").replace(/&barr;/g, "↔").replace(/&crarr;/g, "↵").replace(/&lArr;/g, "⇐").replace(/&uArr;/g, "⇑").replace(/&rArr;/g, "⇒").replace(/&dArr;/g, "⇓").replace(/&hArr;/g, "⇔").replace(/&forall;/g, "∀").replace(/&part;/g, "∂").replace(/&exist;/g, "∃").replace(/&empty;/g, "∅").replace(/&nabla;/g, "∇").replace(/&isin;/g, "∈").replace(/&notin;/g, "∉").replace(/&ni;/g, "∋").replace(/&prod;/g, "∏").replace(/&sum;/g, "∑").replace(/&minus;/g, "−").replace(/&lowast;/g, "∗").replace(/&radic;/g, "√").replace(/&prop;/g, "∝").replace(/&infin;/g, "∞").replace(/&OEig;/g, "Œ").replace(/&oelig;/g, "œ").replace(/&Yuml;/g, "Ÿ").replace(/&spades;/g, "♠").replace(/&clubs;/g, "♣").replace(/&hearts;/g, "♥").replace(/&diams;/g, "♦").replace(/&thetasym;/g, "ϑ").replace(/&upsih;/g, "ϒ").replace(/&piv;/g, "ϖ").replace(/&Scaron;/g, "Š").replace(/&scaron;/g, "š").replace(/&ang;/g, "∠").replace(/&and;/g, "∧").replace(/&or;/g, "∨").replace(/&cap;/g, "∩").replace(/&cup;/g, "∪").replace(/&int;/g, "∫").replace(/&there4;/g, "∴").replace(/&sim;/g, "∼").replace(/&cong;/g, "≅").replace(/&asymp;/g, "≈").replace(/&ne;/g, "≠").replace(/&equiv;/g, "≡").replace(/&le;/g, "≤").replace(/&ge;/g, "≥").replace(/&sub;/g, "⊂").replace(/&sup;/g, "⊃").replace(/&nsub;/g, "⊄").replace(/&sube;/g, "⊆").replace(/&supe;/g, "⊇").replace(/&oplus;/g, "⊕").replace(/&otimes;/g, "⊗").replace(/&perp;/g, "⊥").replace(/&sdot;/g, "⋅").replace(/&lcell;/g, "⌈").replace(/&rcell;/g, "⌉").replace(/&lfloor;/g, "⌊").replace(/&rfloor;/g, "⌋").replace(/&lang;/g, "⟨").replace(/&rang;/g, "⟩").replace(/&loz;/g, "◊").replace(/&#039;/g, "'").replace(/&amp;/g, "&").replace(/&quot;/g, "\"");
}

ใช้อย่างนั้น:

let decodedText = removeEncoding("Ich heiße David");
console.log(decodedText);

พิมพ์: Ich Heiße David

ป.ล. นี้ใช้เวลาทำชั่วโมงครึ่ง

ในการ unescape HTML entity * ใน JavaScript คุณสามารถใช้ไลบรารี่ขนาดเล็กhtml-escaper :npm install html-escaper

import {unescape} from 'html-escaper';

unescape('escaped string');

หรือunescapeฟังก์ชั่นจากLodashหรือUnderscoreหากคุณใช้งาน

*) โปรดทราบว่าฟังก์ชั่นเหล่านี้จะไม่ครอบคลุมหน่วยงาน HTML ทั้งหมด แต่เฉพาะคนที่พบมากที่สุดคือ&, <, >, ,' "หากต้องการยกเลิกการซ่อนเอนทิตี HTML ทั้งหมดคุณสามารถใช้ไลบรารีของเขา

ฉันใช้สิ่งนี้ในโครงการของฉัน: ได้แรงบันดาลใจจากคำตอบอื่น ๆแต่ด้วยพารามิเตอร์ที่ปลอดภัยเป็นพิเศษจะมีประโยชน์เมื่อคุณจัดการกับตัวละครที่ได้รับการตกแต่ง

var decodeEntities=(function(){

    var el=document.createElement('div');
    return function(str, safeEscape){

        if(str && typeof str === 'string'){

            str=str.replace(/\</g, '&lt;');

            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, '&lt;');
        }
        return str;
    }
})();

และมันใช้งานได้เช่น:

var label='safe <b> character &eacute;ntity</b>';
var safehtml='<div title="'+decodeEntities(label)+'">'+decodeEntities(label, true)+'</div>';

คำตอบอื่น ๆ ทั้งหมดที่นี่มีปัญหา

document.createElement ('div') วิธีการ (รวมถึงการใช้ jQuery) ดำเนินการจาวาสคริปต์ใด ๆ ที่ส่งผ่านมัน (ปัญหาด้านความปลอดภัย) และ DOMParser.parseFromString () วิธีการตัดขอบช่องว่าง นี่เป็นวิธีแก้ปัญหาจาวาสคริปต์ที่ไม่มีปัญหา:

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('&lt;&amp;&nbsp;&gt;'); // 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.

var encodedStr = 'hello & world';

var parser = new DOMParser;
var dom = parser.parseFromString(
    '<!doctype html><body>' + encodedStr,
    'text/html');
var decodedString = dom.body.textContent;

console.log(decodedString);

มีตัวแปรที่ 80% ที่มีประสิทธิผลเป็นคำตอบที่ด้านบนมาก

ดูมาตรฐาน: https://jsperf.com/decode-html12345678/1

console.log(decodeEntities('test: &gt'));

function decodeEntities(str) {
  // this prevents any overhead from creating the object each time
  const el = decodeEntities.element || document.createElement('textarea')

  // strip script/html tags
  el.innerHTML = str
    .replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '')
    .replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');

  return el.value;
}

หากคุณต้องการออกจากแท็กให้ลบการ.replace(...)โทรสองสายออก (คุณสามารถออกจากการโทรครั้งแรกหากคุณไม่ต้องการสคริปต์)