Giriş alanından özellik okunduğunda HTML kodlaması kayboldu

Gizli bir alandan bir değer çıkarmak ve bir metin kutusunda görüntülemek için JavaScript kullanıyorum. Gizli alandaki değer kodlanır.

Örneğin,

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

içine çekilir

<input type='text' value='chalk &amp; cheese' />

gizli alandan değeri almak için bazı jQuery aracılığıyla (bu noktada ben kodlama kaybetmek):

$('#hiddenId').attr('value')

Sorun şu ki chalk & cheese, gizli alandan okuduğumda JavaScript kodlamayı kaybediyor gibi görünüyor. Değerin olmasını istemiyorum chalk & cheese. Değişmez bilginin amp;korunmasını istiyorum .

Bir dizeyi HTML olarak kodlayacak bir JavaScript kitaplığı veya jQuery yöntemi var mı?

DÜZENLEME: Bu yanıt uzun zaman önce gönderildi ve htmlDecodeişlev bir XSS güvenlik açığı getirdi. Bu bir geçici eleman değişen modifiye edilmiş divbir karşı textareaXSS şansını azaltmak. Ancak bugünlerde, diğer anwswer'de önerildiği gibi DOMParser API'sini kullanmanızı öneririz .

Bu işlevleri kullanıyorum:

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

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

Temel olarak bellekte bir textarea öğesi oluşturulur, ancak asla belgeye eklenmez.

On htmlEncodefonksiyonu belirlediğim innerTextelemanın ve kodlanmış almak innerHTML; ilgili htmlDecodefonksiyon ayarlarım innerHTMLelemanının değeri ve innerTextalınır.

Burada çalışan bir örneği inceleyin .

JQuery hile alıntı işaretlerini kodlamaz ve IE'de boşluk alanınızı keser.

Django'daki kaçış şablon etiketine dayanarak, zaten çok kullanılmış / test edildiğini tahmin ediyorum, gerekli olanı yapan bu işlevi yaptım.

Boşluk sıyırma sorunu için herhangi bir geçici çözümden muhtemelen daha basittir (ve muhtemelen daha hızlıdır) - ve sonucu örneğin bir öznitelik değeri içinde kullanacaksanız gerekli olan alıntı işaretlerini kodlar.

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

// I needed the opposite function today, so adding here too:
function htmlUnescape(str){
    return str
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'")
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&amp;/g, '&');
}

2013-06-17 Güncellemesi:
En hızlı kaçış arayışında bir replaceAllyöntemin bu uygulamasını buldum :
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(buradan da bahsedilir: En hızlı) Dizedeki bir karakterin tüm örneklerini değiştirme yöntemi )
Bazı performans sonuçları burada:
http://jsperf.com/htmlencoderegex/25

replaceYukarıdaki yerleşik zincirlere aynı sonuç dizesini verir . Birisi neden daha hızlı olduğunu açıklayabilirse çok mutlu olurum !?

Güncelleme 2015-03-04:
AngularJS'nin yukarıdaki yöntemi tam olarak kullandığını fark ettim:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435

Birkaç ayrıntılandırma ekliyorlar - alfa sayısal olmayan tüm karakterleri varlıklara dönüştürmenin yanı sıra belirsiz bir Unicode sorunu ele alıyor gibi görünüyorlar. Belgeniz için belirlenmiş bir UTF8 karakter kümeniz olduğu sürece, ikincisinin gerekli olmadığı izlenimindeydim.

(4 yıl sonra) Django'nun hala bunlardan hiçbirini yapmadığını not edeceğim, bu yüzden ne kadar önemli olduklarından emin değilim:
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44

Güncelleme 2016-04-06:
Ayrıca eğik çizgiden kaçmak isteyebilirsiniz /. Doğru HTML kodlaması için bu gerekli değildir, ancak OWASP tarafından bir anti-XSS güvenlik önlemi olarak önerilir . (bunu yorumlarda önerdiği için @JNF'ye teşekkürler)

        .replace(/\//g, '/');

Burada hem jQuery .html()sürümünden hem de sürümden çok daha hızlı olan jQuery olmayan bir .replace()sürüm var. Bu tüm boşlukları korur, ancak jQuery sürümü gibi tırnak işaretleri işlemez.

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

Hız: http://jsperf.com/htmlencoderegex/17

Demo:

Çıktı:

Senaryo:

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

function htmlDecode( html ) {
    var a = document.createElement( 'a' ); a.innerHTML = html;
    return a.textContent;
};

document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );

//sanity check
var html = '<div>   &amp; hello</div>';
document.getElementById( 'same' ).textContent = 
      'html === htmlDecode( htmlEncode( html ) ): ' 
    + ( html === htmlDecode( htmlEncode( html ) ) );

HTML:

<input id="hidden" type="hidden" value="chalk    &amp; cheese" />
<input id="text" value="" />
<div id="same"></div>

Biliyorum bu eski bir, ama ben hatları kaldırmadan IE çalışacak kabul edilen cevap bir varyasyon göndermek istedim :

function multiLineHtmlEncode(value) {
    var lines = value.split(/\r\n|\r|\n/);
    for (var i = 0; i < lines.length; i++) {
        lines[i] = htmlEncode(lines[i]);
    }
    return lines.join('\r\n');
}

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

Alt çizgi bunu yapan yöntemler _.escape()ve sağlar _.unescape().

> _.unescape( "chalk & cheese" );
  "chalk & cheese"

> _.escape( "chalk & cheese" );
  "chalk & cheese"

İyi cevap. Kodlanacak değer undefinedveya nulljQuery 1.4.2 ile aşağıdaki gibi hatalar alabileceğinizi unutmayın:

jQuery("<div/>").text(value).html is not a function

VEYA

Uncaught TypeError: Object has no method 'html'

Çözüm, gerçek bir değeri kontrol etmek için işlevi değiştirmektir:

function htmlEncode(value){ 
    if (value) {
        return jQuery('<div/>').text(value).html(); 
    } else {
        return '';
    }
}

Düz javascript'i tercih edenler için, başarıyla kullandığım yöntem:

function escapeHTML (str)
{
    var div = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}

FWIW, kodlama kaybolmuyor. Kodlama, sayfa yükleme sırasında biçimlendirme ayrıştırıcısı (tarayıcı) tarafından kullanılır. Kaynak okunup ayrıştırıldıktan ve tarayıcı DOM belleğe yüklendikten sonra, kodlama, temsil ettiği şekilde ayrıştırıldı. Yani JS'niz bellekteki herhangi bir şeyi okumak için yürütüldüğünde, aldığı karakter kodlamanın temsil ettiği şeydir.

Burada kesinlikle semantik üzerinde çalışıyor olabilirim, ama kodlamanın amacını anlamanızı istedim. "Kayıp" kelimesi, bir şeyin olması gerektiği gibi çalışmadığını söylüyor.

Jquery olmadan daha hızlı. Dizenizdeki her karakteri kodlayabilirsiniz:

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

Veya endişelenmeniz gereken ana karakterleri hedefleyin (&, inebreaks, <,>, "ve '):

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('Encode HTML entities!\n\n"Safe" escape <script id=\'\'> & useful in <pre> tags!');

testing.innerHTML=test.value;

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55"></textarea>

<div id="testing">www.WHAK.com</div>

Prototip , String sınıfında yerleşik olarak bulunur . Prototip kullanmak / plan kullanıyorsanız, bunun gibi bir şey yapar:

'<div class="article">This is an article</div>'.escapeHTML();
// -> "&lt;div class="article"&gt;This is an article&lt;/div&gt;"

İşte basit bir javascript çözümü. String nesnesini, parametresiz bir nesne üzerinde veya bir parametre ile kullanılabilen "HTMLEncode" yöntemiyle genişletir.

String.prototype.HTMLEncode = function(str) {
  var result = "";
  var str = (arguments.length===1) ? str : this;
  for(var i=0; i<str.length; i++) {
     var chrcode = str.charCodeAt(i);
     result+=(chrcode>128) ? "&#"+chrcode+";" : str.substr(i,1)
   }
   return result;
}
// TEST
console.log("stetaewteaw æø".HTMLEncode());
console.log("stetaewteaw æø".HTMLEncode("æåøåæå"))

Bir özgeçmiş "javascript için HTMLEncode yöntemi" yaptık .

Dayanarak açısal en sterilize ... (ES6 modülü sözdizimi)

// ref: https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js
const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
const NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;

const decodeElem = document.createElement('pre');


/**
 * Decodes html encoded text, so that the actual string may
 * be used.
 * @param value
 * @returns {string} decoded text
 */
export function decode(value) {
  if (!value) return '';
  decodeElem.innerHTML = value.replace(/</g, '&lt;');
  return decodeElem.textContent;
}


/**
 * Encodes all potentially dangerous characters, so that the
 * resulting string can be safely inserted into attribute or
 * element text.
 * @param value
 * @returns {string} encoded text
 */
export function encode(value) {
  if (value === null || value === undefined) return '';
  return String(value).
    replace(/&/g, '&amp;').
    replace(SURROGATE_PAIR_REGEXP, value => {
      var hi = value.charCodeAt(0);
      var low = value.charCodeAt(1);
      return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
    }).
    replace(NON_ALPHANUMERIC_REGEXP, value => {
      return '&#' + value.charCodeAt(0) + ';';
    }).
    replace(/</g, '&lt;').
    replace(/>/g, '&gt;');
}

export default {encode,decode};

Bildiğim kadarıyla javascript herhangi bir düz ileri HTML Encode / Decode yöntemi yoktur.

Ancak, yapabileceğiniz şey, JS'yi rastgele bir öğe oluşturmak, iç metnini ayarlamak ve daha sonra innerHTML kullanarak okumaktır.

Diyelim ki, jQuery ile bunun çalışması gerekir:

var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();

Ya da bu çizgiler boyunca bir şey.

Değerleri bir giriş alanından diğerine yönlendirmek için kaçmak / kodlamak zorunda olmamalısınız.

<form>
 <input id="button" type="button" value="Click me">
 <input type="hidden" id="hiddenId" name="hiddenId" value="I like cheese">
 <input type="text" id="output" name="output">
</form>
<script>
    $(document).ready(function(e) {
        $('#button').click(function(e) {
            $('#output').val($('#hiddenId').val());
        });
    });
</script>

JS ham HTML veya başka bir şey eklemez; DOM'a valueözelliği (veya özelliği; emin değilim) ayarlamasını söyler . Her iki durumda da, DOM kodlama sorunlarını sizin için halleder. Kullanmak gibi garip bir şey yapmadıkça document.writeveyaeval , HTML kodlaması etkili bir şekilde şeffaf olacaktır.

Sonucu tutmak için yeni bir metin kutusu oluşturmaktan bahsediyorsanız ... bu hala kolay. HTML'nin statik kısmını jQuery'ye aktarın ve sonra size döndürdüğü nesnenin geri kalan özelliklerini / niteliklerini ayarlayın.

$box = $('<input type="text" name="whatever">').val($('#hiddenId').val());

Benzer bir sorun yaşadım ve encodeURIComponentJavaScript işlevini kullanarak çözdüm ( belgeler )

Örneğin, şu durumda kullanırsanız:

<input id='hiddenId' type='hidden' value='chalk & cheese' />

ve

encodeURIComponent($('#hiddenId').attr('value'))

Alacaksın chalk%20%26%20cheese . Alanlar bile korunur.

Benim durumumda, bir ters eğik çizgi kodlamak zorunda kaldı ve bu kod mükemmel çalışıyor

encodeURIComponent('name/surname')

ve aldım name%2Fsurname

İşte Server.HTMLEncodesaf JavaScript ile yazılmış Microsoft'un ASP işlevini taklit biraz :

function htmlEncode(s) {
  var ntable = {
    "&": "amp",
    "<": "lt",
    ">": "gt",
    "\"": "quot"
  };
  s = s.replace(/[&<>"]/g, function(ch) {
    return "&" + ntable[ch] + ";";
  })
  s = s.replace(/[^ -\x7e]/g, function(ch) {
    return "&#" + ch.charCodeAt(0).toString() + ";";
  });
  return s;
}

Sonuç , kesme işaretlerini kodlamaz, ancak diğer HTML özelliklerini ve 0x20-0x7e aralığının dışındaki herhangi bir karakteri kodlar.

Saf JS fonksiyonum:

/**
 * HTML entities encode
 *
 * @param {string} str Input text
 * @return {string} Filtered text
 */
function htmlencode (str){

  var div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

JavaScript HTML Varlıkları Kodlama ve Kod Çözme

JQuery kullanmak istiyorsanız. Bunu buldum:

http://www.jquerysdk.com/api/jQuery.htmlspecialchars

(jQuery SDK tarafından sunulan jquery.string eklentisinin bir parçası)

Prototip ile ilgili sorun inanıyorum JavaScript temel nesneleri genişletir ve kullanmış olabilir herhangi bir jQuery ile uyumsuz olacaktır. Tabii ki, zaten jQuery değil, Prototip kullanıyorsanız, bu bir sorun olmayacaktır.

EDIT: jQuery için Prototip'in dize yardımcı programlarının bir bağlantı noktası olan bu da var:

http://stilldesigning.com/dotstring/

var htmlEnDeCode = (function() {
    var charToEntityRegex,
        entityToCharRegex,
        charToEntity,
        entityToChar;

    function resetCharacterEntities() {
        charToEntity = {};
        entityToChar = {};
        // add the default set
        addCharacterEntities({
            '&'     :   '&',
            '>'      :   '>',
            '&lt;'      :   '<',
            '&quot;'    :   '"',
            '&#39;'     :   "'"
        });
    }

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

Bu ExtJS kaynak kodundan.

<script>
String.prototype.htmlEncode = function () {
    return String(this)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');

}

var aString = '<script>alert("I hack your site")</script>';
console.log(aString.htmlEncode());
</script>

Çıktı olacak: <script>alert("I hack your site")</script>

.htmlEncode () öğesine bir kez tanımlandıktan sonra tüm dizelerden erişilebilir.

Html: Verilen değeri kodlar

  var htmlEncodeContainer = $('<div />');
  function htmlEncode(value) {
    if (value) {
      return htmlEncodeContainer.text(value).html();
    } else {
      return '';
    }
  }

Etki Alanı \ Kullanıcı dizemdeki ters eğik çizgi ile ilgili bazı sorunlarla karşılaştım.

Bunu Anentropic'in cevabındaki diğer kaçışlara ekledim

.replace(/\\/g, '\')

Burada bulduğum: JavaScript'te ters eğik çizgiden nasıl kaçabilirim?

escapeHTML()Prototype.js dosyasında ne yaptığınızı seçme

Bu komut dosyasını eklemekHTML'den kaçmanıza yardımcı olur:

String.prototype.escapeHTML = function() { 
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
}

Artık betiğinizdeki dizelerde escapeHTML yöntemini çağırabilirsiniz, örneğin:

var escapedString = "<h1>this is HTML</h1>".escapeHTML();
// gives: "&lt;h1&gt;this is HTML&lt;/h1&gt;"

Umarım prototype.js dosyasının tamamını eklemek zorunda kalmadan basit bir çözüm arayan herkese yardımcı olur

Buradaki diğer cevaplardan bazılarını kullanarak, farklı kodlanmış karakterlerin sayısına bakılmaksızın (sadece bir çağrı replace()) tüm ilgili karakterleri tek bir geçişte değiştiren bir sürüm yaptım, böylece daha büyük dizeler için daha hızlı olacaktır.

DOM API'nin varlığına veya diğer kütüphanelere dayanmaz.

window.encodeHTML = (function() {
    function escapeRegex(s) {
        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    }
    var encodings = {
        '&'  : '&',
        '"'  : '"',
        '\'' : ''',
        '<'  : '&lt;',
        '>'  : '&gt;',
        '\\' : '&#x2F;'
    };
    function encode(what) { return encodings[what]; };
    var specialChars = new RegExp('[' +
        escapeRegex(Object.keys(encodings).join('')) +
    ']', 'g');

    return function(text) { return text.replace(specialChars, encode); };
})();

Bunu bir kez çalıştırdıktan sonra, artık

encodeHTML('<>&"\'')

Almak <>&"'