jQuery를 사용하여 HTML 엔티티를 디코딩하는 방법

jQuery를 사용하여 HTML 엔티티를 디코딩하는 방법

jQuery를 사용하여 문자열의 HTML 엔티티를 디코딩하려면 어떻게 해야 합니까?

보안 주의: 이 답변(아래 원본 형식으로 유지됨)을 사용하면 응용 프로그램에 XSS 취약성이 발생할 수 있습니다.이 답변은 사용하면 안 됩니다.이 답변의 취약성에 대한 설명은 lucascaro의 답변을 읽고 대신 해당 답변 또는 Mark Amery의 답변 중 하나를 사용하십시오.

사실, 한번 해봐

var encodedStr = "This is fun & stuff";
var decoded = $("<div/>").html(encodedStr).text();
console.log(decoded);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div/>

jQuery 없음:

function decodeEntities(encodedString) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = encodedString;
  return textArea.value;
}

console.log(decodeEntities('1 & 2')); // '1 & 2'

이 방법은 승인된 답변과 동일하게 작동하지만 신뢰할 수 없는 사용자 입력과 함께 사용해도 안전합니다.

---

유사한 접근 방식의 보안 문제

Mike Samuel이 지적한 바와 같이 이 작업은<div><textarea>의 취약성이. 취약성은 XSS가 .<div> DOM 에 되지 않습니다.

function decodeEntities(encodedString) {
  var div = document.createElement('div');
  div.innerHTML = encodedString;
  return div.textContent;
}

// Shows an alert
decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">')

이 은 A, R&A, R&A, R&에 대해서는 할 수 .<textarea>의 콘텐츠를 허용하는 HTML 요소가 없기 때문에 'encoded' 문자열에 존재하는 HTML 태그는 브라우저에 의해 자동으로 엔티티로 인코딩됩니다.

function decodeEntities(encodedString) {
    var textArea = document.createElement('textarea');
    textArea.innerHTML = encodedString;
    return textArea.value;
}

// Safe, and returns the correct answer
console.log(decodeEntities('<img src="nonexistent_image" onerror="alert(1337)">'))

경고: 및 를 사용하는 대신 jQuery 및 메서드를 사용하여 이 작업을 수행합니다..value또한 를 사용하는 경우에도 jQuery 일부 버전에서는 안전하지 않습니다*.이는 이전 버전의 jQuery가 전달된 문자열에 포함된 스크립트를 의도적으로 명시적으로 평가했기 때문입니다..html()따라서 다음과 같은 코드는 jQuery 1.8의 경보를 나타냅니다.

//<!-- CDATA
// Shows alert
$("<textarea>")
.html("<script>alert(1337);</script>")
.text();

//-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

_{* 이 취약성을 포착한 Eur Penkman에게 감사드립니다.}

Mike Samuel이 말했듯이, 안전하지 않으므로 html()을 사용하여 html 엔티티를 디코딩하지 마십시오.

대신 Heascle.js와 같은 템플릿 렌더러를 사용하거나 @Vyv에서 엔티티를 디코딩합니다.IT 댓글입니다.

Underscore.js 유틸리티 벨트라이브러리에는escape ★★★★★★★★★★★★★★★★★」unescape메서드는 사용자 입력에 안전하지 않습니다.

_.cring(문자열)

_.unescape(문자열)

텍스트와 HTML 방식을 혼동하고 계신 것 같습니다.이 예에서는 요소의 내부 HTML을 텍스트로 사용하면 디코딩된 HTML 태그(두 번째 버튼)가 나타납니다.그러나 HTML로 사용하면 HTML 형식의 보기(첫 번째 버튼)가 나타납니다.

<div id="myDiv">
    here is a <b>HTML</b> content.
</div>
<br />
<input value="Write as HTML" type="button" onclick="javascript:$('#resultDiv').html($('#myDiv').html());" />
&nbsp;&nbsp;
<input value="Write as Text" type="button" onclick="javascript:$('#resultDiv').text($('#myDiv').html());" />
<br /><br />
<div id="resultDiv">
    Results here !
</div>

첫 번째 버튼 쓰기 : HTML 콘텐츠입니다.

두 번째 버튼 쓰기: 다음은 <B>입니다.HTML </B> 콘텐츠.

덧붙여서, jQuery plugin - HTML 디코딩 및 HTML 스트링을 인코딩하는 인코딩에서 찾은 플러그인을 볼 수 있습니다.

이 질문은 'with jQuery'에 의해 제한되지만, 여기서 가장 적합한 답변에 제시된 jQuery 코드가 아래에 다음과 같은 작업을 수행한다는 것을 아는 것이 도움이 될 수 있습니다.jQuery의 유무에 관계없이 동작합니다.

function decodeEntities(input) {
  var y = document.createElement('textarea');
  y.innerHTML = input;
  return y.value;
}

https://github.com/mathiasbynens/he 에서 구할 수 있는 라이브러리를 사용할 수 있습니다.

예:

console.log(he.decode("Jörg &amp Jürgen rocked to & fro "));
// Logs "Jörg & Jürgen rocked to & fro"

나는 도서관 저자에게 이 도서관을 클라이언트 측 코드로 사용하는 이유가 있는지 여부에 대한 질문에 대해 이의를 제기했습니다.<textarea>해킹은 여기나 다른 곳에서 제공되는 다른 답변에서 제공됩니다.그는 몇 가지 가능한 이유를 제시했습니다.

• node.js serverside 를 사용하고 있는 경우는, HTML 인코딩/디코딩에 라이브러리를 사용하면, 클라이언트측과 서버측의 양쪽 모두에서 동작하는 단일의 솔루션을 얻을 수 있습니다.

• 일부 브라우저의 엔티티 디코딩 알고리즘에 오류가 있거나 명명된 문자 참조 지원이 없습니다.예를 들어 Internet Explorer는 인터럽트 없는 공간을 디코딩하고 렌더링합니다( 의 DOM을 되지 않는 일반 innerText,, " " "<textarea>해킹하다또한 IE 8과 9는 HTML 5에 추가된 새로운 이름 있는 문자 참조를 지원하지 않습니다.또한 저자는 http://mathias.html5.org/tests/html/named-character-references/에서 이름 있는 문자 참조 지원 테스트를 진행합니다.IE 8에서는 1,000개 이상의 오류가 보고됩니다.

  참조의 할 수 , 이 경우에서 수 <textarea>해킹, 그와 같은 도서관이 필요할 거야

• 그는 이런 식으로 일을 하는 것이 덜 해박한 것처럼 잘 느낀다.

부호화:

$("<textarea/>").html('<a>').html(); // return '&lt;a&gt'

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea/>

디코딩:

$("<textarea/>").html('&lt;a&gt').val() // return '<a>'

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea/>

사용하다

myString = myString.replace( /\&/g, '&' );

JavaScript에는 엔티티를 처리하기 위한 네이티브 라이브러리가 없고 JavaScript를 확장하는 다양한 프레임워크의 검색 결과 상단 부근에 있는 라이브러리가 없기 때문에 서버 측에서 실행하는 것이 가장 쉽습니다.

"JavaScript HTML 엔티티"를 검색하면 그 목적을 위해 몇 개의 라이브러리를 찾을 수 있지만, 이러한 라이브러리는 모두 위의 논리를 기반으로 구축될 것입니다.

다음을 시도해 보십시오.

var htmlEntities = "<script>alert('hello');</script>";
var htmlDecode =$.parseHTML(htmlEntities)[0]['wholeText'];
console.log(htmlDecode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

parseHTML은 Jquery 라이브러리의 함수이며 지정된 String에 대한 자세한 내용을 포함하는 배열을 반환합니다.

경우에 따라 String이 크기 때문에 함수는 콘텐츠를 여러 인덱스로 분리합니다.

모든 인덱스 데이터를 가져오려면 인덱스로 이동한 다음 "wholeText"라는 인덱스에 액세스해야 합니다.

인덱스 0을 선택한 이유는 모든 경우(작은 문자열 또는 큰 문자열)에서 사용할 수 있기 때문입니다.

HTML 버튼의 값으로 HTML 엔티티 문자())가 필요했습니다.HTML 코드는 브라우저의 시작부터 양호하게 표시됩니다.

<input type="button" value="Embed & Share  &dArr;" id="share_button" />

이제 문자를 표시하는 토글을 추가했습니다.이것이 나의 해결책이다.

$("#share_button").toggle(
    function(){
        $("#share").slideDown();
        $(this).attr("value", "Embed & Share " + $("<div>").html("&uArr;").text());
    }

버튼에 「」가 다시 표시됩니다.이게 도움이 됐으면 좋겠어요.

html 엔티티에 대한 커스텀 함수를 만들어야 합니다.

function htmlEntities(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;').replace(/"/g, '&quot;');
}

아래에 String이 있다고 가정합니다.

저희 디럭스 객실은 따뜻하고 아늑하며 편안합니다.

var str = $("p").text(); // get the text from <p> tag
$('p').html(str).text();  // Now,decode html entities in your variable i.e 

스트링하여 다시 할당하다

태그를 붙입니다.

바로 그겁니다.

ExtJS 사용자의 경우 이미 인코딩된 문자열이 있는 경우(라이브러리 함수의 반환값이 inner인 경우 등)HTML 콘텐츠, 다음 ExtJS 함수를 고려하십시오.

Ext.util.Format.htmlDecode(innerHtmlContent)

String 클래스 확장:

String::decode = ->
  $('<textarea />').html(this).text()

방법으로서 사용합니다.

"<img src='myimage.jpg'>".decode()

이 문제를 해결하기 위해 jQuery는 약간의 오버헤드와 종속성이 발생하므로 필요하지 않습니다.

여기에 좋은 답변이 많이 있다는 것을 알지만, 저는 조금 다른 접근방식을 구현했기 때문에 공유하려고 합니다.

이 코드는 완전히 안전한 보안 접근법입니다.탈옥 핸들러는 함수가 아닌 브라우저에 의존하기 때문입니다.따라서 향후 취약성이 발견될 경우 이 솔루션에 대해 설명합니다.

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 (in case the text is big)
    el.textContent = '';

    return dec;
}

// Example
console.log(decodeHTMLEntities("<script>alert('&awconint;&CounterClockwiseContourIntegral;&#x02233;&#8755;⪪#x02233⪫');</script>"));
// Prints: <script>alert('∳∳∳∳⪪#x02233⪫');</script>

그나저나, 나는 그 캐릭터를 사용하기로 결정했다.⪪ ★★★★★★★★★★★★★★★★★」⪫이는 거의 사용되지 않기 때문에 일치시킴으로써 퍼포먼스에 영향을 줄 가능성이 크게 낮아집니다.

여기에도 한 가지 문제가 있습니다.입력 값에 할당하면 이스케이프된 문자열을 읽을 수 없습니다.

var string = _.escape("<img src=fake onerror=alert('boo!')>");
$('input').val(string);

예: https://jsfiddle.net/kjpdwmqa/3/

또는 라이브러리도 있습니다.

여기, https://cdnjs.com/libraries/he

npm install he                 //using node.js

<script src="js/he.js"></script>  //or from your javascript directory

용도는 다음과 같습니다.

//to encode text 
he.encode('© Ande & Nonso® Company LImited 2018');  

//to decode the 
he.decode('© Ande & Nonso® Company Limited 2018');

건배.

jQuery로 HTML 엔티티를 디코딩하려면 다음 함수를 사용하십시오.

function html_entity_decode(txt){
    var randomID = Math.floor((Math.random()*100000)+1);
    $('body').append('<div id="random'+randomID+'"></div>');
    $('#random'+randomID).html(txt);
    var entity_decoded = $('#random'+randomID).html();
    $('#random'+randomID).remove();
    return entity_decoded;
}

사용방법:

Javascript:

var txtEncoded = "á é í ó ú";
$('#some-id').val(html_entity_decode(txtEncoded));

HTML:

<input id="some-id" type="text" />

가장 쉬운 방법은 클래스 셀렉터를 요소로 설정하고 다음 코드를 사용하는 것입니다.

$(function(){
    $('.classSelector').each(function(a, b){
        $(b).html($(b).text());
    });
});

더 이상 필요없어!

이 문제가 있어서 이 명확한 해결책을 찾았는데 잘 작동합니다.

나는 그것이 선택한 해결책과는 정반대라고 생각한다.

var decoded = $("<div/>").text(encodedStr).html();

언급URL : https://stackoverflow.com/questions/1147359/how-to-decode-html-entities-using-jquery