क्या मैं जावास्क्रिप्ट में HTML विशेष वर्णों से बच सकता हूँ?

Question

मैं जावास्क्रिप्ट फ़ंक्शन द्वारा HTML को एक पाठ प्रदर्शित करना चाहता हूं। मैं जेएस में HTML विशेष वर्ण कैसे बच सकता हूं? क्या कोई एपीआई है?

Comments

यह डुप्लिकेट नहीं है, क्योंकि यह सवाल jQuery के बारे में नहीं पूछता है। मुझे इसमें केवल एक ही दिलचस्पी है, क्योंकि मैं jQuery का उपयोग नहीं करता ...

— lvella

जावास्क्रिप्ट में समतुल्य HtmlSpecialChars के

— बेर्गी

Answer 1

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

Comments

क्यों "& # 039;" और नहीं "& apos;" ?

— sereda

क्योंकि: stackoverflow.com/questions/2083754/…

— श्रेयांस

मुझे लगता है कि replace()कॉल में नियमित अभिव्यक्ति अनावश्यक हैं। सादा पुराने एकल चरित्र तार बस के रूप में अच्छी तरह से करना होगा।

— जैमिक्स

@jamix आप कच्चे तार के साथ एक वैश्विक प्रतिस्थापन नहीं कर सकते, जबकि आधुनिक ब्राउज़र इंजन सरल नियमित अभिव्यक्ति को बहुत अच्छे से अनुकूलित करते हैं।

— ब्योर्ड

क्या कोई मानक API है या यह एकमात्र तरीका है?

— सुनील गर्ग

Answer 2

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

Comments

यहां काम करना लेकिन मेरे लिए ऑफ़लाइन नहीं ब्राउज़र में

Answer 3

आप jQuery के .text()फ़ंक्शन का उपयोग कर सकते हैं ।

उदाहरण के लिए:

http://jsfiddle.net/9H6Ch/

.text()फ़ंक्शन के संबंध में jQuery के दस्तावेज़ से :

हमें यह जानने की आवश्यकता है कि यह विधि आवश्यक रूप से प्रदान की गई स्ट्रिंग से बच जाती है ताकि यह HTML में सही ढंग से प्रस्तुत हो। ऐसा करने के लिए, यह DOM विधि .createTextNode () कहता है, स्ट्रिंग को HTML के रूप में व्याख्या नहीं करता है।

JQuery के प्रलेखन के पिछले संस्करणों ने इसे इस तरह से शब्द दिया ( जोर दिया ):

हमें यह जानने की आवश्यकता है कि यह विधि आवश्यक रूप से प्रदान की गई स्ट्रिंग से बच जाती है ताकि यह HTML में सही ढंग से प्रस्तुत हो। ऐसा करने के लिए, यह DOM विधि .createTextNode () को कॉल करता है, जो विशेष अक्षर को उनके HTML इकाई समकक्षों (जैसे & lt; <के लिए; ) से प्रतिस्थापित करता है।

Comments

तुम भी एक ताजा तत्व पर इसका इस्तेमाल कर सकते हैं अगर आप सिर्फ इस तरह से बदलना चाहते हैं: const str = "foo<>'\"&"; $('<div>').text(str).html()पैदावारfoo<>'"&

— amoebe

Answer 4

मुझे लगता है कि मुझे इसे करने का उचित तरीका मिला ...

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

Comments

मैंने आज HTML के बारे में कुछ नया सीखा। w3schools.com/jsref/met_document_createtextnode.asp ।

— सेलोरियो

ध्यान रखें कि यदि आप इसे इस तरह एक्सेस करने की कोशिश करते हैं तो टेक्स्ट नोड की सामग्री बच नहीं जाती है:document.createTextNode("<script>alert('Attack!')</script>").textContent

— maechler

यह सही तरीका है अगर आप सब कर रहे हैं पाठ सेट कर रहा है। यह भी textContent है, लेकिन जाहिर है यह अच्छी तरह से समर्थित नहीं है। यह तब भी काम नहीं करेगा जब आप कुछ html के कुछ हिस्सों के साथ एक स्ट्रिंग बना रहे हैं, तो आपको अभी भी बच निकलने की आवश्यकता है।

— jgmjgm

Answer 5

लॉश का उपयोग करना

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

सोर्स कोड

Comments

इसके विपरीत क्या है? फ़ंक्शन का नाम जो इसके विपरीत करता है?

— सुनील गर्ग

अंडरस्कोर में समान कार्य: underscorejs.org/#escape & underscorejs.org/#unescape

— juanmirocks

Answer 6

यह, अब तक, सबसे तेज़ तरीका मैंने इसे किया है। साथ ही, यह पेज पर तत्वों को जोड़ने, हटाने या बदलने के बिना करता है।

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

Comments

चेतावनी: यह उद्धरणों से बच नहीं सकता है ताकि आप HTML कोड में विशेषता मानों के अंदर आउटपुट का उपयोग न कर सकें। जैसे var divCode = '<div data-title="' + escapeHTML('Jerry "Bull" Winston') + '">Div content</div>'अवैध HTML निकलेगा!

— izogfif

Answer 7

एक बेहतर समाधान खोजना दिलचस्प था:

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

Comments

यह देखना दिलचस्प है कि स्विच का उपयोग करना नक्शे की तुलना में काफी तेज है। मुझे इसकी उम्मीद नहीं थी! साझा करने के लिए धन्यवाद!

— पीटर टी।

कई और अधिक यूनिकोड वर्ण हैं जिनसे आप संभव कोड और खाते में ले सकते हैं। मैं इस मैनुअल विधि की सिफारिश बिल्कुल नहीं करूंगा।

— vsync

आप मल्टी-बाइट पात्रों से क्यों बचेंगे? बस हर जगह UTF-8 का उपयोग करें।

— नियोनिट

लंघन> संभावित रूप से कोड को तोड़ सकता है। आपको ध्यान रखना होगा कि <> अंदर भी html है। उस स्थिति में लंघन> टूट जाएगा। यदि आप केवल टैग के बीच से बच रहे हैं तो आपको शायद केवल भागने की आवश्यकता है <और &

— jgmjgm

Answer 8

अनएन्कोडेड टेक्स्ट को प्रदर्शित करने के लिए सबसे संक्षिप्त और निष्पादित तरीका उपयोग करना है textContent संपत्ति है।

उपयोग करने की तुलना में तेज़innerHTML । और वह ओवरहेड से बचने के लिए ध्यान में रखे बिना है।

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

Comments

@ZzZombo, यह पूरी तरह से सामान्य है कि यह शैली और स्क्रिप्ट टैग के साथ काम नहीं करता है। जब आप उनमें सामग्री जोड़ते हैं, तो आप कोड जोड़ते हैं , पाठ नहीं , इस मामले में इनर HTML का उपयोग करें। इसके अलावा, आपको इससे बचने की आवश्यकता नहीं है, ये दो विशेष टैग हैं जिन्हें HTML के रूप में पार्स नहीं किया गया है। पार्स करते समय, उनकी सामग्री को पाठ के रूप में माना जाता है जब तक कि समापन अनुक्रम </पूरा नहीं हो जाता।

— यूजर

Answer 9

डोम एलिमेंट्स इनर टेक्स्ट को असाइन करके टेक्स्ट को HTML में बदलने का समर्थन करते हैं । इनर टेक्स्ट एक फ़ंक्शन नहीं है, लेकिन इसे असाइन करने से यह काम करता है जैसे कि टेक्स्ट बच गए थे।

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

Comments

कम से कम क्रोम में मल्टीलाइन टेक्स्ट असाइन करने <br>से नईलाइन्स के स्थान पर एलिमेंट्स जुड़ते हैं, जो कुछ तत्वों को तोड़ सकते हैं, जैसे स्टाइल या स्क्रिप्ट। createTextNodeइस समस्या से ग्रस्त नहीं है।

— ZZZombo

innerTextकुछ विरासत / कल्पना मुद्दे हैं। उपयोग करने के लिए बेहतर है textContent।

— रॉय टिंकर

Answer 10

आप अपने स्ट्रिंग में हर कैरेक्टर को एनकोड कर सकते हैं:

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>

Comments

अपने स्वयं के भागने के कार्य को लिखना आमतौर पर एक बुरा विचार है। इस संबंध में अन्य उत्तर बेहतर हैं।

— जॅनिस

Answer 11

एक-लाइनर (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];
    });
}

Answer 12

डोम संरचना बनाते समय इस मुद्दे पर आया था। इस प्रश्न ने मुझे इसे हल करने में मदद की। मैं एक पथ विभाजक के रूप में एक डबल शेवरॉन का उपयोग करना चाहता था, लेकिन एक नए पाठ नोड को सीधे जोड़ने से चरित्र के बजाय बचा हुआ चरित्र कोड दिखाई दे रहा था:

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

Answer 13

यदि आप पहले से ही अपने ऐप में मॉड्यूल का उपयोग करते हैं, तो आप एस्केप-html मॉड्यूल का उपयोग कर सकते हैं ।

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

Answer 14

prototype.jsपुस्तकालय का उपयोग करके यह कोशिश करें :

string.escapeHTML();

एक डेमो की कोशिश करो

Comments

इसके लिए "प्रोटोटाइप.जेएस" लाइब्रेरी की आवश्यकता होती है, जो डेमो से तुरंत स्पष्ट नहीं थी। :(

— ऑडीओडायड

Answer 15

मैं इस समाधान के साथ आया था।

मान लेते हैं कि हम उपयोगकर्ता या डेटाबेस से असुरक्षित डेटा के साथ तत्व में कुछ 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 टैग (मुझे आशा है)।

Comments

यह खतरनाक विचार है, यह HTML के रूप में असुरक्षित HTML स्ट्रिंग को पार्स करता है, अगर तत्व DOM से जुड़ा हुआ था तो यह बाहर निकल जाएगा। इसके बजाय .innerText का उपयोग करें।

— तेक्नोपॉल

यह सुरक्षित नहीं है। यह धर्मान्तरित <script>में <script>।

— fgb