Czy mogę uciec od znaków specjalnych HTML w javascript?

Chcę wyświetlić tekst do HTML za pomocą funkcji javascript. Jak mogę uniknąć specjalnych znaków HTML w JS? Czy istnieje interfejs API?

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

Możesz użyć .text()funkcji jQuery .

Na przykład:

http://jsfiddle.net/9H6Ch/

Z dokumentacji jQuery dotyczącej .text()funkcji:

Musimy zdawać sobie sprawę, że ta metoda ucieka przed podanym ciągiem znaków, aby był poprawnie renderowany w HTML. W tym celu wywołuje metodę DOM .createTextNode (), nie interpretuje ciągu jako HTML.

Poprzednie wersje Dokumentacji jQuery sformułowały to w ten sposób ( wyróżnienie dodane ):

Musimy zdawać sobie sprawę, że ta metoda ucieka przed podanym ciągiem znaków, aby był poprawnie renderowany w HTML. W tym celu wywołuje metodę DOM .createTextNode (), która zastępuje znaki specjalne ich odpowiednikami encji HTML (np. & Lt; for <).

Myślę, że znalazłem właściwy sposób, aby to zrobić ...

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

Za pomocą lodash

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

kod źródłowy

To zdecydowanie najszybszy sposób, w jaki to widziałem. Ponadto robi to wszystko bez dodawania, usuwania lub zmieniania elementów na stronie.

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

Ciekawe było znalezienie lepszego rozwiązania:

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

Nie analizuję, >ponieważ nie psuje kodu XML / HTML w wyniku.

Oto testy: http://jsperf.com/regexpairs Ponadto stworzyłem funkcję uniwersalną escape: http://jsperf.com/regexpairs2

Najbardziej zwięzłym i wydajnym sposobem wyświetlania niekodowanego tekstu jest użycie textContentwłaściwości.

Szybszy niż używanie innerHTML. I to bez uwzględnienia ucieczki.

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

Elementy DOM obsługują konwersję tekstu na HTML poprzez przypisanie do innerText . innerText nie jest funkcją, ale przypisywanie do niej działa tak, jakby tekst został poprzedzony znakiem ucieczki.

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

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

Jednowarstwowy (dla ES6 +):

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

W przypadku starszych wersji:

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

Ten problem pojawił się podczas tworzenia struktury DOM. To pytanie pomogło mi rozwiązać. Chciałem użyć podwójnego szewronu jako separatora ścieżki, ale dodanie nowego węzła tekstowego bezpośrednio spowodowało wyświetlenie kodu znaku ucieczki zamiast samego znaku:

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

Jeśli korzystasz już z modułów w swojej aplikacji, możesz użyć modułu Escape-HTML .

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

Spróbuj tego, korzystając z prototype.jsbiblioteki:

string.escapeHTML();

Wypróbuj wersję demo

Wymyśliłem to rozwiązanie.

Załóżmy, że chcemy dodać do elementu trochę html z niebezpiecznymi danymi od użytkownika lub bazy danych.

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

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

element.html(html);

Jest niebezpieczny przed atakami XSS. Teraz dodaj to.

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

Tak jest

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

Dla mnie jest to o wiele łatwiejsze niż używanie .replace()i usunie !!! wszystkie możliwe tagi HTML (mam nadzieję).