HTML entity encoding कसे कार्य करते
HTML entity म्हणजे एक character reference जो ब्राउझर एकाच अक्षरात parse करतो. पाच reserved HTML characters (<, >, &, ", ') ला HTML म्हणून render केल्यावर नेहमी encoding आवश्यक आहे; बाकी सर्व ऐच्छिक आहे आणि document encoding वर अवलंबून आहे.
- मोड आणि व्याप्ती निवडा. Encode मोड तुमचे इनपुट अक्षर-दर-अक्षर चालतो. Decode मोड entity patterns शोधत इनपुट चालतो. Scope toggle ठरवतो की फक्त पाच HTML-safe chars एन्कोड होतात, किंवा प्रत्येक non-ASCII code point देखील rewrite होतो.
- Entity style निवडा. Named entities (
©) स्त्रोतात चांगले वाचतात. Decimal references (©) आणि hex references (©) नाव न लागता प्रत्येक Unicode code point सांगतात. जुने ईमेल clients आणि XML parsers numeric forms पसंत करतात. - इनपुट चाला. Encode वर, आम्ही प्रत्येक code point वाचतो आणि सुमारे 200 सामान्य named entities च्या built-in table मध्ये शोधतो. सापडले नाहीत तर numeric वर fallback. Decode वर, आम्ही एकाच regex ने scan करतो जो एका pass मध्ये
&name;,&#NNN;आणि&#xHH;match करतो. - अक्षरांशी map करा. Named matches reverse table द्वारे resolve होतात. Numeric matches base 10 किंवा base 16 सह
String.fromCodePointद्वारे जातात. अज्ञात named entities अस्पर्श सोडल्या जातात जेणेकरून partial input loss शिवाय round-trip होते. - लाइव्ह मोड. लाइव्ह मोड टॉगल करा आणि प्रत्येक keystroke 150 ms debounce सह रूपांतरण पुन्हा चालवते. जेव्हा तुम्ही snippet tweaking करत असाल आणि template मध्ये पेस्ट करण्यापूर्वी त्वरित feedback हवे असेल तेव्हा उपयुक्त.
HTML entities एन्कोड का करावे
- user input layout तोडण्यापासून थांबवा. जेव्हा एखादा वापरकर्ता comment box मध्ये एक stray
<टाइप करतो, तो मजकूर थेट HTML मध्ये टाकल्यास पेजचा उर्वरित भाग rewrite होतो. आधी reserved characters एन्कोड केल्यास ब्राउझर tag सुरुवात म्हणून parse करण्याऐवजी character render करतो. - attribute values वैध ठेवा. HTML attribute मध्ये quoted string embed करण्यासाठी embedded quote
"(double-quoted attrs साठी) किंवा'(single-quoted साठी) ने बदलणे आवश्यक आहे. नाही तर parser attribute लवकर बंद करतो आणि ओळीचा उर्वरित भाग stray markup बनतो. - stored data मधील अपघाती HTML निष्प्रभ करा. Logs, bug reports आणि chat exports मध्ये अनेकदा वास्तविक angle brackets आणि ampersands असतात. Documentation पेजमध्ये पेस्ट करण्यापूर्वी dump entity-encode केल्याने ती copy renderer किंवा link auto-detector trigger करण्याऐवजी मजकूर म्हणून दिसते.
- code snippets सुरक्षितपणे share करा. blog post, ईमेल किंवा Slack message मध्ये
<script>alert(1)</script>सारखे example tag पोस्ट करण्यासाठी brackets एन्कोड करणे आवश्यक आहे जेणेकरून snippet run होण्याऐवजी दिसेल. तीच तंत्र RSS feed bodies आणि JSON-LD `description` fields ला लागू होते.
सामान्य वापर
जिथे runtime ला raw मजकूर HTML मध्ये compose होतो तिथे entity encoding दिसते — जरी framework सामान्यतः ते handle करत असले, तरी ते न करणाऱ्या क्षणांसाठी manual tool उपयुक्त आहे.
- Server-rendered templates: Jinja2, ERB, Twig आणि Handlebars डिफॉल्टने auto-escape करतात, पण raw blocks आणि `safe` markers ते बंद करतात — codec तुम्हाला escape काय produce केले असते ते confirm करू देतो.
- ईमेल आणि newsletter authoring: अनेक ESP templating engines merge fields auto-escape करत नाहीत, त्यामुळे user-supplied names मधील smart quotes आणि copyright glyphs ला pre-encoding आवश्यक आहे.
- Documentation आणि code samples: Markdown blog post किंवा static-site snippet मध्ये example HTML tag पेस्ट केल्याने brackets एन्कोड करणे आवश्यक आहे जेणेकरून renderer ते visible मजकूर म्हणून वापरेल.
एक काम केलेले उदाहरण
<script>alert('hi')</script> mode Encode, style Named, scope Minimal सह इनपुटमध्ये पेस्ट करा. आउटपुट <script>alert('hi')</script> वाचतो. Style Numeric hex मध्ये बदला आणि तेच इनपुट <script>alert('hi')</script> produce करते. Mode Decode मध्ये flip करा, encoded string परत पेस्ट करा, आणि मूळ tag अखंड परत येतो.
FAQ
HTML entities म्हणजे काय?
HTML entities म्हणजे character references जे ब्राउझर पेज parse करताना एकाच अक्षरात substitute करतो. ते तीन forms मध्ये येतात: named (जसे & साठी &), decimal numeric (&) आणि hex numeric (&). पाच reserved HTML characters (<, >, &, ", ') ला HTML मध्ये drop केल्यावर encoding आवश्यक आहे. इतर अंदाजे 2,225 named entities symbols, accents आणि Greek letters cover करतात पण document encoding UTF-8 असल्यावर ऐच्छिक आहेत.
Named vs numeric entities कधी वापरावे?
Named entities वापरा जेव्हा तुम्हाला स्त्रोत स्पष्टपणे वाचायचा असेल (template मध्ये © review करणाऱ्या माणसाला ते ताबडतोब समजते). Numeric (decimal किंवा hex) वापरा जेव्हा consumer जुना किंवा कडक असेल — XML parsers, legacy ईमेल clients आणि काही feed readers फक्त HTML5 named entities च्या छोट्या subset ला ओळखतात, आणि ते सर्व numeric forms ओळखतात.
Decoding & सारख्या hex entities handle करते का?
होय. Decoder एकाच regex वापरतो जो एका pass मध्ये तीनही entity forms match करतो: &name;, &#NNN; आणि &#xHH;. Numeric matches base 10 किंवा base 16 वापरून String.fromCodePoint ने resolve होतात. Mixed input (एकाच string मध्ये named आणि numeric) योग्यरित्या decode होतो, आणि अज्ञात names literal text म्हणून सोडले जातात जेणेकरून partial input loss शिवाय round-trip होते.
untrusted input सह वापरण्यासाठी हे सुरक्षित आहे का?
Codec स्वतः browser-only आहे आणि तुमचे इनपुट कुठेही पाठवत नाही. आउटपुट embed करणे सुरक्षित आहे का ते context वर अवलंबून आहे. Entity encoding HTML body आणि attribute-value contexts handle करते, जे OWASP Rule #1 case cover करते. JavaScript contexts (inline event handlers, `<script>` blocks), CSS contexts आणि URL contexts प्रत्येकाला स्वतःच्या encoding rules आवश्यक आहेत — entity encoding alone तिथे पुरेसे नाही. Server-side defence in depth साठी, DOMPurify किंवा तुमच्या framework च्या auto-escape सोबत जोडा.
Browser-side entity encoding user input आणि rendered HTML दरम्यानच्या सीमेवर आहे. रूपांतरण locally करणे म्हणजे तुम्ही मूळ मजकूर third-party tool ला न पाठवता तुमचा framework काय emit करायला हवे होते ते sanity-check करू शकता.