Bisakah saya menghindari karakter khusus html di javascript?

Saya ingin menampilkan teks ke HTML dengan fungsi javascript. Bagaimana saya bisa menghindari karakter khusus html di JS? Apakah ada API?

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

Anda dapat menggunakan fungsi jQuery.text() .

Sebagai contoh:

http://jsfiddle.net/9H6Ch/

Dari dokumentasi jQuery tentang .text()fungsi:

Kita perlu menyadari bahwa metode ini lolos dari string yang disediakan sehingga perlu diurai dengan benar dalam HTML. Untuk melakukannya, ia memanggil metode DOM .createTextNode (), tidak menafsirkan string sebagai HTML.

Versi sebelumnya dari Dokumentasi jQuery mengatakannya seperti ini ( penekanan ditambahkan ):

Kita perlu menyadari bahwa metode ini lolos dari string yang disediakan sehingga perlu diurai dengan benar dalam HTML. Untuk melakukannya, ia memanggil metode DOM .createTextNode (), yang menggantikan karakter khusus dengan setara entitas HTML mereka (seperti & lt; untuk <).

Saya rasa saya menemukan cara yang tepat untuk melakukannya ...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

Menggunakan lodash

_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

Kode sumber

Sejauh ini, ini adalah cara tercepat yang pernah saya lakukan. Plus, itu melakukan semuanya tanpa menambahkan, menghapus, atau mengubah elemen pada halaman.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

Sangat menarik untuk menemukan solusi yang lebih baik:

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

Saya tidak menguraikan >karena tidak merusak kode XML / HTML dalam hasilnya.

Berikut adalah tolok ukurnya: http://jsperf.com/regexpairs Juga, saya membuat escapefungsi universal : http://jsperf.com/regexpairs2

Cara paling ringkas dan performan untuk menampilkan teks yang tidak disandi adalah dengan menggunakan textContentproperti.

Lebih cepat daripada menggunakan innerHTML. Dan itu tanpa memperhitungkan keluar biaya overhead.

document.body.textContent = 'a <b> c </b>';

DOM Elements mendukung konversi teks ke HTML dengan menetapkan ke innerText . innerText bukan fungsi tetapi menugaskannya berfungsi seolah-olah teks itu lolos.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

Anda dapat menyandikan setiap karakter di string Anda:

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

Atau hanya menargetkan karakter utama yang perlu dikhawatirkan (&, inebreaks, <,>, "dan ') seperti:

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea>

Satu kalimat (untuk ES6 +):

var escapeHtml = s => (s + '').replace(/[&<>"']/g, m => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;',
    '"': '&quot;', "'": '&#39;'
})[m]);

Untuk versi yang lebih lama:

function escapeHtml(s) {
    return (s + '').replace(/[&<>"']/g, function (m) {
        return ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;',
            '"': '&quot;', "'": '&#39;'
        })[m];
    });
}

Datang di masalah ini saat membangun struktur DOM. Pertanyaan ini membantu saya menyelesaikannya. Saya ingin menggunakan chevron ganda sebagai pemisah jalur, tetapi menambahkan simpul teks baru secara langsung menghasilkan kode karakter yang lolos, bukan karakter itu sendiri:

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* this resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */

Jika Anda sudah menggunakan modul di aplikasi Anda, Anda bisa menggunakan modul escape-html .

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

Coba ini, menggunakan prototype.jsperpustakaan:

string.escapeHTML();

Coba demo

Saya datang dengan solusi ini.

Mari kita asumsikan bahwa kita ingin menambahkan beberapa html ke elemen dengan data yang tidak aman dari pengguna atau database.

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';

element.html(html);

Tidak aman terhadap serangan XSS. Sekarang tambahkan ini.

$(document.createElement('div')).html(unsafe).text();

Begitulah

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + $(document.createElement('div')).html(unsafe).text(); + '</p>';
html += '</div>';

element.html(html);

Bagi saya ini jauh lebih mudah daripada menggunakan .replace()dan itu akan dihapus !!! semua kemungkinan tag html (saya harap).