Уникнення рядків HTML за допомогою jQuery

Хтось знає про простий спосіб уникнути 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 = {
  '&': '&',
  '<': '&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:280f4dd6-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.

Досить просто використовувати підкреслення:

_.escape(string) 

Underscore - це бібліотека утиліт, яка надає безліч функцій, які не дає нативний js. Також є lodash, який є тим самим API, що і підкреслення, але він був переписаний, щоб бути більш ефективним.

Я написав маленьку маленьку функцію, яка це робить. Він тільки тікає ", &, <і >(але , як правило, це все , що вам потрібно в будь-якому випадку). Це трохи елегантніше, ніж запропоновані раніше рішення, оскільки для їх перетворення використовується лише одне .replace() . ( EDIT 2: Зменшення складності коду робить функцію ще меншою та акуратнішою, якщо вам цікаво оригінальний код, див. Кінець цієї відповіді.)

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

Це звичайний Javascript, не використовується jQuery.

Втеча /і 'теж

Редагувати у відповідь на коментар mklement .

Вищевказану функцію можна легко розширити, включаючи будь-який символ. Щоб вказати більше символів для втечі, просто вставляйте їх як у клас символів у регулярному виразі (тобто всередині /[...]/g), так і як запис у chrоб’єкті. ( EDIT 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функція

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

Я не перевіряв, яка з двох версій швидша. Якщо ви це зробите, не соромтесь додавати тут інформацію та посилання на неї

Я розумію, як я спізнююсь на цю вечірку, але у мене дуже просте рішення, яке не потребує jQuery.

escaped = new Option(unescaped).innerHTML;

Редагувати: Цитата не уникає. Єдиний випадок, коли цитати потрібно уникати, якщо вміст буде вставлено в атрибут в HTML-рядку. Мені важко уявити випадок, коли це було б гарним дизайном.

Редагування 3: Для найшвидшого рішення перевірте відповідь вище від Сарама. Цей найкоротший.

Ось чиста, чітка функція 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
}

Подивіться на моє остаточне порівняння продуктивності ( питання про стек ).

Спробуйте Underscore.string lib, він працює з jQuery.

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

вихід:

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

Я покращив приклад mustache.js, додавши escapeHTML()метод до об’єкта рядка.

var __entityMap = {
    "&": "&",
    "<": "&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, '&')
                      .replace(/>/g, '>')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');

Якщо у вас є underscore.js, використовуйте _.escape(ефективніше, ніж метод jQuery, розміщений вище):

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & 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;
    }
}

Ви можете легко зробити це з ванільним js.

Просто додайте в текстовий вузол документ. Це перешкодить браузеру.

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

Немає глобальних змінних, деяка оптимізація пам'яті. Використання:

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

Результат:

"some<tag>and&symbol©"

2 простих методу, які не потребують жодної роботи

Ви можете кодувати всі символи в рядку так:

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

працює як шарм

Ця відповідь надає методи 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'))

Усі основні браузери все ще підтримують короткий код, а враховуючи кількість старих веб-сайтів, я сумніваюся, що незабаром це зміниться.

ES6 один вкладиш для рішення з mustache.js

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

Якщо ви зберігаєте цю інформацію в базі даних , її неправильне виведення HTML за допомогою сценарію на стороні клієнта , це слід зробити на сервері . В іншому випадку легко обійти ваш захист XSS.

Щоб зрозуміти мою думку, ось приклад з використанням однієї з відповідей:

Скажімо, ви використовуєте функцію escapeHtml, щоб уникнути Html від коментаря у своєму блозі, а потім опублікувати його на своєму сервері.

var entityMap = {
    "&": "&",
    "<": "&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] + ";";
        }
    ) : "";
};