Lolos string HTML dengan jQuery

Adakah yang tahu cara mudah menghindari HTML dari string di jQuery ? Saya harus dapat melewati string arbitrer dan membuatnya lolos dengan benar untuk ditampilkan di halaman HTML (mencegah serangan JavaScript / injeksi HTML). Saya yakin mungkin untuk memperluas jQuery untuk melakukan ini, tetapi saya tidak cukup tahu tentang kerangka kerja saat ini untuk mencapai ini.

Karena Anda menggunakan jQuery , Anda bisa mengatur textproperti elemen :

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

Ada juga solusi dari 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"

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

Jika Anda melarikan diri ke HTML, hanya ada tiga yang dapat saya pikirkan yang akan sangat diperlukan:

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

Tergantung pada kasus penggunaan Anda, Anda mungkin juga perlu melakukan hal-hal seperti "untuk ". Jika daftarnya cukup besar, saya hanya akan menggunakan array:

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() hanya akan menghindarinya untuk URL, bukan untuk HTML.

Cukup mudah untuk menggunakan garis bawah:

_.escape(string) 

Underscore adalah pustaka utilitas yang menyediakan banyak fitur yang tidak disediakan oleh js asli. Ada juga lodash yang merupakan API yang sama dengan garis bawah tetapi ditulis ulang agar lebih berkinerja.

Saya menulis fungsi kecil kecil yang melakukan ini. Hanya lolos ", &, <dan >(tapi biasanya itu semua Anda perlu pula). Ini sedikit lebih elegan daripada solusi yang diusulkan sebelumnya karena hanya menggunakan satu .replace() untuk melakukan semua konversi. ( EDIT 2: Pengurangan kompleksitas kode menjadikan fungsi lebih kecil dan lebih rapi, jika Anda penasaran dengan kode asli, lihat bagian akhir dari jawaban ini.)

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

Ini Javascript biasa, tidak ada jQuery yang digunakan.

Lolos /dan 'juga

Edit dalam menanggapi komentar mklement .

Fungsi di atas dapat dengan mudah diperluas untuk memasukkan karakter apa pun. Untuk menentukan lebih banyak karakter untuk melarikan diri, cukup masukkan keduanya dalam kelas karakter dalam ekspresi reguler (yaitu di dalam /[...]/g) dan sebagai entri dalam chrobjek. ( EDIT 2: Mempersingkat fungsi ini juga, dengan cara yang sama.)

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

Perhatikan penggunaan di atas 'untuk tanda kutip (entitas simbolis 'mungkin telah digunakan sebagai gantinya - itu didefinisikan dalam XML, tetapi pada awalnya tidak termasuk dalam spesifikasi HTML dan karenanya mungkin tidak didukung oleh semua browser. Lihat: Artikel Wikipedia tentang penyandian karakter HTML ). Saya juga ingat pernah membaca di suatu tempat yang menggunakan entitas desimal lebih banyak didukung daripada menggunakan heksadesimal, tetapi saya tidak bisa menemukan sumber untuk itu sekarang. (Dan tidak mungkin ada banyak browser di luar sana yang tidak mendukung entitas heksadesimal.)

Catatan: Menambahkan /dan 'ke daftar karakter yang lolos tidak terlalu berguna, karena mereka tidak memiliki arti khusus dalam HTML dan tidak perlu diloloskan.

escapeHtmlFungsi Asli

EDIT 2: Fungsi asli menggunakan variabel ( chr) untuk menyimpan objek yang diperlukan untuk .replace()panggilan balik. Variabel ini juga membutuhkan fungsi anonim tambahan untuk membuat ruang lingkup, membuat fungsi (tidak perlu) sedikit lebih besar dan lebih kompleks.

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

Saya belum menguji versi mana dari dua versi yang lebih cepat. Jika Anda melakukannya, jangan ragu untuk menambahkan info dan tautan di sini.

Saya menyadari betapa terlambatnya saya ke pesta ini, tetapi saya memiliki solusi yang sangat mudah yang tidak memerlukan jQuery.

escaped = new Option(unescaped).innerHTML;

Sunting: Ini tidak luput dari penawaran. Satu-satunya kasus di mana kutipan perlu diloloskan adalah jika konten akan ditempelkan sebaris dengan atribut dalam string HTML. Sulit bagi saya untuk membayangkan kasus di mana melakukan ini akan menjadi desain yang bagus.

Sunting 3: Untuk solusi tercepat, periksa jawaban di atas dari Saram. Yang ini adalah yang terpendek.

Ini adalah fungsi JavaScript yang bersih dan jelas. Ini akan keluar dari teks seperti "beberapa <banyak" ke "beberapa & lt; banyak".

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

Setelah tes terakhir yang saya dapat merekomendasikan tercepat dan benar-benar lintas browser yang kompatibel native javascript (DOM) solusi:

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

Jika Anda mengulanginya berkali-kali, Anda bisa melakukannya dengan variabel yang sudah disiapkan:

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

Lihatlah perbandingan kinerja akhir saya ( pertanyaan tumpukan ).

Coba Underscore.string lib, ini berfungsi dengan jQuery.

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

keluaran:

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

Saya telah meningkatkan contoh mustache.js menambahkan escapeHTML()metode ke objek string.

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

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

Dengan begitu cukup mudah digunakan "Some <text>, more Text&Text".escapeHTML()

escape()dan unescape()dimaksudkan untuk menyandikan / mendekodekan string untuk URL, bukan HTML.

Sebenarnya, saya menggunakan cuplikan berikut untuk melakukan trik yang tidak memerlukan kerangka apa pun:

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

Jika Anda memiliki underscore.js, gunakan _.escape(lebih efisien daripada metode jQuery yang diposting di atas):

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

Jika Anda menggunakan rute regex, ada kesalahan dalam contoh tghw di atas.

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

Ini adalah contoh aman yang bagus ...

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

Anda dapat dengan mudah melakukannya dengan vanilla js.

Cukup tambahkan simpul teks pada dokumen. Itu akan lolos oleh browser.

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

Tidak ada variabel global, beberapa optimasi memori. Pemakaian:

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

hasilnya adalah:

"some<tag>and&symbol©"

2 metode sederhana yang tidak memerlukan JQUERY ...

Anda dapat menyandikan semua karakter di string Anda seperti ini:

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

Atau hanya menargetkan karakter utama perlu khawatir &, jeda baris, <, >, "dan 'seperti:

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>

Contoh JavaScript polos yang lolos:

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

bekerja seperti pesona

Jawaban ini memberikan metode jQuery dan JS normal, tapi ini yang terpendek tanpa menggunakan DOM:

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

String yang lolos: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Jika ruang yang terlepas mengganggu Anda, cobalah:

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

String yang lolos: It%27s %3E 20%25 less complicated this way.

Sayangnya, escape()fungsi tersebut tidak digunakan lagi dalam JavaScript versi 1.5 . encodeURI()atau encodeURIComponent()alternatif, tetapi mereka abaikan ', sehingga baris kode terakhir akan berubah menjadi ini:

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

Semua browser utama masih mendukung kode pendek, dan mengingat jumlah situs web lama, saya ragu itu akan segera berubah.

ES6 satu liner untuk solusi dari mustache.js

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

Jika Anda menyimpan informasi ini dalam database , itu salah untuk melarikan diri HTML menggunakan skrip sisi klien , ini harus dilakukan di server . Kalau tidak mudah untuk memotong perlindungan XSS Anda.

Untuk memperjelas poin saya, berikut adalah contoh menggunakan salah satu jawaban:

Katakanlah Anda menggunakan fungsi escapeHtml untuk menghindari Html dari komentar di blog Anda dan kemudian mempostingnya ke server Anda.

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

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

Pengguna bisa:

• Edit parameter permintaan POST dan ganti komentar dengan kode javascript.
• Timpa fungsi escapeHtml menggunakan konsol browser.

Jika pengguna menempelkan snippet ini di konsol, ia akan mem-bypass validasi XSS:

function escapeHtml(string){
   return string
}

Semua solusi tidak berguna jika Anda tidak mencegah melarikan diri kembali, mis. Sebagian besar solusi akan terus melarikan diri &ke &.

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