Экранирование строк HTML с помощью jQuery - PullRequest
Новая
       184

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

573 голосов
/ 24 августа 2008

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

Ответы [ 24 ]

15 голосов
/ 25 мая 2012

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

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

var escapedHtml = html.replace(/&/g, '&')
                      .replace(/>/g, '>')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');
15 голосов
/ 22 ноября 2012

Я улучшил пример 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()

10 голосов
/ 04 сентября 2014

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

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry &amp; Moe
5 голосов
/ 22 мая 2011

Если вы идете по маршруту регулярного выражения, в приведенном выше примере с 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]]);
}
4 голосов
/ 31 октября 2012

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

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;
    }
}
3 голосов
/ 29 января 2015

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

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

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)
2 голосов
/ 13 мая 2013 
(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;"
1 голос
/ 11 октября 2017

Простой пример экранирования 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;"
1 голос
/ 26 июля 2015

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>
1 голос
/ 27 июня 2012 
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);
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...