Kann ich HTML-Sonderzeichen in Javascript entkommen?

Ich möchte einen Text in HTML durch eine Javascript-Funktion anzeigen. Wie kann ich HTML-Sonderzeichen in JS umgehen? Gibt es eine API?

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

Sie können die .text()Funktion von jQuery verwenden .

Beispielsweise:

http://jsfiddle.net/9H6Ch/

Aus der jQuery-Dokumentation zur .text()Funktion:

Wir müssen uns bewusst sein, dass diese Methode bei Bedarf der angegebenen Zeichenfolge entgeht, damit sie korrekt in HTML gerendert wird. Dazu ruft es die DOM-Methode .createTextNode () auf und interpretiert die Zeichenfolge nicht als HTML.

In früheren Versionen der jQuery-Dokumentation wurde dies folgendermaßen formuliert ( Hervorhebung hinzugefügt ):

Wir müssen uns bewusst sein, dass diese Methode bei Bedarf der angegebenen Zeichenfolge entgeht, damit sie korrekt in HTML gerendert wird. Zu diesem Zweck wird die DOM-Methode .createTextNode () aufgerufen, die Sonderzeichen durch ihre HTML-Entitätsäquivalente ersetzt (z. B. & lt; für <).

Ich glaube, ich habe den richtigen Weg gefunden ...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

Mit lodash

_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

Quellcode

Dies ist bei weitem der schnellste Weg, den ich je gesehen habe. Außerdem wird alles erledigt, ohne Elemente auf der Seite hinzuzufügen, zu entfernen oder zu ändern.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

Es war interessant, eine bessere Lösung zu finden:

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

Ich analysiere nicht, >weil es XML / HTML-Code im Ergebnis nicht bricht.

Hier sind die Benchmarks: http://jsperf.com/regexpairs Außerdem habe ich eine universelle escapeFunktion erstellt: http://jsperf.com/regexpairs2

Die prägnanteste und performanteste Möglichkeit, nicht codierten Text anzuzeigen, ist die Verwendung von textContentEigenschaften.

Schneller als mit innerHTML. Und das ohne Berücksichtigung des Overheads.

document.body.textContent = 'a <b> c </b>';

DOM-Elemente unterstützen die Konvertierung von Text in HTML durch Zuweisung zu innerText . innerText ist keine Funktion, aber die Zuweisung funktioniert so, als ob der Text maskiert wäre.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

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, ü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('How to encode\nonly html tags &<>\'" nice & fast!');

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

<textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea>

Ein Einzeiler (für ES6 +):

var escapeHtml = s => (s + '').replace(/[&<>"']/g, m => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
})[m]);

Für ältere Versionen:

function escapeHtml(s) {
    return (s + '').replace(/[&<>"']/g, function (m) {
        return ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;',
            '"': '&quot;', "'": '&#39;'
        })[m];
    });
}

Ist beim Erstellen einer DOM-Struktur auf dieses Problem gestoßen. Diese Frage hat mir geholfen, sie zu lösen. Ich wollte einen Doppel-Chevron als Pfadtrennzeichen verwenden, aber das Anhängen eines neuen Textknotens führte direkt dazu, dass der maskierte Zeichencode angezeigt wurde und nicht das Zeichen selbst:

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* this resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */

Wenn Sie bereits Module in Ihrer App verwenden, können Sie das Escape-HTML- Modul verwenden.

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

Versuchen Sie dies mithilfe der prototype.jsBibliothek:

string.escapeHTML();

Probieren Sie eine Demo aus

Ich habe diese Lösung gefunden.

Nehmen wir an, wir möchten dem Element HTML mit unsicheren Daten des Benutzers oder der Datenbank hinzufügen.

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';

element.html(html);

Es ist unsicher gegen XSS-Angriffe. Fügen Sie dies nun hinzu.

$(document.createElement('div')).html(unsafe).text();

So ist es

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + $(document.createElement('div')).html(unsafe).text(); + '</p>';
html += '</div>';

element.html(html);

Für mich ist das viel einfacher als zu benutzen .replace()und es wird entfernt !!! alle möglichen HTML-Tags (hoffe ich).