ฉันสามารถใช้ตัวอักษรพิเศษ HTML ในจาวาสคริปต์ได้หรือไม่?

ฉันต้องการที่จะแสดงข้อความเป็น HTML โดยฟังก์ชั่นจาวาสคริปต์ ฉันจะหลีกเลี่ยงตัวอักษรพิเศษ html ใน JS ได้อย่างไร มี API หรือไม่

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

คุณสามารถใช้ฟังก์ชั่นของ jQuery.text()ฟังก์ชั่น

ตัวอย่างเช่น:

http://jsfiddle.net/9H6Ch/

จากเอกสาร jQuery เกี่ยวกับ.text()ฟังก์ชัน:

เราจำเป็นต้องทราบว่าวิธีนี้จะหนีจากสตริงที่จัดให้ตามที่จำเป็นเพื่อให้สามารถแสดงผลได้อย่างถูกต้องใน HTML หากต้องการทำเช่นนั้นจะเรียกเมธอด DOM .createTextNode () ไม่ตีความสตริงเป็น HTML

jQuery Documentation เวอร์ชันก่อนหน้านี้ใช้คำนี้ ( เน้นการเพิ่ม ):

เราจำเป็นต้องทราบว่าวิธีนี้จะหนีจากสตริงที่จัดให้ตามที่จำเป็นเพื่อให้สามารถแสดงผลได้อย่างถูกต้องใน HTML หากต้องการทำเช่นนั้นจะเรียกใช้เมธอด DOM .createTextNode () ซึ่งจะแทนที่อักขระพิเศษด้วยเอนทิตี HTML ที่เทียบเท่า (เช่น & lt; สำหรับ <)

ฉันคิดว่าฉันพบวิธีที่เหมาะสมในการทำ ...

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

ใช้Lodash

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

รหัสแหล่งที่มา

นี่คือวิธีที่เร็วที่สุดที่ฉันได้เห็นมันทำไปแล้ว นอกจากนี้ยังทำได้โดยไม่ต้องเพิ่มลบหรือเปลี่ยนแปลงองค์ประกอบในหน้า

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

มันน่าสนใจที่จะหาทางออกที่ดีกว่า:

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

ฉันไม่แยกวิเคราะห์>เพราะไม่ทำลายโค้ด XML / HTML ในผลลัพธ์

นี่คือมาตรฐาน: http://jsperf.com/regexpairs นอกจากนี้ฉันได้สร้างescapeฟังก์ชั่นสากล: http://jsperf.com/regexpairs2

วิธีที่รัดกุมและมีประสิทธิภาพที่สุดในการแสดงข้อความที่ไม่ได้เข้ารหัสคือการใช้textContentคุณสมบัติ

ได้เร็วขึ้นinnerHTMLกว่าการใช้ และนั่นคือโดยไม่คำนึงถึงค่าใช้จ่ายในการหลบหนี

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

สนับสนุน DOM องค์ประกอบการแปลงข้อความเป็น HTML โดยมอบหมายให้innerText innerText ไม่ใช่ฟังก์ชั่น แต่การกำหนดให้มันทำงานเหมือนกับว่าข้อความถูกหลบหนี

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

คุณสามารถเข้ารหัสอักขระทุกตัวในสตริงของคุณ:

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

หรือเพียงกำหนดเป้าหมายตัวละครหลักเพื่อกังวลเกี่ยวกับ (&, inebreaks, <,>, "และ ') เช่น:

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>

หนึ่งซับ (สำหรับ ES6 +):

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

สำหรับรุ่นเก่า:

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

มาข้ามปัญหานี้เมื่อสร้างโครงสร้าง DOM คำถามนี้ช่วยฉันแก้ปัญหา ฉันต้องการใช้เครื่องหมายบั้งคู่เป็นตัวคั่นพา ธ แต่การผนวกโหนดข้อความใหม่ส่งผลโดยตรงในการแสดงรหัสอักขระที่หลบหนีมากกว่าตัวอักขระ:

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

หากคุณใช้โมดูลในแอปของคุณอยู่แล้วคุณสามารถใช้โมดูล escape-html

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

ลองสิ่งนี้โดยใช้prototype.jsห้องสมุด:

string.escapeHTML();

ลองตัวอย่าง

ฉันคิดวิธีแก้ปัญหานี้

สมมติว่าเราต้องการเพิ่ม html ลงในองค์ประกอบด้วยข้อมูลที่ไม่ปลอดภัยจากผู้ใช้หรือฐานข้อมูล

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

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

element.html(html);

ไม่ปลอดภัยต่อการโจมตี XSS ตอนนี้เพิ่มสิ่งนี้

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

ดังนั้นมันจึงเป็น

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

สำหรับฉันมันง่ายกว่าการใช้.replace()และมันจะลบ !!! แท็ก html ที่เป็นไปได้ทั้งหมด (ฉันหวังว่า)