Экранирование строк HTML с помощью jQuery

https://stackoverflow.com/questions/24816

09-06-2019
|

Вопрос

Кто-нибудь знает простой способ избежать HTML из строк в jQuery?Мне нужно иметь возможность передавать произвольную строку и правильно экранировать ее для отображения на странице HTML (чтобы предотвратить атаки с внедрением JavaScript/HTML).Я уверен, что для этого можно расширить jQuery, но на данный момент я недостаточно знаю о платформе, чтобы добиться этого.

Решение

Поскольку вы используете jQuery, вы можете просто установить элемент 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;

Другие советы

А также есть решение из mustache.js

var entityMap = {
  '&': '&amp;',
  '<': '&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"

Источник: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

Если вы предпочитаете использовать HTML, я считаю, что действительно необходимы только три:

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

В зависимости от вашего варианта использования вам также может потребоваться сделать такие вещи, как " к ".Если бы список стал достаточно большим, я бы просто использовал массив:

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() будет экранировать его только для URL-адресов, а не для HTML.

Я написал крошечную функцию, которая делает это.Это только убегает ", &, < и > (но обычно это все, что вам нужно).Это немного более элегантно, чем предложенные ранее решения, поскольку использует только один .replace() выполнить все преобразования.(РЕДАКТИРОВАТЬ 2: Уменьшена сложность кода, что делает функцию еще меньше и аккуратнее. Если вам интересен исходный код, см. конец этого ответа.)

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

Это простой Javascript, без использования jQuery.

Побег `/` и `'` слишком

Редактировать в ответ на Маклементкомментарий.

Вышеупомянутую функцию можно легко расширить, включив в нее любой символ.Чтобы указать больше символов для экранирования, просто вставьте их оба в класс символов регулярного выражения (т.внутри /[...]/g) и в качестве записи в chr объект.(РЕДАКТИРОВАТЬ 2: Таким же образом сократили и эту функцию.)

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

Обратите внимание на приведенное выше использование ' для апострофа (символическая сущность ' Вместо этого можно было использовать его — он определен в XML, но изначально не был включен в спецификацию HTML и поэтому может поддерживаться не всеми браузерами.Видеть: Статья в Википедии о кодировках символов HTML).Я также помню, как где-то читал, что использование десятичных чисел поддерживается более широко, чем использование шестнадцатеричных, но сейчас я не могу найти источник для этого.(И не может быть много браузеров, которые не поддерживают шестнадцатеричные объекты.)

Примечание: Добавление / и ' в список экранированных символов не так уж и полезен, поскольку они не имеют особого значения в HTML и не нуждаться чтобы сбежать.

Оригинал `escapeHtml` Функция

РЕДАКТИРОВАТЬ 2: Исходная функция использовала переменную (chr) для хранения объекта, необходимого для .replace() перезвонить.Для этой переменной также требовалась дополнительная анонимная функция для ее определения, что делало функцию (без необходимости) немного больше и сложнее.

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

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

Достаточно просто использовать подчеркивание:

_.escape(string)

Нижнее подчеркивание — это служебная библиотека, предоставляющая множество функций, которых нет в родном js.Есть также Лодаш это тот же API, что и для подчеркивания, но он был переписан для большей производительности.

Я понимаю, как опоздал на эту вечеринку, но у меня есть очень простое решение, не требующее jQuery.

escaped = new Option(unescaped).innerHTML;

Редактировать:Это не исключает кавычек.Единственный случай, когда кавычки необходимо экранировать, — это если содержимое будет вставлено в атрибут внутри строки HTML.Мне трудно представить случай, когда это было бы хорошим дизайном.

Редактировать 2:Если производительность имеет решающее значение, самым высоким решением производительности (примерно на 50%) по-прежнему будет серия замен регулярных выражений.Современные браузеры обнаруживают, что регулярные выражения не содержат операторов, а содержат только строку, и объединяют их все в одну операцию.

Вот чистая и понятная функция JavaScript.Текст типа «несколько <много» будет заменен на «несколько <».много".

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

После последних тестов могу рекомендовать самый быстрый и полностью кроссбраузерный совместимый собственный JavaScript (DOM) решение:

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

Если вы повторите это много раз, вы можете сделать это с уже подготовленными переменными:

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

Посмотрите мое последнее выступление сравнение (вопрос стека).

Пытаться Подчеркивание.строка lib, он работает с jQuery.

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

выход:

'&lt;div&gt;Blah blah blah&lt;/div&gt;'

Я усовершенствовал пример mustache.js, добавив escapeHTML() метод для строкового объекта.

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

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

Таким образом, его довольно легко использовать "Some <text>, more Text&Text".escapeHTML()

escape() и unescape() предназначены для кодирования/декодирования строк URL-адресов, а не HTML.

На самом деле, я использую следующий фрагмент, чтобы проделать трюк, не требующий какой-либо инфраструктуры:

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

Если у вас есть underscore.js, используйте _.escape (более эффективный, чем метод jQuery, опубликованный выше):

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

Если вы используете маршрут регулярного выражения, в приведенном выше примере tghw есть ошибка.

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

Это хороший безопасный пример...

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

Вы можете легко сделать это с помощью vanilla js.

Просто добавьте текстовый узел в документ.Он будет экранирован браузером.

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

(function(undefined){
    var charsToReplace = {
        '&': '&amp;',
        '<': '&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));
    };
})();

Никаких глобальных переменных, некоторая оптимизация памяти.Использование:

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

результат:

"some&lt;tag&gt;and&amp;symbol&copy;"

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

2 простых метода, не требующих JQUERY...

Ты можешь закодировать все символы в вашей строке следующим образом:

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

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

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>

Простой пример экранирования 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 htmlDecode(t){
   if (t) return $('<div />').html(t).text();
}

работает как шарм

Этот ответ предоставляет методы jQuery и обычные JS, но это проще всего без использования DOM:

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

Экранированная строка: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Если вас беспокоят экранированные пробелы, попробуйте:

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

Экранированная строка: It%27s %3E 20%25 less complicated this way.

К сожалению, escape() функция была устарело в JavaScript версии 1.5. encodeURI() или encodeURIComponent() альтернативы, но они игнорируют ', поэтому последняя строка кода превратится в следующее:

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

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

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

Чтобы прояснить мою точку зрения, вот пример, использующий один из ответов:

Допустим, вы используете функцию escapeHtml, чтобы экранировать Html из комментария в своем блоге, а затем публикуете его на своем сервере.

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

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

Пользователь мог:

Отредактируйте параметры запроса POST и замените комментарий кодом JavaScript.
Перезапишите функцию escapeHtml с помощью консоли браузера.

Если пользователь вставит этот фрагмент в консоль, он обойдет проверку XSS:

function escapeHtml(string){
   return string
}

Все решения бесполезны, если вы не предотвратите повторный побег, например.большинство решений будут продолжать ускользать & к &.

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

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow

Экранирование строк HTML с помощью jQuery

Побег / и ' слишком

Оригинал escapeHtml Функция

Побег `/` и `'` слишком

Оригинал `escapeHtml` Функция