HTML এন্টিটি এনকোডিং কীভাবে কাজ করে
একটি HTML এন্টিটি হলো একটি ক্যারেক্টার রেফারেন্স যা ব্রাউজার পার্স করে একটি একক অক্ষরে ফিরিয়ে দেয়। পাঁচটি সংরক্ষিত HTML অক্ষর (<, >, &, ", ') টেক্সট HTML হিসেবে রেন্ডার করার সময় সবসময় এনকোডিং প্রয়োজন; বাকিগুলো ঐচ্ছিক এবং ডকুমেন্ট এনকোডিংয়ের উপর নির্ভর করে।
- মোড ও পরিসর বেছে নিন. এনকোড মোড আপনার ইনপুট প্রতিটি অক্ষর ধরে ধরে হাঁটে। ডিকোড মোড এন্টিটি প্যাটার্ন খুঁজতে ইনপুট স্ক্যান করে। স্কোপ টগল নির্ধারণ করে শুধুমাত্র পাঁচটি HTML-নিরাপদ অক্ষর এনকোড হবে, নাকি প্রতিটি নন-ASCII কোড পয়েন্টও লেখা হবে।
- এন্টিটি স্টাইল বেছে নিন. নামযুক্ত এন্টিটি (
©) সোর্সে পড়তে ভালো। দশমিক রেফারেন্স (©) ও হেক্স রেফারেন্স (©) নাম ছাড়াই প্রতিটি Unicode কোড পয়েন্ট বহন করে। পুরানো ইমেইল ক্লায়েন্ট ও XML পার্সার সংখ্যাসূচক ফর্ম পছন্দ করে। - ইনপুট স্ক্যান করুন. এনকোডে, আমরা প্রতিটি কোড পয়েন্ট পড়ে প্রায় ২০০টি সাধারণ নামযুক্ত এন্টিটির বিল্ট-ইন টেবিলে খুঁজি। মিল না পেলে সংখ্যাসূচকে ফলব্যাক করে। ডিকোডে, একটি একক রেগেক্স দিয়ে
&name;,&#NNN;ও&#xHH;একটি পাসে মিলানো হয়। - অক্ষরে ম্যাপ করুন. নামযুক্ত মিল রিভার্স টেবিলের মাধ্যমে রিজলভ হয়। সংখ্যাসূচক মিল বেস ১০ বা বেস ১৬ দিয়ে
String.fromCodePointএর মাধ্যমে যায়। অজানা নামযুক্ত এন্টিটি অপরিবর্তিত থাকে। - লাইভ মোড. লাইভ মোড টগল করুন এবং প্রতিটি কীস্ট্রোক ১৫০ মিলিসেকেন্ড ডিবাউন্স সহ রূপান্তর পুনরায় চালায়। টেমপ্লেটে পেস্ট করার আগে স্নিপেট টুইক করার সময় তাৎক্ষণিক ফিডব্যাকের জন্য সহায়ক।
HTML এন্টিটি কেন এনকোড করবেন
- ব্যবহারকারীর ইনপুট লেআউট ভাঙা থেকে রক্ষা করুন. যখন কোনো ব্যবহারকারী একটি কমেন্ট বক্সে
<টাইপ করে, সেই টেক্সট সরাসরি HTML-এ ড্রপ করলে পেজের বাকি অংশ পুনর্লিখন হয়। প্রথমে সংরক্ষিত অক্ষর এনকোড করলে ব্রাউজার ট্যাগের শুরু হিসেবে পার্স না করে অক্ষরটি রেন্ডার করে। - অ্যাট্রিবিউট মান বৈধ রাখুন. HTML অ্যাট্রিবিউটের ভেতরে উদ্ধৃত স্ট্রিং এম্বেড করতে এম্বেডেড উদ্ধৃতি
"(দ্বি-উদ্ধৃতি অ্যাট্রের জন্য) বা'(একক-উদ্ধৃতির জন্য) দিয়ে প্রতিস্থাপন করতে হয়। নাহলে পার্সার অ্যাট্রিবিউট তাড়াতাড়ি বন্ধ করে বাকি লাইন বিচ্ছিন্ন মার্কআপ হয়। - সংরক্ষিত ডেটায় আকস্মিক HTML নিষ্ক্রিয় করুন. লগ, বাগ রিপোর্ট ও চ্যাট এক্সপোর্টে প্রায়ই বাস্তব অ্যাঙ্গেল ব্র্যাকেট ও অ্যাম্পারস্যান্ড থাকে। ডকুমেন্টেশন পেজে পেস্ট করার আগে ডাম্প এন্টিটি-এনকোড করলে সেই কপি রেন্ডারার বা লিঙ্ক অটো-ডিটেক্টর ট্রিগার না করে টেক্সট হিসেবে দৃশ্যমান থাকে।
- কোড স্নিপেট নিরাপদে শেয়ার করুন. ব্লগ পোস্ট, ইমেইল বা Slack বার্তায়
<script>alert(1)</script>এর মতো উদাহরণ ট্যাগ পোস্ট করতে ব্র্যাকেট এনকোড করতে হয় যাতে স্নিপেট রান না করে দেখা যায়। একই কৌশল RSS ফিড বডি ও JSON-LD `description` ফিল্ডেও প্রযোজ্য।
সাধারণ ব্যবহার
এন্টিটি এনকোডিং যেখানেই রানটাইমে কাঁচা টেক্সট HTML-এ কম্পোজ হয় সেখানে দেখা যায় — ফ্রেমওয়ার্ক সাধারণত এটি সামলালেও, ম্যানুয়াল টুলটি যখন সামলায় না তখন কাজে আসে।
- সার্ভার-রেন্ডার টেমপ্লেট: Jinja2, ERB, Twig ও Handlebars ডিফল্টে অটো-এস্কেপ করে, কিন্তু raw ব্লক ও `safe` মার্কার সেটি বন্ধ করে — কোডেক নিশ্চিত করতে দেয় এস্কেপ কী উৎপন্ন করত।
- ইমেইল ও নিউজলেটার রচনা: অনেক ESP টেমপ্লেটিং ইঞ্জিন মার্জ ফিল্ড অটো-এস্কেপ করে না, তাই ব্যবহারকারী-সরবরাহিত নামে স্মার্ট কোটেশন ও কপিরাইট গ্লিফ পূর্ব-এনকোডিং প্রয়োজন।
- ডকুমেন্টেশন ও কোড স্যাম্পল: Markdown ব্লগ পোস্ট বা স্ট্যাটিক-সাইট স্নিপেটে উদাহরণ HTML ট্যাগ পেস্ট করতে ব্র্যাকেট এনকোড করতে হয় যাতে রেন্ডারার দৃশ্যমান টেক্সট হিসেবে ট্রিট করে।
একটি কাজের উদাহরণ
মোড এনকোড, স্টাইল Named, স্কোপ Minimal সেট করে ইনপুটে <script>alert('hi')</script> পেস্ট করুন। আউটপুটে পাবেন <script>alert('hi')</script>। স্টাইল Numeric hex-এ পরিবর্তন করলে একই ইনপুট দেয় <script>alert('hi')</script>। মোড Decode-এ পরিবর্তন করে এনকোড করা স্ট্রিং ফিরিয়ে দিলে মূল ট্যাগ অক্ষুণ্ণ ফেরত আসে।
FAQ
HTML এন্টিটি কী?
HTML এন্টিটি হলো ক্যারেক্টার রেফারেন্স যা ব্রাউজার পেজ পার্স করার সময় একক অক্ষরে ফিরিয়ে দেয়। এগুলো তিনটি রূপে আসে: নামযুক্ত (যেমন & জন্য &), দশমিক সংখ্যাসূচক (&), এবং হেক্স সংখ্যাসূচক (&)। পাঁচটি সংরক্ষিত HTML অক্ষর (<, >, &, ", ') যেকোনো সময় HTML-এ ড্রপ করা হলে এনকোডিং প্রয়োজন।
কখন নামযুক্ত বনাম সংখ্যাসূচক এন্টিটি ব্যবহার করব?
নামযুক্ত এন্টিটি ব্যবহার করুন যখন সোর্স স্পষ্টভাবে পড়তে চান। সংখ্যাসূচক (দশমিক বা হেক্স) ব্যবহার করুন যখন ভোক্তা পুরানো বা কঠোর — XML পার্সার, লিগেসি ইমেইল ক্লায়েন্ট ও কিছু ফিড রিডার HTML5 নামযুক্ত এন্টিটির একটি ছোট উপসেটই চেনে। নিরাপত্তা-কেন্দ্রিক প্রসঙ্গে হেক্স জয়ী হয় কারণ এটি স্পেসিফিকেশন ডকুমেন্টে Unicode কোড-পয়েন্ট নোটেশনের সাথে এক-এক মেলে।
ডিকোডিং কি & এর মতো হেক্স এন্টিটি পরিচালনা করে?
হ্যাঁ। ডিকোডার একটি একক রেগেক্স ব্যবহার করে যা একটি পাসে তিনটি এন্টিটি ফর্ম মেলায়: &name;, &#NNN;, এবং &#xHH;। সংখ্যাসূচক মিল বেস ১০ বা বেস ১৬ ব্যবহার করে String.fromCodePoint দিয়ে রিজলভ হয়। মিশ্র ইনপুট (একই স্ট্রিংয়ে নামযুক্ত ও সংখ্যাসূচক) সঠিকভাবে ডিকোড হয়।
অবিশ্বস্ত ইনপুটের সাথে ব্যবহারের জন্য এটি কি নিরাপদ?
কোডেকটি নিজেই ব্রাউজার-ভিত্তিক এবং আপনার ইনপুট কোথাও পাঠায় না। আউটপুট এম্বেড করা নিরাপদ কিনা তা কনটেক্সটের উপর নির্ভর করে। এন্টিটি এনকোডিং HTML বডি ও অ্যাট্রিবিউট-মান কনটেক্সট সামলায়। JavaScript কনটেক্সট, CSS কনটেক্সট ও URL কনটেক্সট প্রতিটির নিজস্ব এনকোডিং নিয়ম প্রয়োজন — শুধুমাত্র এন্টিটি এনকোডিং সেখানে যথেষ্ট নয়।
ব্রাউজার-সাইড এন্টিটি এনকোডিং ব্যবহারকারীর ইনপুট ও রেন্ডার করা HTML-এর মধ্যবর্তী সীমানায় কাজ করে। রূপান্তর স্থানীয়ভাবে করা মানে আপনার ফ্রেমওয়ার্ক কী নির্গত করত তা স্যানিটি-চেক করা যায়, মূল টেক্সট কোনো তৃতীয় পক্ষের টুলে না পাঠিয়েই।