Kodowanie HTML utracone, gdy atrybut odczytany z pola wejściowego

Używam JavaScript, aby wyciągnąć wartość z ukrytego pola i wyświetlić ją w polu tekstowym. Wartość w ukrytym polu jest zakodowana.

Na przykład,

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

zostaje wciągnięty

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

za pomocą jQuery, aby uzyskać wartość z ukrytego pola (w tym momencie tracę kodowanie):

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

Problem polega na tym, że kiedy czytam chalk & cheesez ukrytego pola, JavaScript traci kodowanie. Nie chcę, żeby ta wartość była chalk & cheese. Chcę amp;zachować dosłowność .

Czy istnieje biblioteka JavaScript lub metoda jQuery, która koduje HTML w ciągu?

EDYCJA: Ta odpowiedź została opublikowana dawno temu, a htmlDecodefunkcja wprowadziła lukę w zabezpieczeniach XSS. Został zmodyfikowany, zmieniając element tymczasowy z a divna textareazmniejszający szansę XSS. Ale obecnie zachęcam do korzystania z interfejsu API DOMParser, jak sugerowano w innym odpowiedzi .

Korzystam z tych funkcji:

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

Zasadniczo element textarea jest tworzony w pamięci, ale nigdy nie jest dołączany do dokumentu.

W htmlEncodefunkcji ustawiam innerTextelement i odzyskuję zakodowany innerHTML; w htmlDecodefunkcji ustawiam innerHTMLwartość elementu i innerTextjest on pobierany.

Sprawdź działający przykład tutaj .

Sztuczka jQuery nie koduje znaków cudzysłowu, a w IE usuwa białe znaki.

W oparciu o szablon ucieczki w Django, który, jak sądzę, jest już mocno używany / przetestowany, stworzyłem tę funkcję, która robi to, co jest potrzebne.

Jest to prawdopodobnie prostsze (i być może szybsze) niż jakiekolwiek obejście problemu usuwania spacji - i koduje znaki cudzysłowu, co jest niezbędne, jeśli na przykład chcesz użyć wyniku wewnątrz wartości atrybutu.

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, '&');
}

Aktualizacja 17.06.2013:
W poszukiwaniu najszybszego ucieczki znalazłem tę implementację replaceAllmetody:
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(również tutaj: Najszybszy metoda zamiany wszystkich wystąpień znaku w ciągu )
Niektóre wyniki wydajności tutaj:
http://jsperf.com/htmlencoderegex/25

Daje identyczny ciąg wyników do wbudowanych replacełańcuchów powyżej. Byłbym bardzo szczęśliwy, gdyby ktoś mógł wyjaśnić, dlaczego jest to szybsze !?

Aktualizacja 2015-03-04:
Właśnie zauważyłem, że AngularJS używa dokładnie powyższej metody:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435

Dodają kilka udoskonaleń - wydają się radzić sobie z niejasnym problemem związanym z Unicode, a także konwertować wszystkie znaki niealfanumeryczne na jednostki. Miałem wrażenie, że ten ostatni nie był konieczny, dopóki masz zestaw znaków UTF8 określony dla twojego dokumentu.

Zauważę, że (4 lata później) Django nadal nie robi żadnej z tych rzeczy, więc nie jestem pewien, jak ważne są:
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44

Aktualizacja 2016-04-06:
Możesz także chcieć uciec przed ukośnikiem /. Nie jest to wymagane do poprawnego kodowania HTML, jednak jest zalecane przez OWASP jako środek bezpieczeństwa anty-XSS. (dzięki @JNF za sugestie w komentarzach)

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

Oto wersja nie-jQuery, która jest znacznie szybsza niż zarówno .html()wersja jQuery, jak i .replace()wersja. Pozwala to zachować wszystkie białe znaki, ale podobnie jak wersja jQuery, nie obsługuje cudzysłowów.

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

Prędkość: http://jsperf.com/htmlencoderegex/17

Próbny:

Wynik:

Scenariusz:

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>

Wiem, że to stary, ale chciałem opublikować odmianę zaakceptowanej odpowiedzi , która zadziała w IE bez usuwania wierszy:

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

Podkreślać zapewnia _.escape()i _.unescape()metody, które to robią.

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

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

Dobra odpowiedź. Zauważ, że jeśli wartość do zakodowania to undefinedlub nullz jQuery 1.4.2, możesz otrzymać błędy takie jak:

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

LUB

Uncaught TypeError: Object has no method 'html'

Rozwiązaniem jest zmodyfikowanie funkcji w celu sprawdzenia rzeczywistej wartości:

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

Dla tych, którzy wolą zwykły javascript, oto metoda, którą z powodzeniem zastosowałem:

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

FWIW, kodowanie nie jest tracone. Kodowanie jest używane przez analizator składni (przeglądarkę) podczas ładowania strony. Gdy źródło zostanie odczytane i przeanalizowane, a przeglądarka DOM załaduje się do pamięci, kodowanie zostanie przetworzone na to, co reprezentuje. Tak więc do czasu wykonania JS w celu odczytania czegokolwiek w pamięci, znak, jaki otrzymuje, jest reprezentowany przez kodowanie.

Być może działam tutaj wyłącznie w zakresie semantyki, ale chciałem, abyście zrozumieli cel kodowania. Słowo „zagubiony” sprawia, że ​​wydaje się, że coś nie działa tak, jak powinno.

Szybciej bez Jquery. Możesz zakodować każdy znak w ciągu:

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

Lub po prostu celuj w głównych bohaterów, aby się martwić (&, inebreaks, <,>, "i '), takich jak:

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>

Prototyp ma wbudowaną klasę String . Więc jeśli używasz / plan korzystania z Prototype, robi to coś takiego:

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

Oto proste rozwiązanie javascript. Rozszerza obiekt String o metodę „HTMLEncode”, której można użyć na obiekcie bez parametru lub z parametrem.

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("æåøåæå"))

Zrobiłem istotę „Metoda HTMLEncode dla javascript” .

Na podstawie dezynfekcji angulara ... (składnia modułu es6)

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

O ile wiem, w javascript nie ma prostej metody kodowania / dekodowania HTML.

Możesz jednak użyć JS do utworzenia dowolnego elementu, ustawienia jego wewnętrznego tekstu, a następnie przeczytania go za pomocą innerHTML.

Powiedzmy, że z jQuery powinno to działać:

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

Lub coś podobnego.

Nie powinieneś uciekać / kodować wartości, aby przenieść je z jednego pola wejściowego do drugiego.

<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 nie wstawia surowego HTMLa ani nic takiego; po prostu informuje DOM o ustawieniu valuewłaściwości (lub atrybutu; nie jestem pewien). Tak czy inaczej, DOM obsługuje wszelkie problemy z kodowaniem. O ile nie robisz czegoś dziwnego, np. Używając document.writelub eval, kodowanie HTML będzie skutecznie przezroczyste.

Jeśli mówisz o wygenerowaniu nowego pola tekstowego, które będzie zawierało wynik ... to nadal jest tak proste. Po prostu przekaż statyczną część kodu HTML do jQuery, a następnie ustaw resztę właściwości / atrybutów obiektu, który on zwraca.

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

Miałem podobny problem i rozwiązałem go za pomocą funkcji encodeURIComponentz JavaScript ( dokumentacja )

Na przykład w twoim przypadku, jeśli używasz:

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

i

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

dostaniesz chalk%20%26%20cheese. Nawet miejsca są zachowane.

W moim przypadku musiałem zakodować jeden ukośnik odwrotny i ten kod działa idealnie

encodeURIComponent('name/surname')

i mam name%2Fsurname

Oto trochę, która emuluje Server.HTMLEncodefunkcję z ASP Microsoftu, napisaną w czystym JavaScript:

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

Wynik nie koduje apostrofów, ale koduje inne specjalności HTML i wszelkie znaki spoza zakresu 0x20-0x7e.

Moja funkcja pure-JS:

/**
 * 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 Encje Koduj i dekoduj

Jeśli chcesz użyć jQuery. Znalazłem to:

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

(część wtyczki jquery.string oferowana przez jQuery SDK)

Moim zdaniem problem z Prototypem polega na tym, że rozszerza on podstawowe obiekty w JavaScript i będzie niekompatybilny z jakimkolwiek jQuery, którego mogłeś użyć. Oczywiście, jeśli używasz już Prototypu, a nie jQuery, nie będzie problemu.

EDYCJA: Jest też to, co jest portem narzędzi ciągowych Prototype dla jQuery:

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

Pochodzi z kodu źródłowego ExtJS.

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

Wyjdzie: <script>alert("I hack your site")</script>

.htmlEncode () będzie dostępny we wszystkich ciągach po zdefiniowaniu.

HtmlEncodes podaną wartość

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

Wystąpiły problemy z odwrotnym ukośnikiem w moim ciągu Domain \ User.

Dodałem to do innych ucieczek od odpowiedzi Anentropic

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

Które znalazłem tutaj: Jak uciec ukośnik w JavaScript?

Wybieranie czynności escapeHTML()wykonywanych w pliku prototype.js

Dodanie tego skryptu pomaga uciec HTML:

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

teraz możesz wywołać metodę escapeHTML dla ciągów w skrypcie, takich jak:

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

Mam nadzieję, że pomoże każdemu, kto szuka prostego rozwiązania, bez konieczności dołączania całego pliku prototype.js

Korzystając z niektórych innych odpowiedzi tutaj, stworzyłem wersję, która zastępuje wszystkie istotne znaki w jednym przejściu, niezależnie od liczby różnych zakodowanych znaków (tylko jedno wywołanie replace() ), więc będzie szybsze dla większych ciągów.

Nie polega na istnieniu interfejsu API DOM ani na innych bibliotekach.

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

Po uruchomieniu tego raz możesz teraz zadzwonić

encodeHTML('<>&"\'')

Aby dostać <>&"'