HTML-Zeichenfolgen mit jQuery maskieren

Kennt jemand eine einfache Möglichkeit, HTML aus Zeichenfolgen in jQuery zu entfernen ? Ich muss in der Lage sein, eine beliebige Zeichenfolge zu übergeben und sie für die Anzeige auf einer HTML-Seite ordnungsgemäß maskieren zu lassen (um JavaScript / HTML-Injection-Angriffe zu verhindern). Ich bin sicher, dass es möglich ist, jQuery zu erweitern, um dies zu tun, aber ich weiß im Moment nicht genug über das Framework, um dies zu erreichen.

Da Sie jQuery verwenden , können Sie einfach die textEigenschaft des Elements festlegen :

// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// <div class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value: 
// &lt;script&gt;alert('hi!');&lt;/script&gt;

Es gibt auch die Lösung von mustache.js

var entityMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}

$('<div/>').text('This is fun & stuff').html(); // "This is fun &amp; stuff"

Quelle: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

Wenn Sie sich für HTML entscheiden, gibt es nur drei, von denen ich mir vorstellen kann, dass sie wirklich notwendig wären:

html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");

Je nach Anwendungsfall, können Sie auch Dinge tun müssen , wie "zu ". Wenn die Liste groß genug wäre, würde ich einfach ein Array verwenden:

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]
for(var item in findReplace)
    escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);

encodeURIComponent() wird nur für URLs maskiert, nicht für HTML.

Einfach genug, um Unterstrich zu verwenden:

_.escape(string) 

Unterstrich ist eine Dienstprogrammbibliothek, die viele Funktionen bietet, die native js nicht bieten. Es gibt auch lodash, das die gleiche API wie der Unterstrich hat, aber umgeschrieben wurde, um leistungsfähiger zu sein.

Ich habe eine winzige kleine Funktion geschrieben, die dies tut. Es entgeht nur ", &, <und >(aber in der Regel das ist alles , was Sie brauchen sowieso). Es ist etwas eleganter als die zuvor vorgeschlagenen Lösungen, da nur eine .replace() für die gesamte Konvertierung verwendet wird. ( BEARBEITEN 2: Reduzierte Codekomplexität, wodurch die Funktion noch kleiner und übersichtlicher wird. Wenn Sie neugierig auf den Originalcode sind, lesen Sie das Ende dieser Antwort.)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}

Dies ist einfaches Javascript, es wird keine jQuery verwendet.

Flucht /und 'auch

Bearbeiten Sie als Antwort auf den Kommentar von mklement .

Die obige Funktion kann leicht um ein beliebiges Zeichen erweitert werden. Um weitere Zeichen anzugeben, die maskiert werden sollen, fügen Sie sie einfach sowohl in die Zeichenklasse im regulären Ausdruck (dh innerhalb des /[...]/g) als auch als Eintrag im chrObjekt ein. ( EDIT 2: In gleicher Weise wurde auch diese Funktion verkürzt.)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&'\/<>]/g, function (a) {
        return {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        }[a];
    });
}

Beachten Sie die obige Verwendung von 'für Apostroph (die symbolische Entität wurde 'möglicherweise stattdessen verwendet - sie ist in XML definiert, wurde jedoch ursprünglich nicht in die HTML-Spezifikation aufgenommen und wird daher möglicherweise nicht von allen Browsern unterstützt. Siehe: Wikipedia-Artikel zu HTML-Zeichencodierungen ). Ich erinnere mich auch daran, dass ich irgendwo gelesen habe, dass die Verwendung von Dezimalstellen stärker unterstützt wird als die Verwendung von Hexadezimal, aber ich kann die Quelle dafür derzeit nicht finden. (Und es kann nicht viele Browser geben, die die hexadezimalen Entitäten nicht unterstützen.)

Hinweis: Das Hinzufügen /und 'zur Liste der maskierten Zeichen ist nicht allzu nützlich, da sie in HTML keine besondere Bedeutung haben und nicht maskiert werden müssen.

Ursprüngliche escapeHtmlFunktion

BEARBEITEN 2: Die ursprüngliche Funktion verwendete eine Variable ( chr), um das für den .replace()Rückruf benötigte Objekt zu speichern . Diese Variable benötigte auch eine zusätzliche anonyme Funktion, um sie zu erweitern, wodurch die Funktion (unnötig) etwas größer und komplexer wurde.

var escapeHtml = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

Ich habe nicht getestet, welche der beiden Versionen schneller sind. Wenn Sie dies tun, können Sie hier Informationen und Links dazu hinzufügen.

Mir ist klar, wie spät ich zu dieser Party komme, aber ich habe eine sehr einfache Lösung, für die jQuery nicht erforderlich ist.

escaped = new Option(unescaped).innerHTML;

Bearbeiten: Dies entgeht keinen Anführungszeichen. Der einzige Fall, in dem Anführungszeichen maskiert werden müssten, besteht darin, dass der Inhalt in ein Attribut innerhalb einer HTML-Zeichenfolge eingefügt wird. Es fällt mir schwer, mir einen Fall vorzustellen, in dem dies ein gutes Design wäre.

Bearbeiten 3: Für die schnellste Lösung überprüfen Sie die Antwort oben von Saram. Dieser ist der kürzeste.

Hier ist eine saubere, klare JavaScript-Funktion. Es wird Text wie "einige <viele" in "einige & lt; viele" maskieren.

function escapeHtmlEntities (str) {
  if (typeof jQuery !== 'undefined') {
    // Create an empty div to use as a container,
    // then put the raw text in and get the HTML
    // equivalent out.
    return jQuery('<div/>').text(str).html();
  }

  // No jQuery, so use string replace.
  return str
    .replace(/&/g, '&amp;')
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

Nach letzten Tests kann ich empfehlen schnellste und vollständig Cross - Browser - kompatibel nativen javaScript (DOM) Lösung:

function HTMLescape(html){
    return document.createElement('div')
        .appendChild(document.createTextNode(html))
        .parentNode
        .innerHTML
}

Wenn Sie es viele Male wiederholen, können Sie es mit einmal vorbereiteten Variablen tun:

//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
  DOMtext.nodeValue = html;
  return DOMnative.innerHTML
}

Sehen Sie sich meine Endleistung Vergleich ( Stack Frage ).

Versuchen Sie Underscore.string lib, es funktioniert mit jQuery.

_.str.escapeHTML('<div>Blah blah blah</div>')

Ausgabe:

'<div>Blah blah blah</div>'

Ich habe das Beispiel mustache.js erweitert und die escapeHTML()Methode zum Zeichenfolgenobjekt hinzugefügt .

var __entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

String.prototype.escapeHTML = function() {
    return String(this).replace(/[&<>"'\/]/g, function (s) {
        return __entityMap[s];
    });
}

Auf diese Weise ist es recht einfach zu bedienen "Some <text>, more Text&Text".escapeHTML()

escape()und unescape()sollen Zeichenfolgen für URLs und nicht für HTML codieren / decodieren.

Eigentlich verwende ich das folgende Snippet, um den Trick auszuführen, für den kein Framework erforderlich ist:

var escapedHtml = html.replace(/&/g, '&')
                      .replace(/>/g, '>')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');

Wenn Sie underscore.js haben, verwenden Sie _.escape(effizienter als die oben beschriebene jQuery-Methode):

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe

Wenn Sie die Regex-Route wählen, ist im obigen Beispiel von tghw ein Fehler aufgetreten.

<!-- WON'T WORK -  item[0] is an index, not an item -->

var escaped = html; 
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g,"&gt;"], [/"/g,
"&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(item[0], item[1]);   
}


<!-- WORKS - findReplace[item[]] correctly references contents -->

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}

Dies ist ein schönes sicheres Beispiel ...

function escapeHtml(str) {
    if (typeof(str) == "string"){
        try{
            var newStr = "";
            var nextCode = 0;
            for (var i = 0;i < str.length;i++){
                nextCode = str.charCodeAt(i);
                if (nextCode > 0 && nextCode < 128){
                    newStr += "&#"+nextCode+";";
                }
                else{
                    newStr += "?";
                }
             }
             return newStr;
        }
        catch(err){
        }
    }
    else{
        return str;
    }
}

Sie können es leicht mit Vanille js tun.

Fügen Sie dem Dokument einfach einen Textknoten hinzu. Es wird vom Browser maskiert.

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)

(function(undefined){
    var charsToReplace = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;'
    };

    var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
    var replaceFn = function(tag){ return charsToReplace[tag] || tag; };

    var replaceRegF = function(replaceMap) {
        return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
    };
    var replaceFnF = function(replaceMap) {
        return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
    };

    String.prototype.htmlEscape = function(replaceMap) {
        if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
        return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
    };
})();

Keine globalen Variablen, etwas Speicheroptimierung. Verwendungszweck:

"some<tag>and&symbol©".htmlEscape({'©': '&copy;'})

Ergebnis ist:

"some<tag>and&symbol©"

2 einfache Methoden, die KEINE JQUERY erfordern ...

Sie können alle Zeichen in Ihrer Zeichenfolge folgendermaßen codieren :

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

Oder einfach nur die Hauptfiguren Ziel zu kümmern &, Zeilenumbrüche <, >, "und 'wie:

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

var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';

test.value=encode(myString);

testing.innerHTML=encode(myString);

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

<p><b>What JavaScript Generated:</b></p>

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

<p><b>What It Renders Too In HTML:</b></p>

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

Beispiel für einfaches JavaScript-Escape:

function escapeHtml(text) {
    var div = document.createElement('div');
    div.innerText = text;
    return div.innerHTML;
}

escapeHtml("<script>alert('hi!');</script>")
// "&lt;script&gt;alert('hi!');&lt;/script&gt;"

function htmlEscape(str) {
    var stringval="";
    $.each(str, function (i, element) {
        alert(element);
        stringval += element
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(' ', '-')
            .replace('?', '-')
            .replace(':', '-')
            .replace('|', '-')
            .replace('.', '-');
    });
    alert(stringval);
    return String(stringval);
}

function htmlDecode(t){
   if (t) return $('<div />').html(t).text();
}

klappt wunderbar

Diese Antwort enthält die Methoden jQuery und normale JS, ist jedoch ohne Verwendung des DOM am kürzesten:

unescape(escape("It's > 20% less complicated this way."))

Escapezeichenfolge: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Wenn Sie die entkommenen Leerzeichen stören, versuchen Sie:

unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))

Escapezeichenfolge: It%27s %3E 20%25 less complicated this way.

Leider war die escape()Funktion in JavaScript Version 1.5 veraltet . encodeURI()oder encodeURIComponent()sind Alternativen, aber sie ignorieren ', so dass die letzte Codezeile in folgende umgewandelt wird:

decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))

Alle gängigen Browser unterstützen weiterhin den Funktionscode, und angesichts der Anzahl der alten Websites bezweifle ich, dass sich dies bald ändern wird.

ES6 ein Liner für die Lösung von mustache.js

const escapeHTML = str => (str+'').replace(/[&<>"'`=\/]/g, s => ({'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','/': '&#x2F;','`': '&#x60;','=': '&#x3D;'})[s]);

Wenn Sie diese Informationen in einer Datenbank speichern , ist es falsch, HTML mithilfe eines clientseitigen Skripts zu maskieren . Dies sollte auf dem Server erfolgen . Andernfalls ist es einfach, Ihren XSS-Schutz zu umgehen.

Um meinen Standpunkt klar zu machen, hier ein Beispiel mit einer der Antworten:

Nehmen wir an, Sie verwenden die Funktion EscapeHtml, um das HTML aus einem Kommentar in Ihrem Blog zu entfernen und es dann auf Ihrem Server zu veröffentlichen.

var entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
  };

  function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
      return entityMap[s];
    });
  }

Der Benutzer könnte:

• Bearbeiten Sie die POST-Anforderungsparameter und ersetzen Sie den Kommentar durch Javascript-Code.
• Überschreiben Sie die Funktion EscapeHtml über die Browserkonsole.

Wenn der Benutzer dieses Snippet in die Konsole einfügt, wird die XSS-Validierung umgangen:

function escapeHtml(string){
   return string
}

Alle Lösungen sind nutzlos , wenn Sie wieder Flucht verhindern tun sie nicht, wie die meisten Lösungen halten würde entkommen &zu &.

escapeHtml = function (s) {
    return s ? s.replace(
        /[&<>'"]/g,
        function (c, offset, str) {
            if (c === "&") {
                var substr = str.substring(offset, offset + 6);
                if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
                    // already escaped, do not re-escape
                    return c;
                }
            }
            return "&" + {
                "&": "amp",
                "<": "lt",
                ">": "gt",
                "'": "apos",
                '"': "quot"
            }[c] + ";";
        }
    ) : "";
};