Javascript에서 HTML 엔티티를 이스케이프 처리 하시겠습니까?

XML-RPC 백엔드와 통신하는 Javascript 코드가 있습니다. XML-RPC는 다음 형식의 문자열을 반환합니다.

<img src='myimage.jpg'>

그러나 Javascript를 사용하여 문자열을 HTML에 삽입하면 문자 그대로 렌더링됩니다. 이미지가 보이지 않고 문자 그대로 문자열이 표시됩니다.

<img src='myimage.jpg'>

내 생각 엔 HTML-RPC 채널을 통해 HTML이 이스케이프되고 있다고 생각합니다.

Javascript에서 문자열을 이스케이프 해제하려면 어떻게해야합니까? 이 페이지의 기술을 실패했습니다. http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/

문제를 진단하는 다른 방법은 무엇입니까?

편집 : Wladimir가 제안한 대로 DOMParser API를 사용해야 합니다. 게시 된 함수에 보안 취약점이 도입 되었으므로 이전 답변을 편집했습니다.

다음 스 니펫은 약간 수정 된 이전 답변의 코드입니다. textarea 대신 divXSS 취약성을 대신 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에서보기)에서 . 위의 버전은 모든 입력에서 작동합니다.

업데이트 : 이것은 큰 문자열에서 작동하지 않으며 보안 취약점을 유발합니다. 의견을 참조하십시오.

여기에 주어진 대부분의 답변에는 큰 단점이 있습니다. 변환하려는 문자열을 신뢰할 수 없으면 XSS (Cross-Site Scripting) 취약점이 생깁니다 . 허용되는 답변 의 기능에 대해 다음을 고려하십시오.

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

여기의 문자열에는 이스케이프 처리되지 않은 HTML 태그가 포함되어 있으므로 아무것도 디코딩하는 대신 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을 지나고 있으며 2017 년 현재 야생에서 여전히 볼 수있는 유일한 브라우저는 이전 Internet Explorer 및 Safari 버전입니다 (일반적으로 여전히 귀찮게하기에는 충분하지 않습니다).

jQuery를 사용하는 경우 :

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

그렇지 않으면 기능 이 우수한 Strictly Software의 Encoder Object를 사용하십시오 htmlDecode().

비결은 브라우저의 힘을 사용하여 특수 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
    });
}

이스케이프를 제거하려는 HTML이 매우 길지 않고 65536자를 초과하지 않는 한 CMS의 대답은 제대로 작동합니다. 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 : //.com/a/27545633/694469

질문에 대한 직접적인 대답은 아니지만 RPC가 해당 구조 내부의 이미지 데이터 (예 : URL)와 함께 일부 구조 (XML 또는 JSON 등)를 반환하는 것이 더 좋지 않습니까?

그런 다음 자바 스크립트에서 구문 분석하고 <img>Javascript 자체를 사용하여 빌드 할 수 있습니다.

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

추신 : 이것은 1 시간 반 정도 걸렸습니다.

JavaScript에서 HTML 엔티티 *를 이스케이프 해제하려면 작은 라이브러리 html-escaper를 사용할 수 있습니다 .npm install html-escaper

import {unescape} from 'html-escaper';

unescape('escaped string');

또는 Lodash 또는 Underscore 에서 사용하는 경우 unescape기능 하십시오.

*이 기능은 모든 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>';

여기에있는 다른 모든 대답에는 문제가 있습니다.

jQuery를 사용하는 것을 포함하여 document.createElement ( 'div') 메소드는 전달 된 모든 자바 스크립트 (보안 문제)를 실행하고 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는 특별히 실행 코드를 피하기 위해 사용됩니다. 다음을 통과합니다.

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(...)호출 을 제거하십시오 (스크립트가 필요없는 경우 첫 번째 호출을 남길 수 있음).