Могу ли я избежать специальных символов html в javascript?

Я хочу, чтобы отобразить текст в HTML с помощью функции JavaScript. Как я могу избежать специальных символов html в JS? Есть ли API?

Источник

20 ответов

Решение
function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }
Источник 

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});
<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

Источник

Используя lodash

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

исходный код

Источник

Вы можете использовать JQuery's .text() функция

Например:

http://jsfiddle.net/9H6Ch/

Из документации jQuery относительно .text() функция:

Мы должны знать, что этот метод экранирует предоставленную строку по мере необходимости, чтобы он правильно отображался в HTML. Для этого он вызывает метод DOM.createTextNode(), не интерпретирует строку как HTML.

Предыдущие версии документации jQuery сформулировали это следующим образом (выделение добавлено):

Мы должны знать, что этот метод экранирует предоставленную строку по мере необходимости, чтобы он правильно отображался в HTML. Для этого он вызывает метод DOM.createTextNode(), который заменяет специальные символы их эквивалентами сущностей HTML (например, & lt; for <).

Источник

Это, безусловно, самый быстрый способ, которым я видел это. Плюс, все это происходит без добавления, удаления или изменения элементов на странице.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}
Источник

Я думаю, что нашел правильный способ сделать это...

// 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);
Источник

Интересно было найти лучшее решение:

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

Я не разбираю > потому что это не нарушает XML/HTML-код в результате.

Вот критерии: http://jsperf.com/regexpairs Также я создал универсальный escape функция: http://jsperf.com/regexpairs2

Источник

Самый краткий и эффективный способ отображения незакодированного текста - это использование textContent имущество.

Быстрее, чем используя innerHTML, И это без учета возможности избежать накладных расходов.

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

Источник

По книгам

OWASP рекомендует : «[e]x, кроме буквенно-цифровых символов, [вы должны] экранировать все символы со значениями ASCII меньше 256 с помощью &#xHH; формат (или именованный объект, если он доступен), чтобы предотвратить отключение атрибута []."

Итак, вот функция, которая делает это, с примером использования:

Вы должны проверить диапазоны сущностей, которые я предоставил, чтобы убедиться в безопасности функции самостоятельно. Вы также можете использовать это регулярное выражение, которое лучше читается и должно охватывать те же коды символов, но примерно на 10% менее производительно в моем браузере:

/(?![0-9A-Za-z])[\u0000-\u00FF]/g

Источник

DOM Elements поддерживает преобразование текста в HTML, присваивая innerText. innerText не является функцией, но присвоение ей работает так, как если бы текст был экранирован.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';
Источник

Вы можете закодировать каждый символ в вашей строке:

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

Или просто нацеливайтесь на главных героев, о которых нужно беспокоиться (&, inebreaks, <,>, "и '), например:

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>

Источник

Если вы уже используете модули в своем приложении, вы можете использовать модуль escape-html.

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);
Источник

Используйте это, чтобы удалить HTML-теги из строки в JavaScript:

const strippedString = htmlString.replace(/(<([^>]+)>)/gi, "");

console.log(strippedString);
Источник

Однострочный (для ES6+):

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

Для более старых версий:

function escapeHtml(s) {
    return (s + '').replace(/[&<>"']/g, function (m) {
        return ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;',
            '"': '&quot;', "'": '&#39;'
        })[m];
    });
}
Источник

Столкнулся с этой проблемой при построении структуры DOM. Этот вопрос помог мне решить эту проблему. Я хотел использовать двойной шеврон в качестве разделителя пути, но добавление нового текстового узла напрямую приводило к отображению кода экранированного символа, а не самого символа:

var _div = document.createElement('div');
var _separator = document.createTextNode('&raquo;');
//_div.appendChild(_separator); /* this resulted in '&raquo;' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */
Источник

Просто напишите код между ними. Убедитесь, что вы добавили имя класса в тег кода. Он ускользнет от всего фрагмента HTML, написанного на
<pre><code class="html-escape">....</code></pre>.

Источник

Используйте такую ​​строку шаблона

      `
<element attr="value" attr2="value"></element>
`
Источник

Я придумал это решение.

Давайте предположим, что мы хотим добавить html к элементу с небезопасными данными от пользователя или базы данных.

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

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

element.html(html);

Это небезопасно против атак XSS. Теперь добавьте это.

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

Так что, это

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

Для меня это намного проще, чем использовать .replace() и это уберет!!! все возможные теги HTML (я надеюсь).

Источник

Полное решение jQuery:

function escapeHtml(unsafe) {
    return $('<i>').text(unsafe).html();
}

Если мы избежим небезопасной строки "<br>" мы получаем "&lt;br&gt;"

Источник

Попробуйте это, используя prototype.js библиотека:

string.escapeHTML();

Попробуйте демо

Источник
Другие вопросы по тегам