การหลบหนีสตริง HTML ด้วย jQuery

ไม่มีใครรู้วิธีง่ายๆในการหลีกเลี่ยง HTML จากสตริงในjQuery ? ฉันต้องสามารถส่งผ่านสตริงที่กำหนดเองและนำไปใช้อย่างถูกต้องเพื่อแสดงในหน้า HTML (ป้องกันการโจมตีด้วยการฉีด JavaScript / HTML) ฉันแน่ใจว่าเป็นไปได้ที่จะขยาย jQuery ให้ทำเช่นนี้ แต่ฉันไม่รู้เกี่ยวกับกรอบในขณะนี้เพื่อให้บรรลุนี้

เนื่องจากคุณใช้jQueryคุณสามารถตั้งค่าtextคุณสมบัติขององค์ประกอบได้:

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

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"

ที่มา: http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

หากคุณกำลังหลบหนีสำหรับ HTML มีเพียงสามที่ฉันสามารถคิดว่าจะมีความจำเป็นจริงๆ:

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

ทั้งนี้ขึ้นอยู่กับกรณีการใช้งานของคุณคุณยังอาจจำเป็นต้องทำสิ่งที่ต้องการที่จะ" "หากรายการมีขนาดใหญ่พอฉันจะใช้อาร์เรย์:

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() จะยกเว้นเฉพาะ URL เท่านั้นไม่ใช่ HTML

ง่ายพอที่จะใช้ขีดเส้นใต้:

_.escape(string) 

ขีดเป็นไลบรารียูทิลิตี้ที่มีคุณสมบัติมากมายที่ Native js ไม่มีให้ นอกจากนี้ยังมีlodashซึ่งเป็น API เดียวกับขีดล่าง แต่ถูกเขียนใหม่เพื่อให้มีประสิทธิภาพมากขึ้น

ฉันเขียนฟังก์ชั่นเล็ก ๆ ซึ่งทำสิ่งนี้ มันหนี", &, <และ>( แต่มักนั่นคือทั้งหมดที่คุณต้องการอยู่แล้ว) มันมีความสง่างามกว่าเล็กน้อยจากนั้นโซลูชันที่นำเสนอก่อนหน้านี้จะใช้วิธีเดียว .replace()ในการทำ Conversion ทั้งหมด ( แก้ไข 2:ความซับซ้อนของรหัสที่ลดลงทำให้ฟังก์ชั่นมีขนาดเล็กลงและน้อยลงหากคุณสงสัยเกี่ยวกับรหัสต้นฉบับดูที่ส่วนท้ายของคำตอบนี้)

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

นี่คือ Javascript ธรรมดาไม่มีการใช้ jQuery

หลบหนี/และ'เกินไป

แก้ไขเพื่อตอบสนองต่อความคิดเห็นของmklement

ฟังก์ชั่นด้านบนสามารถขยายได้อย่างง่ายดายเพื่อรวมอักขระใด ๆ ในการระบุตัวละครที่จะหลบหนีให้มากขึ้นเพียงแค่ใส่ทั้งสองในคลาสตัวละครในนิพจน์ปกติ (เช่นภายใน/[...]/g) และเป็นรายการในchrวัตถุ ( แก้ไข 2:ย่อฟังก์ชั่นนี้ด้วยวิธีเดียวกัน)

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

โปรดสังเกตการใช้'apostrophe ด้านบน(เอนทิตีสัญลักษณ์'อาจถูกใช้แทน - ถูกกำหนดใน XML แต่เดิมไม่รวมอยู่ในข้อมูลจำเพาะ HTML และเบราว์เซอร์ทั้งหมดอาจไม่รองรับดังนั้นโปรดดู: บทความ Wikipedia เกี่ยวกับการเข้ารหัสอักขระ HTML ) ฉันยังจำการอ่านบางที่ว่าการใช้หน่วยงานทศนิยมได้รับการสนับสนุนอย่างกว้างขวางมากกว่าการใช้เลขฐานสิบหก แต่ฉันไม่สามารถหาแหล่งที่มาได้ในขณะนี้ (และไม่สามารถมีเบราว์เซอร์จำนวนมากที่ไม่สนับสนุนเอนทิตีเลขฐานสิบหก)

หมายเหตุ: การเพิ่ม/และ'ไปยังรายการของอักขระที่ใช้ Escape นั้นไม่ใช่สิ่งที่มีประโยชน์ทั้งหมดเนื่องจากไม่มีความหมายพิเศษใน HTML และไม่จำเป็นต้องใช้ Escape

escapeHtmlฟังก์ชั่นดั้งเดิม

แก้ไข 2:ฟังก์ชั่นเดิมใช้ตัวแปร ( chr) เพื่อเก็บวัตถุที่จำเป็นสำหรับการ.replace()โทรกลับ ตัวแปรนี้ต้องการฟังก์ชันที่ไม่ระบุชื่อพิเศษเพื่อกำหนดขอบเขตทำให้ฟังก์ชัน (โดยไม่จำเป็น) ใหญ่ขึ้นและซับซ้อนขึ้นเล็กน้อย

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

ฉันยังไม่ได้ทดสอบเวอร์ชันใดในสองเวอร์ชันที่เร็วกว่า ถ้าเป็นเช่นนั้นคุณสามารถเพิ่มข้อมูลและลิงค์เกี่ยวกับมันได้ที่นี่

ฉันรู้ว่าฉันมางานปาร์ตี้ช้าแค่ไหน แต่ฉันมีทางออกที่ง่ายมากที่ไม่ต้องใช้ jQuery

escaped = new Option(unescaped).innerHTML;

แก้ไข: นี่ไม่ได้หนีคำพูด กรณีเดียวที่ต้องหลีกเลี่ยงการเสนอราคาคือถ้าเนื้อหาจะถูกวางแบบอินไลน์ไปยังแอตทริบิวต์ภายในสตริง HTML มันยากสำหรับฉันที่จะจินตนาการถึงกรณีที่การทำเช่นนี้จะเป็นการออกแบบที่ดี

แก้ไข 3: สำหรับวิธีที่เร็วที่สุดตรวจสอบคำตอบข้างต้นจาก Saram อันนี้สั้นที่สุด

นี่คือฟังก์ชัน JavaScript ที่ชัดเจนและชัดเจน มันจะหนีจากข้อความเช่น "<<น้อยมาก" ไปยัง "ไม่กี่ & lt; หลาย"

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

หลังจากการทดสอบครั้งล่าสุดฉันสามารถแนะนำวิธีแก้ปัญหาnative javaScript (DOM) ที่เข้ากันได้กับเบราว์เซอร์ได้อย่างรวดเร็วและสมบูรณ์แบบ:

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

หากคุณทำซ้ำหลาย ๆ ครั้งคุณสามารถทำได้ด้วยตัวแปรที่เตรียมไว้ครั้งเดียว:

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

ดูการเปรียบเทียบประสิทธิภาพสุดท้ายของฉัน( คำถามสแต็ค )

ลองUnderscore.string lib มันใช้งานได้กับ jQuery

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

เอาท์พุท:

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

ฉันได้ปรับปรุงตัวอย่าง mustache.js การเพิ่มescapeHTML()วิธีการไปยังวัตถุสตริง

var __entityMap = {
    "&": "&",
    "<": "&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()

escape()และunescape()มีวัตถุประสงค์เพื่อเข้ารหัส / ถอดรหัสสตริงสำหรับ URL ไม่ใช่ HTML

ที่จริงแล้วฉันใช้ตัวอย่างต่อไปนี้เพื่อทำเคล็ดลับที่ไม่ต้องการกรอบใด ๆ :

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

หากคุณมี underscore.js ให้ใช้_.escape(มีประสิทธิภาพมากกว่าวิธี jQuery ที่โพสต์ด้านบน):

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

หากคุณกำลังจะไปเส้นทาง regex มีข้อผิดพลาดในตัวอย่างของ 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]]);
}

นี่เป็นตัวอย่างที่ปลอดภัยที่ดี ...

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

คุณสามารถทำได้ด้วยวานิลลา js

เพียงเพิ่มเอกสารข้อความในโหนด มันจะถูกเบราว์เซอร์หลบหนี

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

ไม่มีตัวแปรส่วนกลาง, การเพิ่มประสิทธิภาพหน่วยความจำบางส่วน การใช้งาน:

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

ผลลัพธ์คือ:

"some<tag>and&symbol©"

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>

ตัวอย่างการหลีกเลี่ยง 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;"

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

ทำงานเหมือนจับใจ

คำตอบนี้ให้ jQuery และวิธีการ JS ปกติ แต่จะสั้นที่สุดโดยไม่ใช้ DOM:

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

สตริงที่หนี: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

หากช่องว่างที่ถูกรบกวนนั้นรบกวนคุณให้ลอง:

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

สตริงที่หนี: It%27s %3E 20%25 less complicated this way.

แต่น่าเสียดายที่escape()ฟังก์ชั่นได้รับการคัดค้านในรุ่น 1.5 encodeURI()หรือencodeURIComponent()เป็นทางเลือก แต่พวกเขาไม่สนใจ'ดังนั้นรหัสบรรทัดสุดท้ายจะเปลี่ยนเป็น:

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

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

ซับ ES6 หนึ่งสำหรับการแก้ปัญหาจาก mustache.js

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

หากคุณกำลังบันทึกข้อมูลนี้ในฐานข้อมูลผิดที่จะหลบหนี HTML โดยใช้สคริปต์ฝั่งไคลเอ็นต์สิ่งนี้ควรทำในเซิร์ฟเวอร์ มิฉะนั้นจะง่ายต่อการข้ามการป้องกัน XSS ของคุณ

เพื่อให้จุดของฉันชัดเจนนี่คือตัวอย่างโดยใช้หนึ่งในคำตอบ:

สมมติว่าคุณกำลังใช้ฟังก์ชัน escapeHtml เพื่อหลีกเลี่ยง Html จากความคิดเห็นในบล็อกของคุณแล้วโพสต์ลงในเซิร์ฟเวอร์ของคุณ

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

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

ผู้ใช้สามารถ:

• แก้ไขพารามิเตอร์คำขอ POST และแทนที่ความคิดเห็นด้วยรหัสจาวาสคริปต์
• เขียนทับฟังก์ชัน escapeHtml โดยใช้คอนโซลของเบราว์เซอร์

หากผู้ใช้วางตัวอย่างนี้ในคอนโซลมันจะผ่านการตรวจสอบ XSS:

function escapeHtml(string){
   return string
}

โซลูชันทั้งหมดไม่มีประโยชน์หากคุณไม่ป้องกันการหลบหนีเช่นโซลูชันส่วนใหญ่จะหนี&ไป&เรื่อย ๆ

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