JQuery সহ এইচটিএমএল স্ট্রিংগুলি ত্যাগ করছে


608

JQuery এর স্ট্রিংগুলি থেকে এইচটিএমএল এড়ানোর সহজ উপায়টি কি কেউ জানেন ? আমার একটি স্বেচ্ছাসেবী স্ট্রিং পাস করতে সক্ষম হওয়া দরকার এবং এটি কোনও HTML পৃষ্ঠায় (জাভাস্ক্রিপ্ট / এইচটিএমএল ইনজেকশন আক্রমণগুলি প্রতিরোধ করা) প্রদর্শনের জন্য যথাযথভাবে পালাতে হবে। আমি নিশ্চিত যে এটি করার জন্য jQuery প্রসারিত করা সম্ভব, তবে এই কাজটি সম্পাদন করার জন্য এই মুহূর্তে ফ্রেমওয়ার্ক সম্পর্কে আমি যথেষ্ট পরিমাণে জানি না।


উত্তর:


444

যেহেতু আপনি 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;

57
আপনি যে বিন্দুটি $ ("div.someClass") অ্যাক্সেস করতে হবে তা মিস করেছেন the এইচটিএমএল () পালিয়ে যাওয়া সংস্করণটি বের করতে।
মর্টেন

16
যদি আপনার স্ট্রিংটিতে
শ্বেত

20
@ ট্রাভিস এটি jQuery ওয়েবসাইটে নথিভুক্ত করা হয়েছে: "বিভিন্ন ব্রাউজারে এইচটিএমএল পার্সারে পরিবর্তনের কারণে ফেরত পাঠ্যটি নিউলাইন এবং অন্যান্য সাদা জায়গাতে পরিবর্তিত হতে পারে।" api.jquery.com/text
জিওফ্লে

3
@mklement যদি আপনি ইতিমধ্যে এই সমাধান ব্যবহার করছেন, আপনার মত যে কাজ কিছু সম্পর্কিত কোনও সমস্যা হবে না: $(element2).attr("some-attr", $(element1).html());এই উদাহরণ দেখুন: jsbin.com/atibig/1/edit
Travis

16
এটি কোট এবং ডাবল কোটগুলি এড়াতে পারে না যা খারাপ! winko.com/post/html-escaping
লিওর

599

রয়েছে mustache.js থেকে সমাধান

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

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

7
নোট করুন, কৌতূহলপূর্ণভাবে, দশমিক ফর্ম্যাট 'সহ একটি সত্তায় ম্যাপ করা হয়েছে , যেখানে হেক্স ফর্ম্যাট ব্যবহার করা হয়েছে। /
mklement0

43
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত - এটি সহজ, দক্ষ, কোনও নির্ভরতার প্রয়োজন নেই এবং কোনও অস্পষ্ট হ্যাকের উদ্দেশ্যে যা ঠিক করা হয়েছে ঠিক তাই করে।
লরেফোন

6
কি রূপান্তর নির্দেশনা এর \nজন্য <br>?
অ্যামুইনটার

2
এখানে উত্সটির
mjackson

8
@ এমউইনটার, আমি উপরের স্ক্রিপ্টটি প্রসারিত করেছি entity \ n ": '<br>' সত্তা মানচিত্রে এবং / [& <>" '\ /] | [\ n] / জি
ওয়ালভ

182
$('<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


11
উপরের উত্তরে উল্লিখিত হিসাবে, এই সমাধানটি সাদা স্থান সংরক্ষণের গ্যারান্টিযুক্ত নয়।
জিওফলি

47
এটি লক্ষ করা উচিত যে এটি একক বা ডাবল উদ্ধৃতিগুলি এড়াতে কিছুই করে না। আপনি যদি মানটি কোনও এইচটিএমএল বৈশিষ্ট্যে রাখার পরিকল্পনা করছেন তবে এটি সমস্যা হতে পারে।
কিপ

6
@ কিপ: @ ট্র্যাভিসরা দেখতে পেল যে jQuery এর attr()পদ্ধতিটি (কমপক্ষে ১.৮.৩ অনুসারে) নিজস্ব এনকোডিং করে, যাতে বিনাখণ্ডিত স্ট্রিংগুলি সরাসরি পাস করা যায় ; যেমন:$('<div/>').attr('test-attr', '\'Tis "fun" & stuff')[0].outerHTML
mklement0

1
পছন্দ করুন আপনি jQuery এর কোন সংস্করণ ব্যবহার করছেন? আপনি কোডটি ভারব্যাটিক অনুলিপি করে যদি উদাহরণ কোডটি কাজ করে? সর্বশেষ jQuery (3.1.0) এর সাথে এখানে সূক্ষ্মভাবে কাজ করে : jsbin.com/fazimigayo/1/edit?html , js , console , আউটপুট (এবং এটি আগের সমস্ত সংস্করণেও কাজ করা উচিত)
হেনরিক এন

1
@ তারেকাহফ $('<div/>')একটি নতুন divউপাদান তৈরি করেছে যা ডিওএমের সাথে সংযুক্ত নয়। সুতরাং এটি কোনও বিদ্যমান উপাদান পরিবর্তন করবে না। এটি কিছুটা বিভ্রান্তিকরভাবে কীভাবে jQuery একই $()উপাদানগুলি উপাদানগুলি ( $('div')) তৈরি করতে এবং তৈরি করতে এবং এর বাইরে আরও কয়েকটি জিনিসের জন্য ব্যবহার করে ... :)
হেনরিক এন

61

আপনি যদি এইচটিএমএল-এর জন্য পালাতে চান তবে কেবল তিনটিই রয়েছে যা আমি ভাবতে পারি যে এটি সত্যই প্রয়োজনীয়:

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

আপনার ব্যবহারের ক্ষেত্রে উপর নির্ভর করে আপনার পছন্দ মতো জিনিসগুলিও করতে হতে "পারে &quot;। যদি তালিকাটি যথেষ্ট পরিমাণে বড় হয়ে যায় তবে আমি কেবল একটি অ্যারে ব্যবহার করব:

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() এটি কেবলমাত্র ইউআরএল-এর জন্য পালাবে, এইচটিএমএল নয়।


13
যদি এই প্রশ্নটিতে থাকা এইচটিএমএল ইতিমধ্যে সত্তাগুলি থেকে যায় তবে এই নিয়মিত অভিব্যক্তিটি অদ্ভুত ফলাফল আনবে। উদাহরণস্বরূপ, "টম ও এমপি; জেরি" থেকে পালাতে "টম ও এমপি; জ্যামি; জেরি" উত্পাদিত হবে
রায়ান

12
স্থানীয়ভাবে varঘোষণা করতে দয়া করে ব্যবহার করুন item; যাইহোক, for … inঅ্যারের মাধ্যমে লুপ করার সময় কোনও লুপ ব্যবহার করবেন না ! forপরিবর্তে একটি সাধারণ লুপ ব্যবহার করুন। ওহ, এবং এটি encodeURIComponentনা escapeURIComponent
মার্সেল কোরপেল

3
আপনি যদি ট্যাগ বৈশিষ্ট্যগুলির সাথে কাজ করছেন, তবে আপনাকে উদ্ধৃতি এবং / বা ডাবল উদ্ধৃতিগুলি এড়িয়ে চলতে হবে। এইচটিএমএল স্পেশালচার্সের পিএইচপি ডকুমেন্টেশনে রূপান্তরকারীগুলির একটি কার্যকর তালিকা রয়েছে যা এটি সম্পাদন করে। php.net/html স্পেশালচার্স
জিওফ্লি

4
শুধু নতুন মানুষের জন্য এক ধরনের অনুস্মারক, এটি ব্যবহার করবেন যদি আপনি আপনার ওয়েবসাইটে অ ইংরেজি কোথাও অক্ষর আছে মনস্থ না ... একথাও ঠিক যে এই কারণে 'E' মত কথা সঙ্গে অক্ষরের করব না: &eacute; রেফারেন্সের জন্য এইচটিএমএল সত্তার একটি তালিকা এখানে রয়েছে: w3schools.com/tags/ref_entities.asp
লোগান ওল্ফার

11
@ রায়ান: যদিও এটি সমাধান করার মতো যে এই সমাধানটি ইতিমধ্যে এনকোডযুক্ত স্ট্রিংগুলি সঠিকভাবে পরিচালনা করে না, তবে এই পৃষ্ঠায় যে সমাধানগুলি সম্ভবত সবচেয়ে বেশি - সম্ভবত সবগুলি ক্ষেত্রেই প্রযোজ্য তা মূল্যহীন।
mklement0

37

আন্ডারস্কোর ব্যবহারের জন্য যথেষ্ট সহজ:

_.escape(string) 

ইনসকোর একটি ইউটিলিটি লাইব্রেরি যা প্রচুর বৈশিষ্ট্য সরবরাহ করে যা নেটিভ জেএস সরবরাহ করে না। এর রয়েছে lodash যা আন্ডারস্কোর হিসাবে একই এপিআই কিন্তু আরো performant হতে পুনর্লিখিত হল।


36

আমি একটি ছোট্ট ছোট্ট ফাংশন লিখেছি যা এটি করে। এটা শুধুমাত্র পালাতে ", &, <এবং >(কিন্তু সাধারণত ঠিক এ পর্যন্তই আপনি যাহাই হউক না কেন প্রয়োজন)। এটি সামান্য আরও মার্জিত তবে পূর্বের প্রস্তাবিত সমাধানগুলিতে এটি সমস্ত রূপান্তর করতে কেবল একটি ব্যবহার .replace()করে। ( সম্পাদনা 2: হ্রাস কোড জটিলতা ফাংশনটিকে আরও ছোট এবং আরও সুন্দর করে তোলে, যদি আপনি মূল কোডটি সম্পর্কে আগ্রহী হন তবে এই উত্তরের শেষটি দেখুন))

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

এটি সরল জাভাস্ক্রিপ্ট, কোনও jQuery ব্যবহৃত হয় না।

পালানো /এবং 'খুব

এমকিলেমেন্টের মন্তব্যের জবাবে সম্পাদনা করুন।

উপরের ফাংশনটি কোনও চরিত্রকে অন্তর্ভুক্ত করার জন্য সহজেই প্রসারিত করা যায়। পালাতে আরও অক্ষর নির্দিষ্ট করতে, কেবল নিয়মিত অভিব্যক্তিতে (অর্থাত্‍ অভ্যন্তরের অভ্যন্তরে /[...]/g) এবং chrঅবজেক্টে প্রবেশের জন্য অক্ষর শ্রেণিতে উভয় সন্নিবেশ করান । ( সম্পাদনা 2: একইভাবে এই ফাংশনটিও সংক্ষিপ্ত করে রেখেছিল))

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

অ্যাডাস্ট্রোফের জন্য উপরের ব্যবহারটি নোট করুন &#39;(পরিবর্তে প্রতীকী সত্তাটি &apos;ব্যবহার করা যেতে পারে - এটি এক্সএমএলে সংজ্ঞায়িত করা হয়েছে, তবে এটি মূলত এইচটিএমএল স্পেকের অন্তর্ভুক্ত ছিল না এবং তাই এটি সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়) দেখুন: এইচটিএমএল অক্ষর এনকোডিংগুলিতে উইকিপিডিয়া নিবন্ধ )। আমি কোথাও পড়ার বিষয়টিও স্মরণ করি যে হেক্সাডেসিমাল ব্যবহারের চেয়ে দশমিক সত্তা ব্যবহার করা আরও ব্যাপকভাবে সমর্থিত তবে আমি এখন পর্যন্ত এর উত্স খুঁজে পেতে পারি না বলে মনে হয়। (এবং সেখানে অনেকগুলি ব্রাউজার থাকতে পারে যা হেক্সাডেসিমাল সত্তাকে সমর্থন করে না))

নোট: যোগ করার পদ্ধতি /এবং 'যেহেতু তারা HTML এ কোনো বিশেষ অর্থ আছে না এবং না পলান অক্ষরের লিস্টে না সব যে দরকারী, হয় প্রয়োজন পলান করা হবে।

আসল 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]; });
    };
}());

দুটি সংস্করণ কোনটি দ্রুত তা পরীক্ষা করে দেখিনি। যদি আপনি তা করেন তবে এ সম্পর্কিত তথ্য এবং লিঙ্কগুলি নির্দ্বিধায় যোগ করুন।


সময় দেওয়ার জন্য আপনাকে ধন্যবাদ, জিজেডম। পালানোর প্রয়োজন নেই সম্পর্কে ভাল পয়েন্ট; কোন ধারণা কেন উভয় mustache.jsএবং underscore.jsএটি? পরেরটির কথা বলছেন: এটি শুধুমাত্র সংখ্যাসূচক সত্ত্বা (প্রতিনিধিত্বমূলক স্বীকার 'এবং /এ, ') বড় হাতের হেক্স যখন ফর্ম উন পলায়নের। সুতরাং, পাঠ্যটি এতে পালিয়ে গেল mustache.js- যা কৌতূহলীভাবে হেক্সের মিশ্রণ ব্যবহার করে । এবং দশমিক ফর্ম্যাটগুলি - সঠিকরূপে আটকানো হবে না underscore.js। আমি ভাবছি যে অন্যান্য জনপ্রিয় গ্রন্থাগারগুলি কীভাবে এটি মোকাবেলা করে।
mklement0

1
লোয়ার কেস হেক্স ফর্মটি সর্বাধিক সমর্থিত ফর্ম, সুতরাং এটি (সম্ভবত) ফর্মটি গ্রন্থাগারগুলিতে রূপান্তর করা উচিত । (অবশ্যই উভয় ফর্ম যখন রূপান্তর কাজ করা উচিত থেকে অ্যাপস্ট্রফিগুলি -)। 'যার কারণে এক্সএমএল (কিন্তু এইচটিএমএল) স্বত্ত্বার নাম আছে XML- এর সংরক্ষিত ফাংশন কিছু বাছাই করা আছে, (এবং এইভাবে এক্সএইচটিএমএল, আমি কল্পনা?) &apos;। ঠিক কেন বা কীভাবে এটি "সংরক্ষিত" তা আমি জানি না। - স্ল্যাশগুলি ইউআরএলগুলিতে বিশেষ, তবে এটি এইচটিএমএল থেকে বেরিয়ে আসার জন্য তাদের সত্যিকার অর্পণ করে না (ইউআরএল এনকোডিং সম্পূর্ণ আলাদা কিছু))
zrajm

পুনরায় &apos;: সঠিক: কেবল এক্সএইচটিএমএলে নিরাপদ ব্যবহার ; সরাসরি জনতার উত্সের মুখ থেকে - জোর দেওয়া খনি: "(...) একটি কনফিগারিং এইচটিএমএল প্রসেসরের দ্বারা পড়া , (...) ব্যবহারের উপায় বা কাস্টম সত্তা রেফারেন্সগুলি সমর্থিত নাও হতে পারে (...)" - বাস্তবে : আধুনিক ব্রাউজারে এটিকে সমর্থন করে এমনকি এইচটিএমএল । হেক্স নম্বরে পুনরায় কেস। (একই উত্স; জোর খনি): "এক্স অবশ্যই XML নথিতে ছোট হাতের হতে হবে [[…] এইচএইচপি বড় হাতের অক্ষর এবং ছোট হাতের মিশ্রণ করতে পারে, যদিও বড় হাতের অক্ষরটি সাধারণ স্টাইল ।" কে স্ল্যাশগুলি এনকোড করার সিদ্ধান্ত নিয়েছে তা অবাক করে আমাদের ছেড়ে দেয়; সম্ভবত সত্যিই কেবল ইউআরআই এবং এইচটিএমএল এনকোডিংয়ের মধ্যে একটি বিভ্রান্তি রয়েছে?
mklement0

2
চূড়ান্ত চিন্তা: এনকোডিংয়ের /দরকার নেই 'বলে মনে হয় তবে এনকোডিং এখনও কেস কেসটি হ্যান্ডেল করতে কার্যকর মনে হয় যেখানে একটি এনকোডযুক্ত স্ট্রিংটি একক উদ্ধৃতিতে আবদ্ধ বৈশিষ্ট্যের মান হিসাবে ব্যবহৃত হয় ।
mklement0

এই দুটোই ধীর। ডাবল ডিজিটের মার্জিন দ্বারা দ্রুত সমাধান হ'ল ফাংশনগুলির পরিবর্তে স্ট্রিংগুলি পাস করা প্রতিস্থাপনের একটি সিরিজ are
অ্যাডাম লেগেট 21

34

আমি বুঝতে পারছি যে আমি এই পার্টিতে কত দেরিতে আছি তবে আমার কাছে খুব সহজ সমাধান রয়েছে যার জন্য jQuery প্রয়োজন হয় না।

escaped = new Option(unescaped).innerHTML;

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

3 সম্পাদনা করুন: দ্রুত সমাধানের জন্য, সরম থেকে উপরের উত্তরটি পরীক্ষা করুন। এটি একটি সংক্ষিপ্ততম।


এটি কমপক্ষে এখনই ফায়ারফক্স 52-এ উদ্ধৃতিগুলি পরিবর্তন করে না -
getsetbro

1
এসকেপিংয়ের উদ্ধৃতিগুলি গুণাবলীর ক্ষেত্রে কেবল কার্যকরীভাবে প্রাসঙ্গিক। যেহেতু আমরা পালিয়ে যাচ্ছি <এবং >, উত্পন্ন সামগ্রীর অভিপ্রায় কোনও বৈশিষ্ট্যে না যাওয়া পর্যন্ত উদ্ধৃতিগুলি পলায়নের কোনও সুবিধা নেই।
অ্যাডাম লেগেট

31

এখানে একটি পরিষ্কার, পরিষ্কার জাভাস্ক্রিপ্ট ফাংশন রয়েছে। এটি "কয়েকটি <বহু" কে "কয়েকটি & 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;');
}

28

শেষ পরীক্ষার পরে আমি দ্রুত এবং সম্পূর্ণরূপে ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নেটিভ জাভা স্ক্রিপ্ট ( ডিওএম ) সমাধানের প্রস্তাব দিতে পারি:

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
}

আমার চূড়ান্ত পারফরম্যান্স তুলনা ( স্ট্যাক প্রশ্ন ) দেখুন।


2
দুটি নোড ব্যবহার করা কি প্রয়োজনীয়? কীভাবে কেবল একটি:var p = document.createElement('p'); p.textContent = html; return p.innerHTML;
ড্যান ড্যাসকলেসকু

2
@ ড্যানডাসকলেস্কু: এমডিএন অনুসারে , textContentফাংশনটি কেবল ক্রোম 1+, ফায়ারফক্স 2, আই 9, অপেরা 9.64 এবং সাফারি 3 দ্বারা সমর্থিত (দ্বিতীয়টি সম্ভবত "সম্ভবত পূর্ববর্তী" হিসাবে বর্ণিত)। এটি ওপিগুলিকে "সম্পূর্ণ ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ" দাবিটি ভঙ্গ করবে।
zb226

p.innerText = html; return p.innerHTML
বেকিম বাকাজ

24

ব্যবহার করে দেখুন Underscore.string liberal এর সংক্ষিপ্ত রূপ, এটা jQuery সঙ্গে কাজ করে।

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

আউটপুট:

'&lt;div&gt;Blah blah blah&lt;/div&gt;'

20
মূল আন্ডারস্কোর লাইব্রেরিতে এখন একটি _.escape()ইউটিলিটি ফাংশন রয়েছে।
কোডপ

15

আমি গোঁফ.জেএস উদাহরণটি escapeHTML()স্ট্রিং অবজেক্টে পদ্ধতি যুক্ত করে বাড়িয়েছি ।

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


দরকারী, তবে আমি __entityMapস্থানীয় ফাংশনে ফাংশনে চলে এসেছি । এবং if (typeof String.prototype.escapeHTML !== 'function'){...}
এগুলি সমস্তগুলিতে

15

escape()এবং unescape()ইউআরএলগুলির জন্য এনকোড / ডিকোড স্ট্রিংগুলি নয়, HTML নয়।

আসলে, আমি নিম্নলিখিত স্নিপেটটি এমন কৌশলটি ব্যবহার করি যাতে কোনও কাঠামোর প্রয়োজন হয় না:

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

যদি আপনি এর সাথে চলে যান "তবে আপনাকে কমপক্ষে 'এবং লড়াইয়ের ক্ষেত্রে the add যুক্ত করতে হবে । এগুলি কেবল এইচটিএমএলে উপাদানগুলির অভ্যন্তরে স্ট্রিং ট্যাগ ডেটার জন্য প্রয়োজন। এইচটিএমএল ডেটা নিজেই (ট্যাগগুলির বাইরে) কেবল প্রথম 3 টির প্রয়োজন।
মারিয়াস

10

আপনার যদি আন্ডারস্কোর.জে থাকে তবে ব্যবহার করুন _.escape(উপরে পোস্ট করা jQuery পদ্ধতির চেয়ে আরও দক্ষ):

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

5

আপনি যদি রেজেক্স রুটে চলে যাচ্ছেন তবে উপরের 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]]);
}

2
আমি বিশ্বাস করি এটির জন্য (ফাইন্ড রিপ্লেসে ভেরি আইটেম) {পলায়ন = পলায়নযোগ্য স্থান (ফাইন্ড রিপ্লেস [আইটেম] [0], ফাইন্ড রিপ্লেস [আইটেম] [১]) এর জন্য হওয়া উচিত; }
ক্রিস স্টিফেন্স

5

এটি একটি দুর্দান্ত নিরাপদ উদাহরণ ...

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

4
আপনি সেখানে কোন ধরণের ব্যতিক্রম দমন করছেন?
স্টিফান মাজেউস্কি

3

আপনি ভ্যানিলা জেএস দিয়ে এটি সহজেই করতে পারেন।

কেবল একটি পাঠ্য নোড ডকুমেন্ট যুক্ত করুন। এটি ব্রাউজার দ্বারা পালাতে হবে।

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)

2
(function(undefined){
    var charsToReplace = {
        '&': '&amp;',
        '<': '&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&lt;tag&gt;and&amp;symbol&copy;"

2

2 সহজ পদ্ধতি যার জন্য কোনও জ্যাকুয়েরি প্রয়োজন নেই ...

আপনি আপনার স্ট্রিংয়ের মধ্যে সমস্ত অক্ষরকে এনকোড করতে পারেন :

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>


2

সরল জাভাস্ক্রিপ্টের পালানোর উদাহরণ:

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

3
কোড-কেবল উত্তরগুলি নিরুৎসাহিত করা হয়েছে কারণ তারা কীভাবে সমস্যাটি সমাধান করে তা ব্যাখ্যা করে না। এই প্রশ্নটি ইতিমধ্যে অন্যান্য স্বীকৃত এবং আপত্তিকৃত উত্তরে কীভাবে এটির উন্নতি করে তা বোঝাতে আপনার উত্তর আপডেট করুন update এছাড়াও, এই প্রশ্নটি 9 বছরের পুরানো, আপনার প্রচেষ্টাটি ব্যবহারকারীদের কাছে আরও প্রশংসা হবে যাদের সাম্প্রতিক উত্তর না দেওয়া প্রশ্ন রয়েছে। দয়া করে পর্যালোচনা করুন আমি কীভাবে একটি ভাল উত্তর লিখি
ফ্লফিকিটেন

1
@ ফ্লাফিকিটেন এখানে এই জাতীয় ফাংশনের সুবিধাগুলি এবং অসুবিধাগুলি সম্পর্কে একটি খুব সুন্দর লিখিত ব্লগ পোস্ট যা আপনাকে জানতে চাইলে সমস্ত কিছু বিস্তারিতভাবে জানায় :) shebang.brandonmintern.com/…
db306

@ db306 উত্তরটি নিম্ন মানের হিসাবে চিহ্নিত করা হয়েছে কারণ কেবলমাত্র কোডের উত্তরটি স্ট্যাক ওভারফ্লো নির্দেশিকাগুলি পূরণ করে না - কীভাবে ভাল উত্তর লিখতে হয় দেখুন । আমার মন্তব্যটি উন্নত করার জন্য কী প্রয়োজন তা ব্যাখ্যা করার জন্য পর্যালোচনা প্রক্রিয়া চলাকালীন যুক্ত হয়েছিল, উদাহরণস্বরূপ কোডটি কী করে এবং এটি বিদ্যমান উত্তরের উপর কীভাবে উন্নতি করে তা ব্যাখ্যা করার জন্য উত্তরটির উত্তর প্রয়োজন। এটিকে সমর্থন করার জন্য অন্যান্য পর্যালোচকদের কাছ থেকে উত্সর্গগুলি এসেছে। মন্তব্যে একটি বাহ্যিক লিঙ্ক যুক্ত করা এখনও এসও নির্দেশিকাগুলির সাথে মেলে না। পরিবর্তে অ্যান্ড্রু তার প্রাসঙ্গিক তথ্য সরাসরি অন্তর্ভুক্ত করা প্রয়োজন।
ফ্লফিকিটেন

মনে রাখবেন যে ব্র্যান্ডমোনটার্ন ডট কমের মেয়াদ শেষ হয়ে গেছে এবং এখন পার্ক করা হয়েছে। নতুন শেবাং ঠিকানাটি shebang.mintern.net/foolproof-html-escaping-in- javascript/।
ব্র্যান্ডন

0
function htmlEscape(str) {
    var stringval="";
    $.each(str, function (i, element) {
        alert(element);
        stringval += element
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(' ', '-')
            .replace('?', '-')
            .replace(':', '-')
            .replace('|', '-')
            .replace('.', '-');
    });
    alert(stringval);
    return String(stringval);
}

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

একটি যাদুমন্ত্র মত কাজ করে


পাঠ্য এইচটিএমএল ট্যাগগুলি সরিয়ে দেয়, তবে $ ('<div />') h এইচটিএমএল (টি) .html (); কাজ
বাস জোবসেন

0

এই উত্তরটি jQuery এবং সাধারণ জেএস পদ্ধতি সরবরাহ করে তবে এটি 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'))

সমস্ত বড় ব্রাউজারগুলি এখনও শর্ট কোড সমর্থন করে এবং পুরানো ওয়েবসাইটের সংখ্যা দিলে আমি সন্দেহ করি যে শীঘ্রই এটির পরিবর্তন হবে।


এটি ইউআরএল এনকোডিংয়ের জন্য। প্রশ্নটি এইচটিএমএল পালানোর বিষয়ে ছিল, যা খুব আলাদা।
থিলেম

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


-2

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

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

আপনার ব্লগে কোনও মন্তব্য থেকে এইচটিএমএলকে রক্ষা করতে এবং তারপরে এটি আপনার সার্ভারে পোস্ট করার জন্য আপনি EscapeHtml ফাংশনটি ব্যবহার করছেন বলে দেয় Le

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

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

ব্যবহারকারী পারে:

  • পোস্ট অনুরোধের পরামিতিগুলি সম্পাদনা করুন এবং জাভাস্ক্রিপ্ট কোডের সাথে মন্তব্যটি প্রতিস্থাপন করুন।
  • ব্রাউজার কনসোল ব্যবহার করে EscapeHtml ফাংশনটি ওভাররাইট করুন।

যদি ব্যবহারকারী এই স্নিপেটটি কনসোলে পেস্ট করে তবে এটি এক্সএসএস বৈধতাটিকে বাইপাস করবে:

function escapeHtml(string){
   return string
}

আমি একমত নই এই এক্সএসএস সুরক্ষাটিকে বাইপাস করতে আপনাকে একটি এক্সএসএস আক্রমণ ব্যবহার করতে হবে (একটি স্ক্রিপ্ট ইনজেকশন যা পলানো অক্ষম করে) যা আপনি আসলে অবরুদ্ধ করছেন। কিছু ক্ষেত্রে ক্লায়েন্টের উপর পালানো আসলে আরও উপযুক্ত example উদাহরণস্বরূপ, যদি ডেটা কোনও REST এপিআই থেকে আসে যা মানক JSON ফিরিয়ে দিতে হয়।
ইতালিপালেআল

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

@ কোয়ালকুনো আমার বক্তব্যকে আরও সুস্পষ্ট করার জন্য আমি কয়েকটি উদাহরণ অন্তর্ভুক্ত করেছি।
কাউউ গিমিনিস

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

@ কোয়ালকুনো এটি স্ট্যাকওভারফ্লোতে একটি জনপ্রিয় প্রশ্ন এবং আমি বিশ্বাস করি এটি আবৃত হওয়া একটি গুরুত্বপূর্ণ বিষয়। আমি উত্তর দিয়েছি কেন।
কাউউ গিমিনিস

-2

সকল সমাধান বেহুদা আপনি আত পুনরায় পালাবার প্রতিরোধ, যেমন সবচেয়ে সমাধান পলায়নের রাখা যাবে &থেকে &amp;

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

4
এটিকে ডাবল পলায়ন বলা হয় এবং আপনার ইনপুট ডেটা ইতিমধ্যে এড়ানো যায় না তা নিশ্চিত করে স্থির করা উচিত। আপনি যদি আক্ষরিক & lt; ব্যবহারকারীর কাছে? অথবা সম্ভবত পাঠ্যটি অন্য কোথাও পুনরায় ব্যবহার করা হবে, এবং ঘটনার পরে পালানোর উপর নির্ভর করবে?
থেলেম
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.