জাভাস্ক্রিপ্টে ইউনেস্কেপ এইচটিএমএল সত্ত্বা?


177

আমার কাছে কিছু জাভাস্ক্রিপ্ট কোড রয়েছে যা একটি এক্সএমএল-আরপিসি ব্যাকএন্ডের সাথে যোগাযোগ করে। এক্সএমএল-আরপিসি ফর্মটির স্ট্রিং প্রদান করে:

<img src='myimage.jpg'>

যাইহোক, যখন আমি জাভাস্ক্রিপ্টটি এইচটিএমএলতে স্ট্রিংগুলি সন্নিবেশ করানোর জন্য ব্যবহার করি তখন সেগুলি আক্ষরিক অর্থে রেন্ডার হয়। আমি কোনও চিত্র দেখছি না, আমি আক্ষরিকভাবে স্ট্রিংটি দেখছি:

<img src='myimage.jpg'>

আমার অনুমান যে এইচটিএমএল XML-RPC চ্যানেল ধরে পালানো হচ্ছে।

আমি কীভাবে জাভাস্ক্রিপ্টে স্ট্রিংটি অনস্কেপ করতে পারি? আমি এই পৃষ্ঠায় কৌশলগুলি চেষ্টা করেছি, ব্যর্থ: http://paulschreiber.com/blog/2008/09/20/javascript-how-to-unescape-html-entities/

সমস্যাটি নির্ণয়ের অন্যান্য উপায়গুলি কী কী?


1
: এই চেষ্টা stackoverflow.com/questions/4480757/...
XP1

উত্তর:


177

সম্পাদনা: আপনার যেমন ডোমপার্সার এপিআই ব্যবহার করা উচিত ওয়ালাদিমিরের পরামর্শ অনুসারে , পোস্টটি ফাংশনটি সুরক্ষিত দুর্বলতার পরিচয় করিয়ে দিয়ে আমি আমার পূর্ববর্তী উত্তরটি সম্পাদনা করেছি।

নিম্নলিখিত স্নিপেটটি একটি ছোট পরিবর্তন সহ পুরানো উত্তরের কোড: একটি textareaপরিবর্তে divএক্স ব্যবহার করা এক্সএসএস দুর্বলতা হ্রাস করে, তবে এটি এখনও আই 9 এবং ফায়ারফক্সে সমস্যাযুক্ত।

function htmlDecode(input){
  var e = document.createElement('textarea');
  e.innerHTML = input;
  // handle case of empty input
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

htmlDecode("&lt;img src='myimage.jpg'&gt;"); 
// returns "<img src='myimage.jpg'>"

মূলত আমি প্রোগ্রামের ভিত্তিতে একটি ডিওএম উপাদান তৈরি করি, এনকোডড এইচটিএমএলটিকে তার অভ্যন্তরীণ এইচটিএমএল এনেস করি এবং অভ্যন্তরীণ এইচটিএমএল সন্নিবেশে তৈরি নেক্সট নোড থেকে নোডভ্যালু পুনরুদ্ধার করি। যেহেতু এটি কেবল একটি উপাদান তৈরি করে তবে কখনও এটি যুক্ত করে না, কোনও সাইটের এইচটিএমএল সংশোধন করা হয় না।

এটি ক্রস ব্রাউজারে (পুরানো ব্রাউজারগুলি সহ) কাজ করবে এবং সমস্ত এইচটিএমএল চরিত্র সত্তা গ্রহণ করবে ।

সম্পাদনা: এই কোডটির পুরাতন সংস্করণটি ফাঁকা ইনপুট সহ আইই তে কাজ করেনি, যেমনটি এখানে জেএসফিডেলে প্রমাণিত হয়েছে (আইই তে দেখুন)। উপরের সংস্করণটি সমস্ত ইনপুটগুলির সাথে কাজ করে।

আপডেট: প্রদর্শিত হবে এটি বড় স্ট্রিংয়ের সাথে কাজ করে না এবং এটি সুরক্ষার দুর্বলতার পরিচয়ও দেয় , মন্তব্যগুলি দেখুন।


বুঝতে পেরেছি, আপনি 'এ পরিবর্তিত হয়েছেন, সুতরাং আমার মন্তব্যটি মুছে ফেলা যাক, ধন্যবাদ, এটির দুর্দান্ত কাজ, +1
আপনি

1
@ এসমার্ক: &apos;এইচটিএমএল 4 সংস্থার নয়, এ কারণেই! w3.org/TR/html4/sgml/entities.html fishbowl.pastiche.org/2003/07/01/the_curse_of_apos
, CMS

2
এই পদ্ধতির দুর্বল সুরক্ষা সম্পর্কে @ কেন্ডারের নোটও দেখুন।
জোসেফ তুরিয়ান

2
); আমার নোট দরিদ্র পরীক্ষামূলক তিনি কি সম্পর্কে @kender দেখুন
Roatin Marth

24
এই ফাংশনটি একটি সুরক্ষা বিপত্তি, উপাদানটি ডিওমে যুক্ত না হওয়া সত্ত্বেও জাভাস্ক্রিপ্ট কোড চলবে। সুতরাং ইনপুট স্ট্রিংটি বিশ্বাসযোগ্য হলে এটি ব্যবহার করার জন্য কেবলমাত্র কিছু। আমি আমার নিজের উত্তরটি ইস্যুটি ব্যাখ্যা করে এবং একটি সুরক্ষিত সমাধান সরবরাহ করেছি। পার্শ্ব-প্রতিক্রিয়া হিসাবে, একাধিক পাঠ্য নোড উপস্থিত থাকলে ফলাফল কেটে দেওয়া হচ্ছে না।
ও্লাদিমির পালান্ট

375

এখানে প্রদত্ত বেশিরভাগ উত্তরের একটি বিশাল অসুবিধা রয়েছে: আপনি যে স্ট্রিংকে রূপান্তর করতে চেষ্টা করছেন তা যদি বিশ্বাসযোগ্য না হয় তবে আপনি ক্রস-সাইট স্ক্রিপ্টিং (এক্সএসএস) দুর্বলতার সাথে শেষ করবেন । গৃহীত উত্তরের ক্রিয়াকলাপের জন্য , নিম্নলিখিতটি বিবেচনা করুন:

htmlDecode("<img src='dummy' onerror='alert(/xss/)'>");

এখানে স্ট্রিংটিতে একটি অবিচ্ছিন্ন এইচটিএমএল ট্যাগ রয়েছে, সুতরাং কোনও কিছু ডিকড করার পরিবর্তে htmlDecodeফাংশনটি আসলে স্ট্রিংয়ের ভিতরে নির্দিষ্ট জাভাস্ক্রিপ্ট কোড চালাবে।

এটি সমস্ত আধুনিক ব্রাউজারগুলিতে সমর্থিত ডিওএমপারসার ব্যবহার করে এড়ানো যায় :

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

console.log(  htmlDecode("&lt;img src='myimage.jpg'&gt;")  )    
// "<img src='myimage.jpg'>"

console.log(  htmlDecode("<img src='dummy' onerror='alert(/xss/)'>")  )  
// ""

এই ফাংশনটি কোনও জাভাস্ক্রিপ্ট কোডকে পার্শ্ব-প্রতিক্রিয়া হিসাবে চালিত না করার গ্যারান্টিযুক্ত। যে কোনও এইচটিএমএল ট্যাগ উপেক্ষা করা হবে, কেবল পাঠ্য সামগ্রীই ফিরে আসবে।

সামঞ্জস্যতা নোট : HTML পার্সিংয়ের DOMParserজন্য কমপক্ষে ক্রোম 30, ফায়ারফক্স 12, অপেরা 17, ইন্টারনেট এক্সপ্লোরার 10, সাফারি 7.1 বা মাইক্রোসফ্ট এজ প্রয়োজন। সুতরাং সমর্থন ব্যতীত সমস্ত ব্রাউজারগুলি তাদের ইওল পেরিয়ে যায় এবং 2017 পর্যন্ত কেবলমাত্র বুনো মাঝে মাঝে মাঝে দেখা যেতে পারে এটি পুরানো ইন্টারনেট এক্সপ্লোরার এবং সাফারি সংস্করণ (সাধারণত এগুলি এখনও বিরক্ত করার মতো যথেষ্ট নয়)।


19
আমি মনে করি এই উত্তরটি সেরা কারণ এটি এক্সএসএস দুর্বলতার কথা উল্লেখ করেছে।
Ван

2
মনে রাখবেন যে (আপনার রেফারেন্স অনুসারে) ফায়ারফক্স 12.0 এর আগে DOMParserসমর্থন করে "text/html"নি এবং ব্রাউজারগুলির এমন কিছু আধুনিক সংস্করণ রয়েছে যা এমনকি সমর্থন করে নাDOMParser.prototype.parseFromString() । আপনার রেফারেন্স অনুসারে, DOMParserএটি এখনও একটি পরীক্ষামূলক প্রযুক্তি এবং স্ট্যান্ড-ইনগুলি সেই innerHTMLসম্পত্তিটি ব্যবহার করে যা আপনি আমার পদ্ধতির প্রতিক্রিয়া হিসাবেও উল্লেখ করেছেন, এই এক্সএসএস দুর্বলতা রয়েছে (যা ব্রাউজার বিক্রেতাদের দ্বারা স্থির করা উচিত)।
পয়েন্টইয়ারস

4
@ প্রস্তাবিতরা: কে ফায়ারফক্স 12 কে যত্নশীল করে 2016? সমস্যাযুক্তগুলি হ'ল 9.0 অবধি ইন্টারনেট এক্সপ্লোরার এবং 7.0 পর্যন্ত সাফারি। যদি কেউ তাদের সমর্থন না করা সামর্থ্য করে (যা আশা করি শীঘ্রই সকলেই হবে) তবে DOMParser সেরা পছন্দ। যদি তা না হয় - হ্যাঁ, সত্তাগুলি সক্রিয়করণ কেবল একটি বিকল্প হবে।
ও্লাদিমির প্যালান্ট

4
@ প্রস্তাবিতগুলি: <script>ট্যাগগুলি কার্যকর করা হচ্ছে না এটি কোনও সুরক্ষা ব্যবস্থা নয়, এই নিয়মটি কেবল জটিল সময় সম্পর্কিত বিষয়গুলি এড়িয়ে যায় যদি সেটিংটি innerHTMLপার্শ্ব-প্রতিক্রিয়া হিসাবে সিঙ্ক্রোনাস স্ক্রিপ্টগুলি চালাতে পারে। এইচটিএমএল কোড স্যানিটাইজ করা একটি জটিল বিষয় এবং innerHTMLএমনকি চেষ্টা করেও না - কারণ ইতিমধ্যে ওয়েব পৃষ্ঠাটি ইনলাইন ইভেন্ট হ্যান্ডলারগুলি সেট করার পরিকল্পনা করতে পারে set এটি কেবল অনিরাপদ ডেটা, সম্পূর্ণ বন্ধের উদ্দেশ্যে তৈরি কোনও ব্যবস্থা নয়।
ও্লাদিমির প্যালান্ট

1
@ ИльяЗеленько: আপনি কি এই কোডটি একটি টান লুপে ব্যবহার করার পরিকল্পনা করছেন বা কেন পারফরম্যান্সে গুরুত্বপূর্ণ? আপনার উত্তরটি আবার এক্সএসএসের পক্ষে ঝুঁকিপূর্ণ, এটি কি আসলেই মূল্যবান ছিল?
ও্লাদিমির প্যালান্ট

37

আপনি যদি jQuery ব্যবহার করছেন:

function htmlDecode(value){ 
  return $('<div/>').html(value).text(); 
}

অন্যথায়, স্ট্রিক্টলি সফ্টওয়্যার এর এনকোডার অবজেক্টটি ব্যবহার করুন , যা একটি দুর্দান্ত htmlDecode()ফাংশন রয়েছে।


59
এই ব্যবহারকারীর দ্বারা উত্পাদিত সামগ্রী ব্যতীত ব্যবহারকারী-উত্পাদিত সামগ্রীর জন্য (পুনরাবৃত্তি নয়) এটি ব্যবহার করবেন না । যদি মানটিতে একটি <script> ট্যাগ থাকে তবে স্ক্রিপ্টের বিষয়বস্তু কার্যকর করা হবে!
মালভোলিও

আমি সাইটে কোথাও এর জন্য লাইসেন্স পাই না। আপনি কি জানেন লাইসেন্স কি?
ট্রিগ

সোর্স শিরোনামে একটি লাইসেন্স আছে, এটি জিপিএল।
ক্রিস ফুলস্টো

6
হ্যাঁ, এই ফাংশনটি এক্সএসএসের জন্য পথ উন্মুক্ত করুন: এইচটিএমএল ডিকোড চেষ্টা করুন ("<script> সতর্কতা (12) </script> 123 & জিটি;")
ডানিস ক্রুজ

$ ('<div />') এর অর্থ কী ?
ইকো ইয়াং

13

কৌশলটি হ'ল বিশেষ এইচটিএমএল অক্ষরগুলি ডিকোড করার জন্য ব্রাউজারের শক্তিটি ব্যবহার করা, তবে ব্রাউজারটিকে ফলাফলগুলি বাস্তবায়িত করার অনুমতি দেবেন না এটি আসল এইচটিএমএল ... এই ক্রিয়াকলাপটি এনকোডড এইচটিএমএল অক্ষর সনাক্ত করতে এবং প্রতিস্থাপন করতে একটি রেজেক্স ব্যবহার করে, একটি অক্ষর একেবারে.

function unescapeHtml(html) {
    var el = document.createElement('div');
    return html.replace(/\&[#0-9a-z]+;/gi, function (enc) {
        el.innerHTML = enc;
        return el.innerText
    });
}

রেজেক্সটি কিছুটা শক্ত হয়ে মেলাতে পারে /\&#?[0-9a-z]+;/giযেহেতু # যদি কেবল তেমন 2 character অক্ষর হিসাবে উপস্থিত হয়।
TheAtomicO অপশন

এটি সেরা উত্তর। এক্সএসএস দুর্বলতা এড়ায়, এবং এইচটিএমএল ট্যাগগুলি স্ট্রিপ করে না।
এমানুয়েল

6

সিএমএসের উত্তর ঠিকঠাক কাজ করে, যদি আপনি এইচটিএমএলকে অনস্কেপ করতে চান না তবে 65536 অক্ষরের চেয়ে দীর্ঘ। কারণ তখন ক্রোমে অন্তর্নিহিত এইচটিএমএল অনেকগুলি শিশু নোডে বিভক্ত হয়ে যায়, যার প্রত্যেকটি সর্বাধিক 65536 লম্বা হয় এবং আপনাকে সেগুলি একত্রিত করতে হবে। এই ফাংশনটি খুব দীর্ঘ স্ট্রিংয়ের জন্যও কাজ করে:

function unencodeHtmlContent(escapedHtml) {
  var elem = document.createElement('div');
  elem.innerHTML = escapedHtml;
  var result = '';
  // Chrome splits innerHTML into many child nodes, each one at most 65536.
  // Whereas FF creates just one single huge child node.
  for (var i = 0; i < elem.childNodes.length; ++i) {
    result = result + elem.childNodes[i].nodeValue;
  }
  return result;
}

innerHTMLআরও তথ্যের জন্য সর্বাধিক দৈর্ঘ্যের বিষয়ে এই উত্তরটি দেখুন : https://stackoverflow.com/a/27545633/694469


3

আপনার প্রশ্নের সরাসরি প্রতিক্রিয়া নয়, তবে কি আপনার আরপিসির পক্ষে সেই কাঠামোর অভ্যন্তরে সেই চিত্রের ডেটা (আপনার উদাহরণের url) সহ কিছু কাঠামো (এটি এক্সএমএল বা জেএসওএন বা যাই হোক না কেন) ফিরিয়ে দেওয়া ভাল হবে না?

তারপরে আপনি এটি আপনার জাভাস্ক্রিপ্টে পার্স করতে পারেন এবং <img>নিজেই জাভাস্ক্রিপ্ট ব্যবহার করে তৈরি করতে পারেন।

আপনি আরপিসি থেকে যে কাঠামোটি গ্রহণ করেছেন তা দেখতে দেখতে দেখতে পারা যায়:

{"img" : ["myimage.jpg", "myimage2.jpg"]}

আপনার পৃষ্ঠায় বাহ্যিক উত্স থেকে আসে এমন একটি কোড ইনজেকশন করা যেমন খুব নিরাপদ বলে মনে হয় না, তেমনি আমার পক্ষে এটি আরও ভাল। কাউকে আপনার এক্সএমএল-আরপিসি স্ক্রিপ্ট হাইজ্যাক করে এবং এমন কিছু স্থাপন করা যা আপনি সেখানে চান না (এমনকি কিছু জাভাস্ক্রিপ্ট ...)


উপরের @ সিএমএসের পদ্ধতির কী এই সুরক্ষা ত্রুটি রয়েছে?
জোসেফ তুরিয়ান

আমি এইচটিএমএলডেকোড ফাংশনটিতে কেবল নিম্নলিখিত যুক্তিটি যাচাই করেছি: htmlDecode ("& lt; img src = 'myimage.jpg' & gt; & lt; স্ক্রিপ্ট & gt; ডকুমেন্ট.উইরাইট ('এক্সএক্সএক্সএক্সএক্সএক্সএক্স'); & lt; / স্ক্রিপ্ট & জিটি;") এবং এটি তৈরি করে <script> </script> উপাদান যা খারাপ হতে পারে im এবং আমি এখনও মনে করি পাঠ্য সন্নিবেশ করানোর পরিবর্তে কোনও কাঠামো ফিরিয়ে দেওয়া ভাল, উদাহরণস্বরূপ আপনি ত্রুটিগুলি সুন্দরভাবে পরিচালনা করতে পারেন।
কেন্ডার

1
আমি চেষ্টা করেছি htmlDecode("&lt;img src='myimage.jpg'&gt;&lt;script&gt;alert('xxxxx');&lt;/script&gt;")এবং কিছুই হয়নি। প্রত্যাশা অনুযায়ী ডিকোড করা এইচটিএমএল স্ট্রিংটি ফিরে পেয়েছি।
রোয়াতিন মার্থ

2

ক্রিস উত্তর চমৎকার & মার্জিত কিন্তু এটা বিফল হয় মান undefined । কেবল সাধারণ উন্নতি এটিকে শক্ত করে তোলে:

function htmlDecode(value) {
   return (typeof value === 'undefined') ? '' : $('<div/>').html(value).text();
}

যদি উন্নতি করে থাকে, তবে করুন:return (typeof value !== 'string') ? '' : $('<div/>').html(value).text();
SynCap

2

আপনাকে স্বাগতম ... কেবল একজন মেসেঞ্জার ... সম্পূর্ণ ক্রেডিট uscodeworld.com, নীচে লিঙ্কে যায়।

window.htmlentities = {
        /**
         * Converts a string to its html characters completely.
         *
         * @param {String} str String with unescaped HTML characters
         **/
        encode : function(str) {
            var buf = [];

            for (var i=str.length-1;i>=0;i--) {
                buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
            }

            return buf.join('');
        },
        /**
         * Converts an html characterSet into its original character.
         *
         * @param {String} str htmlSet entities
         **/
        decode : function(str) {
            return str.replace(/&#(\d+);/g, function(match, dec) {
                return String.fromCharCode(dec);
            });
        }
    };

পূর্ণ ক্রেডিট: https://ourcodeworld.com/articles/read/188/encode-and-decode-html-entities- using-pure- javascript


2

আমি এখন অবধি চেষ্টা করা এটিই সর্বাধিক বিস্তৃত সমাধান:

const STANDARD_HTML_ENTITIES = {
    nbsp: String.fromCharCode(160),
    amp: "&",
    quot: '"',
    lt: "<",
    gt: ">"
};

const replaceHtmlEntities = plainTextString => {
    return plainTextString
        .replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec))
        .replace(
            /&(nbsp|amp|quot|lt|gt);/g,
            (a, b) => STANDARD_HTML_ENTITIES[b]
        );
};

"সবচেয়ে ব্যাপক"? আপনি কি এটি বাস্তবে বিস্তৃত টেস্ট স্যুটটির বিরুদ্ধে চালানোর চেষ্টা করেছেন ?
ড্যান ড্যাসকলেসকু

1

আমি পুরোপুরি না পারলে এই ফাংশনটি পুরোপুরি না হলেও সুন্দর করে তোলার পক্ষে যথেষ্ট পাগল ছিলাম:

function removeEncoding(string) {
    return string.replace(/&Agrave;/g, "À").replace(/&Aacute;/g, "Á").replace(/&Acirc;/g, "Â").replace(/&Atilde;/g, "Ã").replace(/&Auml;/g, "Ä").replace(/&Aring;/g, "Å").replace(/&agrave;/g, "à").replace(/&acirc;/g, "â").replace(/&atilde;/g, "ã").replace(/&auml;/g, "ä").replace(/&aring;/g, "å").replace(/&AElig;/g, "Æ").replace(/&aelig;/g, "æ").replace(/&szlig;/g, "ß").replace(/&Ccedil;/g, "Ç").replace(/&ccedil;/g, "ç").replace(/&Egrave;/g, "È").replace(/&Eacute;/g, "É").replace(/&Ecirc;/g, "Ê").replace(/&Euml;/g, "Ë").replace(/&egrave;/g, "è").replace(/&eacute;/g, "é").replace(/&ecirc;/g, "ê").replace(/&euml;/g, "ë").replace(/&#131;/g, "ƒ").replace(/&Igrave;/g, "Ì").replace(/&Iacute;/g, "Í").replace(/&Icirc;/g, "Î").replace(/&Iuml;/g, "Ï").replace(/&igrave;/g, "ì").replace(/&iacute;/g, "í").replace(/&icirc;/g, "î").replace(/&iuml;/g, "ï").replace(/&Ntilde;/g, "Ñ").replace(/&ntilde;/g, "ñ").replace(/&Ograve;/g, "Ò").replace(/&Oacute;/g, "Ó").replace(/&Ocirc;/g, "Ô").replace(/&Otilde;/g, "Õ").replace(/&Ouml;/g, "Ö").replace(/&ograve;/g, "ò").replace(/&oacute;/g, "ó").replace(/&ocirc;/g, "ô").replace(/&otilde;/g, "õ").replace(/&ouml;/g, "ö").replace(/&Oslash;/g, "Ø").replace(/&oslash;/g, "ø").replace(/&#140;/g, "Œ").replace(/&#156;/g, "œ").replace(/&#138;/g, "Š").replace(/&#154;/g, "š").replace(/&Ugrave;/g, "Ù").replace(/&Uacute;/g, "Ú").replace(/&Ucirc;/g, "Û").replace(/&Uuml;/g, "Ü").replace(/&ugrave;/g, "ù").replace(/&uacute;/g, "ú").replace(/&ucirc;/g, "û").replace(/&uuml;/g, "ü").replace(/&#181;/g, "µ").replace(/&#215;/g, "×").replace(/&Yacute;/g, "Ý").replace(/&#159;/g, "Ÿ").replace(/&yacute;/g, "ý").replace(/&yuml;/g, "ÿ").replace(/&#176;/g, "°").replace(/&#134;/g, "†").replace(/&#135;/g, "‡").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&#177;/g, "±").replace(/&#171;/g, "«").replace(/&#187;/g, "»").replace(/&#191;/g, "¿").replace(/&#161;/g, "¡").replace(/&#183;/g, "·").replace(/&#149;/g, "•").replace(/&#153;/g, "™").replace(/&copy;/g, "©").replace(/&reg;/g, "®").replace(/&#167;/g, "§").replace(/&#182;/g, "¶").replace(/&Alpha;/g, "Α").replace(/&Beta;/g, "Β").replace(/&Gamma;/g, "Γ").replace(/&Delta;/g, "Δ").replace(/&Epsilon;/g, "Ε").replace(/&Zeta;/g, "Ζ").replace(/&Eta;/g, "Η").replace(/&Theta;/g, "Θ").replace(/&Iota;/g, "Ι").replace(/&Kappa;/g, "Κ").replace(/&Lambda;/g, "Λ").replace(/&Mu;/g, "Μ").replace(/&Nu;/g, "Ν").replace(/&Xi;/g, "Ξ").replace(/&Omicron;/g, "Ο").replace(/&Pi;/g, "Π").replace(/&Rho;/g, "Ρ").replace(/&Sigma;/g, "Σ").replace(/&Tau;/g, "Τ").replace(/&Upsilon;/g, "Υ").replace(/&Phi;/g, "Φ").replace(/&Chi;/g, "Χ").replace(/&Psi;/g, "Ψ").replace(/&Omega;/g, "Ω").replace(/&alpha;/g, "α").replace(/&beta;/g, "β").replace(/&gamma;/g, "γ").replace(/&delta;/g, "δ").replace(/&epsilon;/g, "ε").replace(/&zeta;/g, "ζ").replace(/&eta;/g, "η").replace(/&theta;/g, "θ").replace(/&iota;/g, "ι").replace(/&kappa;/g, "κ").replace(/&lambda;/g, "λ").replace(/&mu;/g, "μ").replace(/&nu;/g, "ν").replace(/&xi;/g, "ξ").replace(/&omicron;/g, "ο").replace(/&piρ;/g, "ρ").replace(/&rho;/g, "ς").replace(/&sigmaf;/g, "ς").replace(/&sigma;/g, "σ").replace(/&tau;/g, "τ").replace(/&phi;/g, "φ").replace(/&chi;/g, "χ").replace(/&psi;/g, "ψ").replace(/&omega;/g, "ω").replace(/&bull;/g, "•").replace(/&hellip;/g, "…").replace(/&prime;/g, "′").replace(/&Prime;/g, "″").replace(/&oline;/g, "‾").replace(/&frasl;/g, "⁄").replace(/&weierp;/g, "℘").replace(/&image;/g, "ℑ").replace(/&real;/g, "ℜ").replace(/&trade;/g, "™").replace(/&alefsym;/g, "ℵ").replace(/&larr;/g, "←").replace(/&uarr;/g, "↑").replace(/&rarr;/g, "→").replace(/&darr;/g, "↓").replace(/&barr;/g, "↔").replace(/&crarr;/g, "↵").replace(/&lArr;/g, "⇐").replace(/&uArr;/g, "⇑").replace(/&rArr;/g, "⇒").replace(/&dArr;/g, "⇓").replace(/&hArr;/g, "⇔").replace(/&forall;/g, "∀").replace(/&part;/g, "∂").replace(/&exist;/g, "∃").replace(/&empty;/g, "∅").replace(/&nabla;/g, "∇").replace(/&isin;/g, "∈").replace(/&notin;/g, "∉").replace(/&ni;/g, "∋").replace(/&prod;/g, "∏").replace(/&sum;/g, "∑").replace(/&minus;/g, "−").replace(/&lowast;/g, "∗").replace(/&radic;/g, "√").replace(/&prop;/g, "∝").replace(/&infin;/g, "∞").replace(/&OEig;/g, "Œ").replace(/&oelig;/g, "œ").replace(/&Yuml;/g, "Ÿ").replace(/&spades;/g, "♠").replace(/&clubs;/g, "♣").replace(/&hearts;/g, "♥").replace(/&diams;/g, "♦").replace(/&thetasym;/g, "ϑ").replace(/&upsih;/g, "ϒ").replace(/&piv;/g, "ϖ").replace(/&Scaron;/g, "Š").replace(/&scaron;/g, "š").replace(/&ang;/g, "∠").replace(/&and;/g, "∧").replace(/&or;/g, "∨").replace(/&cap;/g, "∩").replace(/&cup;/g, "∪").replace(/&int;/g, "∫").replace(/&there4;/g, "∴").replace(/&sim;/g, "∼").replace(/&cong;/g, "≅").replace(/&asymp;/g, "≈").replace(/&ne;/g, "≠").replace(/&equiv;/g, "≡").replace(/&le;/g, "≤").replace(/&ge;/g, "≥").replace(/&sub;/g, "⊂").replace(/&sup;/g, "⊃").replace(/&nsub;/g, "⊄").replace(/&sube;/g, "⊆").replace(/&supe;/g, "⊇").replace(/&oplus;/g, "⊕").replace(/&otimes;/g, "⊗").replace(/&perp;/g, "⊥").replace(/&sdot;/g, "⋅").replace(/&lcell;/g, "⌈").replace(/&rcell;/g, "⌉").replace(/&lfloor;/g, "⌊").replace(/&rfloor;/g, "⌋").replace(/&lang;/g, "⟨").replace(/&rang;/g, "⟩").replace(/&loz;/g, "◊").replace(/&#039;/g, "'").replace(/&amp;/g, "&").replace(/&quot;/g, "\"");
}

এর মতো ব্যবহৃত:

let decodedText = removeEncoding("Ich hei&szlig;e David");
console.log(decodedText);

ছাপে: Ich Heiße David

পিএস এটি তৈরি করতে দেড় ঘন্টা লেগেছিল।


0

জাভাস্ক্রিপ্টে এইচটিএমএল সত্তা অনস্কেপ করতে আপনি ছোট লাইব্রেরি এইচটিএমএল-এসকর্ট ব্যবহার করতে পারেন :npm install html-escaper

import {unescape} from 'html-escaper';

unescape('escaped string');

অথবা unescapeথেকে ফাংশন Lodash বা আন্ডারস্কোর , আপনি এটি ব্যবহার করছেন কিনা তা।


*) দয়া করে মনে রাখবেন এই ফাংশন সব এইচটিএমএল সত্ত্বা আবরণ না, কিন্তু শুধুমাত্র সবচেয়ে সাধারণ বেশী, অর্থাত &, <, >, ', "। সমস্ত এইচটিএমএল সত্তাকে অনস্কেপ করতে আপনি তার লাইব্রেরিটি ব্যবহার করতে পারেন ।


-1

আমি আমার প্রকল্পে এটি ব্যবহার করি: অন্যান্য উত্তর দ্বারা অনুপ্রাণিত হলেও অতিরিক্ত সুরক্ষিত প্যারামিটার সহ, আপনি যখন সজ্জিত অক্ষরগুলি ব্যবহার করেন তখন কার্যকর হতে পারে

var decodeEntities=(function(){

    var el=document.createElement('div');
    return function(str, safeEscape){

        if(str && typeof str === 'string'){

            str=str.replace(/\</g, '&lt;');

            el.innerHTML=str;
            if(el.innerText){

                str=el.innerText;
                el.innerText='';
            }
            else if(el.textContent){

                str=el.textContent;
                el.textContent='';
            }

            if(safeEscape)
                str=str.replace(/\</g, '&lt;');
        }
        return str;
    }
})();

এবং এটি ব্যবহারযোগ্য:

var label='safe <b> character &eacute;ntity</b>';
var safehtml='<div title="'+decodeEntities(label)+'">'+decodeEntities(label, true)+'</div>';

-1

এখানে অন্যান্য উত্তরগুলির সকলেরই সমস্যা রয়েছে।

ডকুমেন্ট.ক্রেটএলিমেন্ট ('ডিভ') পদ্ধতিগুলি (জিকিউরি ব্যবহার করে এমনগুলি সহ) এতে প্রবেশ করা কোনও জাভাস্ক্রিপ্ট কার্যকর করে (একটি সুরক্ষা সমস্যা) এবং DOMParser.parseFromString () পদ্ধতিটি হোয়াইটস্পেসে ট্রিম করে। এখানে একটি খাঁটি জাভাস্ক্রিপ্ট সমাধান রয়েছে যার মধ্যে কোনও সমস্যা নেই:

function htmlDecode(html) {
    var textarea = document.createElement("textarea");
    html= html.replace(/\r/g, String.fromCharCode(0xe000)); // Replace "\r" with reserved unicode character.
    textarea.innerHTML = html;
    var result = textarea.value;
    return result.replace(new RegExp(String.fromCharCode(0xe000), 'g'), '\r');
}

টেক্সটআরিয়া এক্সিকিউটিভ জেএস কোড এড়ানোর জন্য বিশেষভাবে ব্যবহৃত হয়। এটি এগুলি পাস করে:

htmlDecode('&lt;&amp;&nbsp;&gt;'); // returns "<& >" with non-breaking space.
htmlDecode('  '); // returns "  "
htmlDecode('<img src="dummy" onerror="alert(\'xss\')">'); // Does not execute alert()
htmlDecode('\r\n') // returns "\r\n", doesn't lose the \r like other solutions.

1
না, ভিন্ন ট্যাগ ব্যবহার করা সমস্যার সমাধান করে না । এটি এখনও একটি এক্সএসএস দুর্বলতা, চেষ্টা করুন htmlDecode("</textarea><img src=x onerror=alert(1)>")। সেরজিও বেলভস্কিজের উত্তর সম্পর্কে আমি ইতিমধ্যে এই বিষয়টি চিহ্নিত করার পরে আপনি এটি পোস্ট করেছেন।
ও্লাদিমির পালান্ট

আপনার বর্ণিত সমস্যাটিকে আমি পুনরুত্পাদন করতে অক্ষম। আমার এই জেএসফিডেলে আপনার কোড রয়েছে এবং চলমান অবস্থায় কোনও সতর্কতা প্রদর্শন করে না। jsfiddle.net/edsjt15g/1 আপনি কি একবার দেখে নিতে পারেন? আপনি কোন ব্রাউজার ব্যবহার করছেন?
এরিকপি

2
আমি ফায়ারফক্স ব্যবহার করছি। ক্রোম প্রকৃতপক্ষে এই দৃশ্যটি অন্যরকমভাবে পরিচালনা করে, তাই কোডটি কার্যকর করে না - এমন কিছু নয় যা আপনার উপর নির্ভর করা উচিত।
ও্লাদিমির প্যালান্ট

-1
var encodedStr = 'hello &amp; world';

var parser = new DOMParser;
var dom = parser.parseFromString(
    '<!doctype html><body>' + encodedStr,
    'text/html');
var decodedString = dom.body.textContent;

console.log(decodedString);

@ ও্লাদিমির প্যালান্ট (অ্যাডব্লক প্লাসের লেখক) 4 বছর আগে ইতিমধ্যে DOMParser উত্তর দিয়েছেন । আপনি নিজের পোস্ট করার আগে আগের উত্তরগুলি পড়েছেন?
ড্যান ড্যাসকলেসকু

-7

একটি বৈকল্পিক রয়েছে যে 80% একেবারে শীর্ষে উত্তর হিসাবে উত্পাদনশীল।

মাপদণ্ড দেখুন: https://jsperf.com/decode-html12345678/1

কর্মক্ষমতা পরীক্ষা

console.log(decodeEntities('test: &gt'));

function decodeEntities(str) {
  // this prevents any overhead from creating the object each time
  const el = decodeEntities.element || document.createElement('textarea')

  // strip script/html tags
  el.innerHTML = str
    .replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '')
    .replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');

  return el.value;
}

যদি আপনাকে ট্যাগগুলি ছেড়ে দেওয়ার প্রয়োজন হয়, তবে দুটি .replace(...)কল সরিয়ে ফেলুন (স্ক্রিপ্টগুলির প্রয়োজন না হলে আপনি প্রথমটি ছেড়ে দিতে পারেন)।


6
অভিনন্দন, আপনি বোগাস স্যানিটাইটিওয়েজ যুক্তি দিয়ে দুর্বলতাটিকে অস্পষ্ট করতে পেরেছেন, এমন সব পারফরম্যান্স জয়ের জন্য যা বাস্তবে কোনও ব্যাপার নয়। decodeEntities("</textarea '><img src=x onerror=alert(1) \">")ফায়ারফক্সে কল করার চেষ্টা করুন । দয়া করে নিয়মিত অভিব্যক্তি সহ এইচটিএমএল কোড স্যানিটাইজ করার চেষ্টা বন্ধ করুন।
ও্লাদিমির পালান্ট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.