HTML-Codierung verloren, wenn Attribut aus Eingabefeld gelesen wird

Ich verwende JavaScript, um einen Wert aus einem ausgeblendeten Feld herauszuholen und in einem Textfeld anzuzeigen. Der Wert im ausgeblendeten Feld wird codiert.

Zum Beispiel,

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

wird hineingezogen

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

über eine jQuery, um den Wert aus dem versteckten Feld zu erhalten (an diesem Punkt verliere ich die Codierung):

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

Das Problem ist, dass chalk & cheeseJavaScript beim Lesen aus dem versteckten Feld die Codierung zu verlieren scheint. Ich möchte nicht, dass der Wert ist chalk & cheese. Ich möchte, dass das Wort amp;beibehalten wird.

Gibt es eine JavaScript-Bibliothek oder eine jQuery-Methode, die eine Zeichenfolge HTML-codiert?

BEARBEITEN: Diese Antwort wurde vor langer Zeit veröffentlicht und die htmlDecodeFunktion führte eine XSS-Sicherheitsanfälligkeit ein. Es wurde geändert div, textareaindem das temporäre Element von a geändert wurde , um die XSS-Chance zu verringern. Aber heutzutage würde ich Sie ermutigen, die DOMParser-API zu verwenden, wie in anderen Antworten vorgeschlagen .

Ich benutze diese Funktionen:

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

Grundsätzlich wird ein Textbereichselement im Speicher erstellt, das jedoch niemals an das Dokument angehängt wird.

Auf der htmlEncodeFunktion setze ich das innerTextdes Elements und rufe das codierte ab innerHTML; Auf die htmlDecodeFunktion setze ich den innerHTMLWert des Elements und das innerTextwird abgerufen.

Prüfen Sie das laufende Beispiel hier .

Der jQuery-Trick codiert keine Anführungszeichen und entfernt im IE Ihre Leerzeichen.

Basierend auf dem Escape- Templatetag in Django, das meiner Meinung nach bereits stark genutzt / getestet wird, habe ich diese Funktion erstellt, die das tut, was benötigt wird.

Es ist wohl einfacher (und möglicherweise schneller) als alle Problemumgehungen für das Problem mit dem Leerzeichen-Stripping - und es codiert Anführungszeichen, was wichtig ist, wenn Sie das Ergebnis beispielsweise in einem Attributwert verwenden möchten.

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

Update 2013-06-17:
Auf der Suche nach dem schnellsten Fluchtweg habe ich diese Implementierung einer replaceAllMethode gefunden:
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(auch hier referenziert: Am schnellsten Methode zum Ersetzen aller Instanzen eines Zeichens in einer Zeichenfolge )
Einige Leistungsergebnisse hier:
http://jsperf.com/htmlencoderegex/25

Es gibt den oben eingebauten replaceKetten eine identische Ergebniszeichenfolge . Ich würde mich sehr freuen, wenn jemand erklären könnte, warum es schneller geht!?

Update 04.03.2015:
Ich habe gerade festgestellt, dass AngularJS genau die oben beschriebene Methode verwendet:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435

Sie fügen einige Verbesserungen hinzu - sie scheinen ein obskures Unicode-Problem zu behandeln und alle nicht alphanumerischen Zeichen in Entitäten zu konvertieren. Ich hatte den Eindruck, dass Letzteres nicht erforderlich war, solange Sie einen UTF8-Zeichensatz für Ihr Dokument angegeben haben.

Ich werde feststellen, dass (4 Jahre später) Django immer noch keines dieser Dinge tut, daher bin ich mir nicht sicher, wie wichtig sie sind:
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44

Update 06.04.2016:
Möglicherweise möchten Sie auch dem Schrägstrich entkommen /. Dies ist für die korrekte HTML-Codierung nicht erforderlich, wird jedoch von OWASP als Anti-XSS-Sicherheitsmaßnahme empfohlen . (Danke an @JNF für den Vorschlag in den Kommentaren)

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

Hier ist eine Nicht-jQuery-Version, die erheblich schneller ist als jQuery .html() Version und die .replace()Version. Dadurch bleiben alle Leerzeichen erhalten, aber wie in der jQuery-Version werden keine Anführungszeichen verarbeitet.

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

Geschwindigkeit: http://jsperf.com/htmlencoderegex/17

Demo:

Ausgabe:

Skript:

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>

Ich weiß, dass dies eine alte ist, aber ich wollte eine Variation der akzeptierten Antwort veröffentlichen , die im IE funktioniert, ohne Zeilen zu entfernen:

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

Unterstrich bietet _.escape()und _.unescape()Methoden, die dies tun.

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

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

Gute Antwort. Beachten Sie, dass bei einem zu codierenden Wert undefinedoder nullmit jQuery 1.4.2 möglicherweise folgende Fehler auftreten:

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

ODER

Uncaught TypeError: Object has no method 'html'

Die Lösung besteht darin, die Funktion zu ändern, um nach einem tatsächlichen Wert zu suchen:

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

Für diejenigen, die einfaches Javascript bevorzugen, ist hier die Methode, die ich erfolgreich angewendet habe:

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

FWIW, die Codierung geht nicht verloren. Die Codierung wird vom Markup-Parser (Browser) beim Laden der Seite verwendet. Sobald die Quelle gelesen und analysiert wurde und der Browser das DOM in den Speicher geladen hat, wurde die Codierung in das analysiert, was sie darstellt. Wenn Ihr JS ausgeführt wird, um etwas im Speicher zu lesen, entspricht das Zeichen der Codierung.

Ich arbeite hier möglicherweise ausschließlich mit Semantik, aber ich wollte, dass Sie den Zweck der Codierung verstehen. Das Wort "verloren" lässt es so klingen, als ob etwas nicht so funktioniert, wie es sollte.

Schneller ohne Jquery. Sie können jedes Zeichen in Ihrer Zeichenfolge codieren:

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

Oder zielen Sie einfach auf die Hauptfiguren ab, über die Sie sich Sorgen machen möchten (&, Inebreaks, <,>, "und '), wie:

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>

In Prototype ist die String-Klasse integriert . Wenn Sie also Prototype verwenden / planen, dies zu tun, geschieht Folgendes:

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

Hier ist eine einfache Javascript-Lösung. Es erweitert das String-Objekt um eine Methode "HTMLEncode", die für ein Objekt ohne Parameter oder mit einem Parameter verwendet werden kann.

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

Ich habe eine wesentliche "HTMLEncode-Methode für Javascript" erstellt .

Basierend auf der Desinfektion von Angular ... (es6-Modulsyntax)

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

Soweit ich weiß, gibt es in Javascript keine einfache HTML-Encode / Decode-Methode.

Sie können jedoch JS verwenden, um ein beliebiges Element zu erstellen, seinen inneren Text festzulegen und ihn dann mit innerHTML zu lesen.

Angenommen, mit jQuery sollte dies funktionieren:

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

Oder etwas in diese Richtung.

Sie sollten keine Werte maskieren / codieren müssen, um sie von einem Eingabefeld in ein anderes zu verschieben.

<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 fügt kein rohes HTML oder ähnliches ein. Es weist das DOM lediglich an, die valueEigenschaft (oder das Attribut; nicht sicher) festzulegen. In beiden Fällen behandelt das DOM alle Codierungsprobleme für Sie. Wenn Sie nicht etwas Seltsames wie document.writeoder verwenden eval, ist die HTML-Codierung effektiv transparent.

Wenn Sie über das Generieren eines neuen Textfelds für das Ergebnis sprechen, ist dies immer noch genauso einfach. Übergeben Sie einfach den statischen Teil des HTML-Codes an jQuery und legen Sie die restlichen Eigenschaften / Attribute für das Objekt fest, das an Sie zurückgegeben wird.

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

Ich hatte ein ähnliches Problem und löste es mit der Funktion encodeURIComponentaus JavaScript ( Dokumentation) )

Zum Beispiel in Ihrem Fall, wenn Sie verwenden:

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

und

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

du wirst bekommen chalk%20%26%20cheese. Auch Räume bleiben erhalten.

In meinem Fall musste ich einen Backslash codieren und dieser Code funktioniert perfekt

encodeURIComponent('name/surname')

und ich bekam name%2Fsurname

Hier ist ein kleines Stück, das die Server.HTMLEncodeFunktion von Microsoft ASP emuliert , die in reinem JavaScript geschrieben ist:

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

Das Ergebnis codiert keine Apostrophe, sondern die anderen HTML-Specials und alle Zeichen außerhalb des Bereichs 0x20-0x7e.

Meine reine JS-Funktion:

/**
 * 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 Entities Encod & Decode

Wenn Sie jQuery verwenden möchten. Ich habe das gefunden:

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

(Teil des vom jQuery SDK angebotenen Plugins jquery.string)

Ich glaube, das Problem mit Prototype ist, dass es Basisobjekte in JavaScript erweitert und nicht mit der von Ihnen verwendeten jQuery kompatibel ist. Wenn Sie bereits Prototype und nicht jQuery verwenden, ist dies natürlich kein Problem.

BEARBEITEN: Es gibt auch dies, einen Port der String-Dienstprogramme von Prototype für 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
    };
})();

Dies ist aus ExtJS-Quellcode.

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

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

Auf .htmlEncode () kann auf alle einmal definierten Zeichenfolgen zugegriffen werden.

HtmlEncodes den angegebenen Wert

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

Ich habe einige Probleme mit dem Backslash in meiner Domain \ User-Zeichenfolge festgestellt.

Ich habe dies zu den anderen Fluchten aus Anentropics Antwort hinzugefügt

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

Was ich hier gefunden habe: Wie kann ich einem Backslash in JavaScript entkommen?

Auswählen, was escapeHTML()in der prototype.js getan wird

Durch Hinzufügen dieses Skripts können Sie HTML entkommen:

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

Jetzt können Sie die EscapeHTML-Methode für Zeichenfolgen in Ihrem Skript aufrufen, z.

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

Ich hoffe, es hilft jedem, der nach einer einfachen Lösung sucht, ohne den gesamten prototype.js einbeziehen zu müssen

Unter Verwendung einiger der anderen Antworten hier habe ich eine Version erstellt, die alle relevanten Zeichen in einem Durchgang ersetzt, unabhängig von der Anzahl der verschiedenen codierten Zeichen (nur ein Aufruf von replace()), sodass sie für größere Zeichenfolgen schneller sind.

Es ist nicht auf die vorhandene DOM-API oder andere Bibliotheken angewiesen.

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

Nachdem Sie das einmal ausgeführt haben, können Sie jetzt anrufen

encodeHTML('<>&"\'')

Bekommen <>&"'