JQuery ile HTML dizelerinden kaçma

Herkes jQuery dizelerden HTML kaçmak için kolay bir yol biliyor mu ? Ben rastgele bir dize geçmek ve düzgün bir HTML sayfasında (JavaScript / HTML enjeksiyon saldırılarını önleme) görüntülemek için kaçmış olması gerekir. Eminim bunu yapmak için jQuery genişletmek mümkün, ama şu anda bunu yapmak için çerçeve hakkında yeterli bilmiyorum.

JQuery kullandığınız için, öğenin textözelliğini ayarlayabilirsiniz :

// 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'den de çözüm var

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"

Kaynak: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

HTML'den kaçıyorsanız, gerçekten gerekli olacağını düşünebileceğim sadece üç tane var:

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

Senin kullanım durumuna bağlı olarak, gibi şeyler yapmak gerekebilir "için ". Liste yeterince büyük olsaydı, sadece bir dizi kullanırdım:

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() HTML için değil, yalnızca URL'ler için kaçacaktır.

Alt çizgi kullanmak için yeterince kolay:

_.escape(string) 

Alt çizgi , yerel j'lerin sağlamadığı birçok özellik sağlayan bir yardımcı program kütüphanesidir. Alt çizgiyle aynı API olan ancak daha performanslı olması için yeniden yazılan bir lodash da var .

Bunu yapan küçük bir işlev yazdım. Sadece kaçar ", &, <ve >(ama genellikle hepsi yine gerekmez var). Daha önce önerilen çözümlerden biraz daha zariftir, çünkü tüm dönüşümü yapmak için sadece birini kullanır .replace(). ( DÜZENLEME 2: İşlevi daha küçük ve daha düzenli hale getiren kod karmaşıklığı azaltıldı, orijinal kodu merak ediyorsanız bu cevabın sonuna bakın.)

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

Bu düz Javascripttir, jQuery kullanılmaz.

Kaçan /ve 'de

Mklement adlı kullanıcının yorumuna yanıt olarak düzenle .

Yukarıdaki fonksiyon herhangi bir karakteri içerecek şekilde kolaylıkla genişletilebilir. Kaçmak için daha fazla karakter belirtmek için, bunları hem normal ifadedeki karakter sınıfına (yani içinde /[...]/g) hem de chrnesneye bir giriş olarak eklemeniz yeterlidir . ( DÜZENLEME 2: Bu işlevi de aynı şekilde kısaltın.)

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

'Kesme işareti için yukarıdaki kullanımın ( 'bunun yerine sembolik varlık kullanılmış olabilir - XML'de tanımlanmıştır, ancak orijinal olarak HTML spesifikasyonuna dahil edilmemiştir ve bu nedenle tüm tarayıcılar tarafından desteklenmeyebilir. Bkz: HTML karakter kodlamaları hakkındaki Wikipedia makalesi. ). Ondalık varlıkları kullanmanın onaltılık kullanmaktan daha yaygın bir şekilde desteklendiğini de hatırlıyorum, ama şimdi bunun için kaynağı bulamıyorum. (Ve onaltılı varlıkları desteklemeyen çok sayıda tarayıcı olamaz.)

Not: HTML'de özel bir anlama sahip olmadıkları ve ihtiyaç duymadıkları için , kaçan karakterlerin listesine /ve eklemek 'o kadar da kullanışlı değildir. kaçtı edebilirsiniz.

Orijinal escapeHtmlİşlev

EDIT 2: Özgün işlev chr, .replace()geri arama için gereken nesneyi saklamak için bir değişken ( ) kullandı . Bu değişken ayrıca onu kapsamak için ekstra anonim bir işleve ihtiyaç duydu, bu da işlevi (gereksiz yere) biraz daha büyük ve daha karmaşık hale getirdi.

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

İki sürümden hangisinin daha hızlı olduğunu test etmedim. Bunu yaparsanız, buraya bilgi ve bağlantılar eklemekten çekinmeyin.

Bu partiye ne kadar geç kaldığımı anlıyorum, ama jQuery gerektirmeyen çok kolay bir çözümüm var.

escaped = new Option(unescaped).innerHTML;

Düzenleme: Bu tırnak kaçmaz. Tırnak işaretlerinin kaçması gereken tek durum, içeriğin bir HTML dizesindeki bir özniteliğe satır içine yapıştırılıp yapıştırılmayacağıdır. Bunu yapmanın iyi bir tasarım olacağını düşünmek benim için zor.

Edit 3: En hızlı çözüm için yukarıdaki cevabı Saram'dan kontrol edin. Bu en kısa olanı.

İşte temiz ve net bir JavaScript işlevi. "Birkaç <çok" gibi metinden "birkaç <çok" a kaçacaktır.

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

Son testlerden sonra en hızlı ve tamamen çapraz tarayıcı uyumlu yerel javaScript (DOM) çözümünü önerebilirim:

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

Birçok kez tekrarlarsanız, bir kez hazırlanmış değişkenlerle yapabilirsiniz:

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

Son performans karşılaştırmamı inceleyin ( yığın sorusu ).

Underscore.string lib deneyin , jQuery ile çalışır.

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

çıktı:

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

escapeHTML()Dize nesnesine yöntemi ekleyerek mustache.js örneğini geliştirdim .

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

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

Bu şekilde kullanımı oldukça kolaydır "Some <text>, more Text&Text".escapeHTML()

escape() ve unescape() , URL'ler için şifreleme / şifre çözme dizeleri değil amaçlanan HTML edilir.

Aslında, herhangi bir çerçeve gerektirmeyen hile yapmak için aşağıdaki snippet'i kullanıyorum:

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

Underscore.js'niz varsa, kullanın _.escape(yukarıda yayınlanan jQuery yönteminden daha verimli):

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

Normal ifade yoluna gidiyorsanız, yukarıdaki tghw örneğinde bir hata var.

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

Bu güzel ve güvenli bir örnek ...

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

Vanilya js ile kolayca yapabilirsiniz.

Belgeye bir metin düğümü eklemeniz yeterlidir. Tarayıcıdan kaçacaktır.

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

Global değişken yok, bazı bellek optimizasyonu. Kullanımı:

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

sonuç:

"some<tag>and&symbol©"

JQUERY gerektirmeyen 2 basit yöntem ...

Dizenizdeki tüm karakterleri şu şekilde kodlayabilirsiniz :

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

Ya da sadece ana karakterleri hedef endişe yaklaşık &, satır sonları, <, >, "ve 'benzeri:

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>

Basit JavaScript kaçan örneği:

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

tıkır tıkır çalışıyor

Bu yanıt jQuery ve normal JS yöntemlerini sağlar, ancak bu DOM kullanılmadan en kısadır:

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

Kaçan dize: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Kaçan alanlar sizi rahatsız ediyorsa şunu deneyin:

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

Kaçan dize: It%27s %3E 20%25 less complicated this way.

Ne yazık ki, escape()işlev JavaScript sürüm 1.5'te kullanımdan kaldırıldı . encodeURI()ya encodeURIComponent()da alternatiflerdir, ancak yok sayarlar ', bu nedenle son kod satırı buna dönüşür:

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

Tüm büyük tarayıcılar hala kısa kodu destekliyor ve eski web sitelerinin sayısı göz önüne alındığında, yakında değişeceğinden şüphe duyuyorum.

Mustache.js çözümü için ES6 bir astar

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

Bu bilgileri bir veritabanına kaydediyorsanız , istemci tarafı komut dosyası kullanarak HTML'den kaçmak yanlışsa, bunun sunucuda yapılması gerekir . Aksi takdirde XSS korumanızı atlamak kolaydır.

Demek istediğim, burada cevaplardan birini kullanan bir örnek:

Blogunuzdaki bir yorumdan Html'den kaçmak ve sonra sunucunuza göndermek için escapeHtml işlevini kullandığınızı varsayalım.

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

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

Kullanıcı şunları yapabilir:

• POST istek parametrelerini düzenleyin ve yorumu javascript koduyla değiştirin.
• Tarayıcı konsolunu kullanarak escapeHtml işlevinin üzerine yazın.

Kullanıcı bu snippet'i konsola yapıştırırsa, XSS doğrulamasını atlar:

function escapeHtml(string){
   return string
}

Yeniden kaçmayı engellemezseniz tüm çözümler işe yaramaz, örneğin çoğu çözüm kaçmaya devam &eder &.

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