HTML varlıklarını jQuery kullanarak nasıl çözebilirim?

Bir dizede HTML varlıklarının kodunu çözmek için jQuery nasıl kullanılır?

Güvenlik notu: Bu cevabı kullanmak (aşağıdaki orijinal formunda korunur) uygulamanıza bir XSS güvenlik açığı getirebilir. Bu cevabı kullanmamalısınız. Bu cevaptaki güvenlik açıklarının açıklaması için lucascaro'nun cevabını okuyun ve bunun yerine ya bu cevabın ya da Mark Amery'nin cevabının yaklaşımını kullanın.

Aslında, dene

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

Herhangi bir jQuery olmadan:

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

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

Bu, kabul edilen cevaba benzer şekilde çalışır , ancak güvenilir olmayan kullanıcı girişiyle kullanmak güvenlidir.

Benzer yaklaşımlardaki güvenlik sorunları

Mike Samuel'in belirttiği gibi , bunu güvenilmeyen bir kullanıcı girişi <div>yerine <textarea>bununla <div>yapmak, DOM'a hiç eklenmemiş olsa bile bir XSS güvenlik açığıdır :

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)">')

Ancak, bu saldırıya karşı mümkün değildir <textarea>çünkü a içeriğine izin verilen HTML öğeleri yoktur <textarea>. Sonuç olarak, 'kodlanmış' dizede bulunan tüm HTML etiketleri tarayıcı tarafından otomatik olarak varlık tarafından kodlanır.

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)">'))

Uyarı : Bunu yapmak yerine jQuery .html()ve .val()yöntemlerini kullanarak yapmak .innerHTMLve .valueaynı zamanda jQuery'nin bazı sürümleri için biletextarea güvenli değildir * . Bunun nedeni, jQuery'nin eski sürümlerinin, geçirilen dizede bulunan komut dosyalarını kasıtlı ve açık bir şekilde değerlendirmesidir.html() . Bu nedenle bu kod jQuery 1.8 bir uyarı gösterir:

//<!-- 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>

_{* Bu zafiyeti yakaladığı için Eru Penkman'a teşekkürler .}

Mike Samuel'in dediği gibi, html varlıklarını güvensiz olduğu için kod çözmek için jQuery.html (). Text () kullanmayın.

Bunun yerine, gibi bir şablon oluşturucusunu kullanmak Mustache.js veya decodeEntities VyvIT yorumuna @ dan.

Underscore.js yardımcı kemer kitaplığı ile birlikte gelir escapeve unescapeyöntemler, ancak kullanıcı girişi için güvenli değildir:

_.escape (dize)

_.unescape (dize)

Metin ve HTML yöntemlerini karıştırdığınızı düşünüyorum. Bu örneğe bakın, bir öğenin iç HTML'sini metin olarak kullanırsanız, kodu çözülmüş HTML etiketleri alırsınız (ikinci düğme). Ancak bunları HTML olarak kullanırsanız, HTML biçimli görünümü alırsınız (ilk düğme).

<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>

İlk düğme yazıyor: İşte bir HTML içeriği.

İkinci düğme şöyle yazar: İşte bir <B> HTML </B> içeriği.

Bu arada, jQuery eklentisinde bulduğum bir eklentiyi görebilirsiniz - HTML kodunu ve HTML dizelerini kodlayan ve kodunu çözen kodlama .

Soru 'jQuery ile' sınırlıdır, ancak bazılarının burada en iyi cevapta verilen jQuery kodunun altında aşağıdakileri yaptığını bilmesine yardımcı olabilir ... bu jQuery ile veya jQuery olmadan çalışır:

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

Https://github.com/mathiasbynens/he adresinde bulunan he kütüphanesini kullanabilirsiniz.

Misal:

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

Ben kütüphanenin yazar meydan lehine clientside kodunda bu kütüphaneyi kullanmak için herhangi bir neden yoktu olmadığının sorulması üzerine <textarea>sağlanan hack diğer yanıtlar burada ve başka yerlerde. Birkaç olası gerekçe sağladı:

• Node.js sunucu tarafı kullanıyorsanız, HTML kodlama / kod çözme için bir kitaplık kullanmak, hem istemci tarafında hem de sunucu tarafında çalışan tek bir çözüm sunar.

• Bazı tarayıcıların varlık kod çözme algoritmalarında hatalar vardır veya bazı adlandırılmış karakter referansları için destek eksiktir . Örneğin, Internet Explorer kırılmayan boşlukların hem kodunu çözer hem de oluşturur (  ) ancak bir DOM öğesinin innerTextözelliği aracılığıyla <textarea>kesmeyi kırmak yerine sıradan boşluklar olarak bildirir (yalnızca küçük bir şekilde de olsa). Ayrıca, IE 8 ve 9 basit desteklemez yazarı HTML 5. eklenen yeni adlandırılmış karakter referansların herhangi kendisinden ayrıca adında karakter referans destek testini barındıran http://mathias.html5.org/tests/html / adlandırılmış karakter referansları . IE 8'de binden fazla hata bildiriyor.

  Varlık kod çözme ile ilgili tarayıcı hatalarından yalıtılmak ve / veya adlandırılmış karakter referanslarının tamamını işleyebilmek istiyorsanız, <textarea>saldırıdan kurtulamazsınız ; onun gibi bir kütüphaneye ihtiyacın olacak .

• Sadece lanet olsun, işleri bu şekilde yapmak daha az hileli gibi geliyor.

kodlamak:

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

kod çözme:

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

kullanım

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

Görünüşe göre JavaScript'in varlıkları işlemek için yerel bir kütüphanesi olmadığı veya JavaScript'i genişleten çeşitli çerçeveler için arama sonuçlarının üst kısmına yakın herhangi bir şey bulamadığım için bunu sunucu tarafında yapmak en kolay yoldur.

"JavaScript HTML varlıkları" için arama yapın ve yalnızca bu amaçla birkaç kitaplık bulabilirsiniz, ancak büyük olasılıkla bunların tümü yukarıdaki mantık etrafında oluşturulacaktır.

Ben sadece bir HTML düğmesi için bir değer olarak bir HTML varlık karakter (⇓) olması gerekiyordu. HTML kodu tarayıcıda baştan iyi görünüyor:

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

Şimdi karakterleri de göstermesi gereken bir geçiş ekliyordum. Bu benim çözümüm

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

Düğmede ⇓ tekrar görüntülenir. Umarım bu birine yardımcı olabilir.

Html varlıkları için özel işlev yapmanız gerekir:

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

Dize'nin altında olduğunu varsayalım.

Deluxe kabinlerimiz sıcak, rahat & amp; rahat

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

str ve a ata

etiket.

bu kadar.

ExtJS kullanıcıları için, kodlanmış bir dizeye zaten sahipseniz, örneğin bir kütüphane işlevinin döndürülen değeri innerHTML içeriği ise, bu ExtJS işlevini göz önünde bulundurun:

Ext.util.Format.htmlDecode(innerHtmlContent)

Bir String sınıfını genişletme:

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

ve yöntem olarak kullanın:

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

Bunu dene :

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 kitaplığındaki bir ve verilen Dize hakkında bazı ayrıntılar içeren bir dizi döndürür.

bazı durumlarda Dize büyük olduğundan işlev içeriği birçok dizine ayıracaktır.

ve tüm indeks verilerini almak için herhangi bir endekse gitmeli ve daha sonra "wholeText" adlı indekse erişmelisiniz.

Tüm durumlarda (küçük Dize veya büyük dize) çalışacağından dizin 0'ı seçtim.

Hala bir sorun var: Giriş değerine atandığında çıkış karakterli dize okunamıyor

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

Örnek: https://jsfiddle.net/kjpdwmqa/3/

Alternatif olarak, bunun için bir kütüphane de var ..

burada, https://cdnjs.com/libraries/he

npm install he                 //using node.js

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

Kullanımı aşağıdaki gibidir ...

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

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

şerefe.

HTML Varlıklarını jQuery ile çözmek için şu işlevi kullanın:

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

Nasıl kullanılır:

JavaScript:

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

HTML:

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

En kolay yol, öğelerinize bir sınıf seçici ayarlamak ve ardından aşağıdaki kodu kullanmaktır:

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

Artık hiçbir şey gerekli!

Bu sorunu yaşadım ve bu net çözümü buldum ve işe yarıyor.

Seçilen çözümün tam tersi olduğunu düşünüyorum.

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