আমি জাভাস্ক্রিপ্ট ফাংশন দ্বারা এইচটিএমএলে একটি পাঠ্য প্রদর্শন করতে চাই। আমি কীভাবে জেএসএসে এইচটিএমএল বিশেষ অক্ষরগুলি থেকে বাঁচতে পারি? একটি এপিআই আছে?
উত্তর:
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}replace()কলগুলিতে নিয়মিত প্রকাশগুলি অপ্রয়োজনীয়। সরল পুরানো একক-চরিত্রের স্ট্রিংগুলি পাশাপাশি করবে।
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='<b>cool</b>'>আপনি jQuery এর .text()ফাংশন ব্যবহার করতে পারেন ।
উদাহরণ স্বরূপ:
.text()ফাংশন সম্পর্কিত jQuery ডকুমেন্টেশন থেকে :
আমাদের সচেতন হওয়া দরকার যে এই পদ্ধতিটি প্রয়োজনীয়ভাবে সরবরাহ করা স্ট্রিংটি এড়িয়ে যায় যাতে এটি HTML এ সঠিকভাবে রেন্ডার হয়। এটি করতে, এটি ডম পদ্ধতিতে .createTextNode () কল করে, স্ট্রিংটিকে এইচটিএমএল হিসাবে ব্যাখ্যা করে না।
JQuery ডকুমেন্টেশনের পূর্ববর্তী সংস্করণগুলি এটিকে এটি উচ্চারণ করেছে ( জোর দেওয়া হয়েছে ):
আমাদের সচেতন হওয়া দরকার যে এই পদ্ধতিটি প্রয়োজনীয়ভাবে সরবরাহ করা স্ট্রিংটি এড়িয়ে যায় যাতে এটি HTML এ সঠিকভাবে রেন্ডার হয়। এটি করার জন্য, এটি ডম পদ্ধতিতে .createTextNode () কল করে, যা তাদের বিশেষ অক্ষরের পরিবর্তে তাদের এইচটিএমএল সত্তা সমতুল্য (যেমন & lt; <) এর সাথে প্রতিস্থাপন করে ।
const str = "foo<>'\"&"; $('<div>').text(str).html()ফলনfoo<>'"&
আমি মনে করি এটি করার উপযুক্ত উপায়টি আমি খুঁজে পেয়েছি ...
// 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);document.createTextNode("<script>alert('Attack!')</script>").textContent
লোডাশ ব্যবহার করা
_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'এটি এখন পর্যন্ত, আমি এটি সম্পন্ন করে দেখানোর দ্রুততম উপায়। এছাড়াও, এটি পৃষ্ঠায় উপাদানগুলি যুক্ত, অপসারণ বা পরিবর্তন না করে এগুলি করে।
function escapeHTML(unsafeText) {
let div = document.createElement('div');
div.innerText = unsafeText;
return div.innerHTML;
}var divCode = '<div data-title="' + escapeHTML('Jerry "Bull" Winston') + '">Div content</div>'অবৈধ এইচটিএমএল আসবে!
আরও ভাল সমাধানটি খুঁজে পাওয়া আকর্ষণীয় ছিল:
var escapeHTML = function(unsafe) {
return unsafe.replace(/[&<"']/g, function(m) {
switch (m) {
case '&':
return '&';
case '<':
return '<';
case '"':
return '"';
default:
return ''';
}
});
};আমি বিশ্লেষণ করব না >কারণ এটি ফলাফলে এক্সএমএল / এইচটিএমএল কোডটি ভঙ্গ করে না।
এখানে মানদণ্ডগুলি রয়েছে: http://jsperf.com/regexpairs
এছাড়াও, আমি একটি সর্বজনীন escapeফাংশন তৈরি করেছি : http://jsperf.com/regexpairs2
আনঙ্কডবিহীন পাঠ্য প্রদর্শনের সর্বাধিক সংক্ষিপ্ত এবং পারফরম্যান্ট উপায় হ'ল textContentসম্পত্তি ব্যবহার করা ।
ব্যবহারের চেয়ে দ্রুতinnerHTML । এবং এটি অ্যাকাউন্টে ওভারহেড এড়ানো ছাড়াই।
document.body.textContent = 'a <b> c </b>';</পূরণ না হওয়া অবধি তাদের সামগ্রীটিকে পাঠ্য হিসাবে বিবেচনা করা হবে ।
ডোম উপাদানগুলি ইনটারনেক্সটকে বরাদ্দ করে পাঠ্যকে এইচটিএমএল রূপান্তর করতে সহায়তা করে । ইনারটেক্সট কোনও ফাংশন নয় তবে এটাকে নির্ধারণ করা এমনভাবে কাজ করে যেন পাঠ্যটি এড়িয়ে যায়।
document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';<br>সময় নতুন লাইনের জায়গায় উপাদান যুক্ত করা হয় যা স্টাইল বা স্ক্রিপ্টগুলির মতো নির্দিষ্ট উপাদানগুলিকে ভেঙে ফেলতে পারে। createTextNodeএই সমস্যার প্রবণ নয়।
innerTextকিছু উত্তরাধিকার / নির্দিষ্ট সমস্যা আছে। ব্যবহার করা ভাল textContent।
আপনি আপনার স্ট্রিংয়ের প্রতিটি অক্ষরকে এনকোড করতে পারেন:
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)+";"})
}
test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');
/*************
* \x26 is &ersand (it has to be first),
* \x0A is newline,
*************/<textarea id=test rows="9" cols="55">www.WHAK.com</textarea>একটি ওয়ান-লাইনার (ES6 + এর জন্য):
var escapeHtml = s => (s + '').replace(/[&<>"']/g, m => ({
'&': '&', '<': '<', '>': '>',
'"': '"', "'": '''
})[m]);পুরানো সংস্করণগুলির জন্য:
function escapeHtml(s) {
return (s + '').replace(/[&<>"']/g, function (m) {
return ({
'&': '&', '<': '<', '>': '>',
'"': '"', "'": '''
})[m];
});
}একটি ডিওএম কাঠামো তৈরি করার সময় এই সমস্যাটি এসেছিল। এই প্রশ্নটি আমাকে এটি সমাধানে সহায়তা করেছে। আমি একটি পথ বিভাজক হিসাবে একটি ডাবল শেভ্রন ব্যবহার করতে চেয়েছিলাম, তবে একটি নতুন পাঠ্য নোড সংযুক্ত করার ফলে চরিত্রের পরিবর্তে পালিয়ে যাওয়া চরিত্রের কোডটি প্রদর্শিত হয়েছিল:
var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* this resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* this was key */আপনি যদি ইতিমধ্যে আপনার অ্যাপ্লিকেশনটিতে মডিউল ব্যবহার করেন তবে আপনি এসেসেপ-এইচটিএমএল মডিউলটি ব্যবহার করতে পারেন ।
import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);prototype.jsলাইব্রেরি ব্যবহার করে এটি ব্যবহার করে দেখুন :
string.escapeHTML();আমি এই সমাধান নিয়ে এসেছি।
আসুন ধরে নেওয়া যাক আমরা ব্যবহারকারী বা ডাটাবেস থেকে অনিরাপদ ডেটা সহ উপাদানটিতে কিছু এইচটিএমএল যুক্ত করতে চাই।
var unsafe = 'some unsafe data like <script>alert("oops");</script> here';
var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';
element.html(html);এটি এক্সএসএস আক্রমণগুলির বিরুদ্ধে অনিরাপদ। এবার এটি যুক্ত করুন।
$(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()এটি ব্যবহারের চেয়ে অনেক সহজ এবং এটি সরিয়ে ফেলবে !!! সমস্ত সম্ভাব্য এইচটিএমএল ট্যাগ (আমি আশা করি)।
<script>হয় <script>।