Unikanie ciągów HTML za pomocą jQuery

Czy ktoś zna prosty sposób na ucieczkę HTML z ciągów znaków w jQuery ? Muszę być w stanie przekazać dowolny ciąg znaków i odpowiednio wstawić znak ucieczki w celu wyświetlenia na stronie HTML (zapobiegając atakom JavaScript / HTML). Jestem pewien, że można rozszerzyć jQuery, aby to zrobić, ale w tej chwili nie wiem wystarczająco dużo o frameworku, aby to osiągnąć.

Ponieważ używasz jQuery , możesz po prostu ustawić właściwość elementu text:

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

Istnieje również rozwiązanie z 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"

Źródło: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

Jeśli uciekasz w stronę HTML, są tylko trzy, o których myślę, że byłyby naprawdę konieczne:

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

W zależności od przypadku zastosowania, może być konieczne, aby robić rzeczy, jak "się ". Jeśli lista jest wystarczająco duża, użyłbym tablicy:

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() uniknie go tylko w przypadku adresów URL, a nie HTML.

Łatwy w użyciu podkreślnik:

_.escape(string) 

Podkreślenie to biblioteka narzędziowa, która zapewnia wiele funkcji, których nie zapewnia natywny js. Istnieje również lodash, który jest tym samym interfejsem API co podkreślenie, ale został przepisany, aby był bardziej wydajny.

Napisałem małą funkcję, która to robi. To tylko ucieka ", &, <i >(ale zwykle to wszystko, czego potrzeba w każdym razie). Jest nieco bardziej elegancki niż wcześniej proponowane rozwiązania, ponieważ używa tylko jednego .replace() do przeprowadzenia całej konwersji. ( EDYCJA 2: Zmniejszona złożoność kodu sprawia, że ​​funkcja jest jeszcze mniejsza i bardziej uporządkowana, jeśli jesteś ciekawy oryginalnego kodu, zobacz koniec tej odpowiedzi).

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

To jest zwykły Javascript, bez użycia jQuery.

Ucieczki /i 'zbyt

Edytuj w odpowiedzi na komentarz mklement .

Powyższą funkcję można łatwo rozszerzyć o dowolny znak. Aby określić więcej znaków do ucieczki, wystarczy wstawić je zarówno do klasy znaków w wyrażeniu regularnym (tj. Wewnątrz /[...]/g), jak i jako wpis w chrobiekcie. ( EDYCJA 2: ten sam sposób również skróciłem tę funkcję.)

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

Zwróć uwagę na powyższe użycie 'apostrofu ( 'zamiast tego można było użyć bytu symbolicznego - jest on zdefiniowany w XML, ale pierwotnie nie był uwzględniony w specyfikacji HTML i dlatego może nie być obsługiwany przez wszystkie przeglądarki. Zobacz: Artykuł w Wikipedii na temat kodowania znaków HTML ). Pamiętam też, że czytałem gdzieś, że używanie elementów dziesiętnych jest szerzej obsługiwane niż szesnastkowe, ale nie mogę teraz znaleźć źródła tego. (I nie może istnieć wiele przeglądarek, które nie obsługują bytów szesnastkowych.)

Uwaga: Dodawanie /i 'do listy znaków ucieczki nie jest aż tak przydatne, ponieważ nie mają one specjalnego znaczenia w HTML i nie wymagają ich zmieniać.

Oryginalny escapeHtml funkcja

EDYCJA 2: Oryginalna funkcja używała zmiennej ( chr) do przechowywania obiektu potrzebnego do .replace()wywołania zwrotnego. Ta zmienna wymagała także dodatkowej anonimowej funkcji do jej objęcia zasięgiem, dzięki czemu funkcja (niepotrzebnie) jest nieco większa i bardziej złożona.

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

Nie testowałem, która z dwóch wersji jest szybsza. Jeśli tak, możesz dodać tutaj informacje i linki na ten temat.

Zdaję sobie sprawę, jak późno jestem na tę imprezę, ale mam bardzo łatwe rozwiązanie, które nie wymaga jQuery.

escaped = new Option(unescaped).innerHTML;

Edycja: To nie unika cytatów. Jedynym przypadkiem, w którym cytaty musiałyby być poprzedzone znakiem ucieczki, jest to, czy treść zostanie wklejona w linii do atrybutu w ciągu HTML. Trudno mi wyobrazić sobie przypadek, w którym zrobienie tego byłoby dobrym projektem.

Edycja 3: Aby znaleźć najszybsze rozwiązanie, sprawdź powyższą odpowiedź od Sarama. Ten jest najkrótszy.

Oto czysta, przejrzysta funkcja JavaScript. Będzie uciec od tekstu takiego jak „kilka <wiele” do „kilku <wiele”.

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

Po ostatnich testach mogę polecić najszybsze iw pełni kompatybilne z przeglądarkami natywne rozwiązanie javaScript (DOM):

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

Jeśli powtórzysz to wiele razy, możesz to zrobić z raz przygotowanymi zmiennymi:

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

Spójrz na moje końcowe porównanie wydajności ( pytanie stosu ).

Wypróbuj Underscore.string lib, działa z jQuery.

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

wynik:

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

Poprawiłem przykład mustache.js dodając escapeHTML()metodę do obiektu string.

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

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

W ten sposób jest dość łatwy w użyciu "Some <text>, more Text&Text".escapeHTML()

escape() i unescape() są przeznaczone do kodowania / dekodowania ciągów dla adresów URL, a nie HTML.

Właściwie używam następującego fragmentu kodu, aby wykonać sztuczkę, która nie wymaga żadnych ram:

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

Jeśli masz plik underscore.js, użyj _.escape(bardziej wydajny niż metoda jQuery opublikowana powyżej):

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

Jeśli wybierasz się na regex, w powyższym przykładzie tghw wystąpił błąd.

<!-- 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]]);
}

To niezły bezpieczny przykład ...

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

Możesz to łatwo zrobić za pomocą waniliowej js.

Po prostu dodaj dokument do węzła tekstowego. Zostanie to usunięte przez przeglądarkę.

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

Bez zmiennych globalnych, trochę optymalizacji pamięci. Stosowanie:

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

wynikiem jest:

"some<tag>and&symbol©"

2 proste metody, które NIE wymagają JQUERY ...

Możesz zakodować wszystkie znaki w swoim ciągu w następujący sposób:

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

Albo po prostu kierować głównych bohaterów martwić &, podziały wierszy, <, >, "i 'tak:

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>

Przykład ucieczki zwykłego JavaScript:

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

działa jak marzenie

Ta odpowiedź zawiera jQuery i normalne metody JS, ale jest najkrótsza bez użycia DOM:

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

Ciąg znaków ucieczki: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Jeśli ci przeszkadzają spacje, spróbuj:

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

Ciąg znaków ucieczki: It%27s %3E 20%25 less complicated this way.

Niestety escape()funkcja ta była przestarzała w JavaScript 1.5 . encodeURI()lub encodeURIComponent()są alternatywami, ale ignorują ', więc ostatni wiersz kodu zamieniłby się w to:

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

Wszystkie główne przeglądarki nadal obsługują krótki kod, a biorąc pod uwagę liczbę starych stron internetowych, wątpię, aby wkrótce się to zmieniło.

ES6 jeden liner do rozwiązania z mustache.js

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

Jeśli zapisujesz te informacje w bazie danych , nie można uciec HTML za pomocą skryptu po stronie klienta , należy to zrobić na serwerze . W przeciwnym razie łatwo obejść ochronę XSS.

Aby wyrazić się jasno, oto przykład wykorzystujący jedną z odpowiedzi:

Załóżmy, że używasz funkcji escapeHtml, aby uciec z kodu HTML od komentarza na blogu, a następnie opublikować go na serwerze.

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

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

Użytkownik może:

• Edytuj parametry żądania POST i zamień komentarz na kod javascript.
• Zastąp funkcję escapeHtml za pomocą konsoli przeglądarki.

Jeśli użytkownik wklei ten fragment w konsoli, pominie sprawdzanie poprawności XSS:

function escapeHtml(string){
   return string
}

Wszystkie rozwiązania są bezużyteczne, jeśli dont zapobiec ponownemu ucieczki, np większość rozwiązań byłoby zachować uciekając &się &.

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] + ";";
        }
    ) : "";
};