HTML entities-ஐ encode அல்லது decode செய்யுங்கள் _

HTML entity encoding எவ்வாறு வேலை செய்கிறது

ஒரு HTML entity என்பது உலாவி ஒரு எழுத்தாக parse செய்யும் ஒரு character reference. ஐந்து reserved HTML characters (<, >, &, ", ') உரை HTML ஆக render ஆகும்போது எப்போதும் encoding தேவைப்படுகின்றன; மற்றவை optional மற்றும் document encoding-ஐ பொறுத்தது.

1. ஒரு mode மற்றும் scope தேர்ந்தெடுங்கள். Encode mode உங்கள் உள்ளீட்டை character-by-character நடக்கிறது. Decode mode entity patterns தேடி உள்ளீட்டை நடக்கிறது. scope toggle ஐந்து HTML-safe chars மட்டுமே encode ஆகுமா அல்லது ஒவ்வொரு non-ASCII code point-உம் மீண்டும் எழுதப்படுமா என்று தீர்மானிக்கிறது.
2. ஒரு entity style தேர்ந்தெடுங்கள். Named entities (©) source-ல் நன்றாக படிக்கப்படுகின்றன. Decimal references (©) மற்றும் hex references (©) ஒரு பெயர் தேவையின்றி ஒவ்வொரு Unicode code point-ஐயும் கொண்டு செல்கின்றன. பழைய email clients மற்றும் XML parsers numeric வடிவங்களை விரும்புகின்றன.
3. உள்ளீட்டை நடக்கவும். Encode செய்யும்போது, நாங்கள் ஒவ்வொரு code point-ஐயும் படித்து சுமார் 200 பொதுவான named entities-ன் built-in table-ல் தேடுகிறோம். Miss ஆனவை numeric-க்கு fallback ஆகின்றன. Decode செய்யும்போது, ஒரே pass-ல் &name;, &#NNN; மற்றும் &#xHH;-ஐ match செய்யும் single regex மூலம் scan செய்கிறோம்.
4. எழுத்துக்களுக்கு map செய்யுங்கள். Named matches reverse table மூலம் resolve செய்கின்றன. Numeric matches base 10 அல்லது base 16 உடன் String.fromCodePoint மூலம் செல்கின்றன. அறியப்படாத named entities தொடவே தொடாமல் விடப்படுகின்றன, இதனால் partial input round-trip ஆகும் இழப்பின்றி.
5. நேரடி பயன்முறை. Live mode toggle செய்து ஒவ்வொரு keystroke-உம் 150 ms debounce உடன் மாற்றத்தை மீண்டும் இயக்கும். ஒரு snippet-ஐ நுண்ணியமாக்கி template-ல் ஒட்டுவதற்கு முன்பு உடனடி feedback வேண்டியிருக்கும்போது உதவியானது.

HTML entities-ஐ ஏன் encode செய்ய வேண்டும்

• user input layout-ஐ சிதைக்காமல் தடுக்கவும். ஒரு user comment box-ல் ஒரு stray < தட்டச்சு செய்யும்போது, அந்த text-ஐ நேரடியாக HTML-ல் இட்டால் மீதமுள்ள பக்கம் மாறிவிடும். முதலில் reserved characters-ஐ encode செய்வதால் உலாவி எழுத்தை ஒரு tag-ன் தொடக்கமாக parse செய்வதற்கு பதிலாக அதை render செய்கிறது.
• attribute values valid-ஆக வைத்திருங்கள். ஒரு HTML attribute-க்குள் quoted string embed செய்வதற்கு embedded quote-ஐ " (double-quoted attrs-க்கு) அல்லது ' (single-quoted-க்கு) மாற்றுவது தேவை. இல்லையெனில் parser attribute-ஐ முன்கூட்டியே மூடி மீதமுள்ள வரி stray markup ஆகும்.
• சேமிக்கப்பட்ட data-ல் தற்செயலான HTML-ஐ நடுநிலையாக்கவும். Logs, bug reports மற்றும் chat exports பெரும்பாலும் real angle brackets மற்றும் ampersands கொண்டிருக்கும். documentation பக்கத்தில் ஒட்டுவதற்கு முன்பு dump-ஐ entity-encode செய்வதால் அந்த copy renderer அல்லது link auto-detector-ஐ trigger செய்வதற்கு பதிலாக text ஆக தெரியும்.
• code snippets பாதுகாப்பாக share செய்யுங்கள். ஒரு blog post, email அல்லது Slack message-ல் <script>alert(1)</script> போன்ற example tag post செய்வதற்கு snippet இயங்காமல் display ஆக brackets encode தேவை. RSS feed bodies மற்றும் JSON-LD `description` fields-க்கும் இதே technique பொருந்தும்.

பொதுவான பயன்பாடுகள்

Entity encoding runtime-ல் raw text HTML-ல் compose ஆகும் இடங்களில் எல்லாம் காட்சியளிக்கிறது — framework பொதுவாக அதை கையாளும் போதும், அது கையாளாத தருணங்களில் manual கருவி பயனுள்ளதாக இருக்கும்.

• Server-rendered templates: Jinja2, ERB, Twig மற்றும் Handlebars default-ஆக auto-escape செய்கின்றன, ஆனால் raw blocks மற்றும் `safe` markers அதை அணைக்கின்றன — codec escape என்ன produce செய்திருக்கும் என்று confirm செய்ய உதவுகிறது.
• Email மற்றும் 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 ஒட்டுவதற்கு renderer அதை visible text ஆக கருதும்படி brackets encode தேவை.

ஒரு worked example

Mode Encode, style Named, scope Minimal-உடன் <script>alert('hi')</script>-ஐ input-ல் ஒட்டுங்கள். வெளியீடு <script>alert('hi')</script> என்று படிக்கப்படும். style-ஐ Numeric hex-க்கு மாற்றினால் அதே input <script>alert('hi')</script> produce செய்யும். mode-ஐ Decode-க்கு மாற்றி, encoded string மீண்டும் ஒட்டுங்கள், அசல் tag intact ஆக திரும்புகிறது.

FAQ

HTML entities என்றால் என்ன?

HTML entities என்பது பக்கத்தை parse செய்யும்போது உலாவி ஒரு எழுத்தாக மாற்றும் character references. அவை மூன்று வடிவங்களில் வருகின்றன: named (like & for &), decimal numeric (&) மற்றும் hex numeric (&). ஐந்து reserved HTML characters (<, >, &, ", ') text HTML-ல் drop ஆகும் போதெல்லாம் encoding தேவை. மற்ற சுமார் 2,225 named entities symbols, accents மற்றும் Greek letters cover செய்கின்றன ஆனால் document encoding UTF-8 ஆக இருந்தால் optional.

Named vs numeric entities எப்போது பயன்படுத்த வேண்டும்?

source தெளிவாக படிக்க வேண்டும் என்றால் named entities பயன்படுத்துங்கள் (ஒரு மனிதன் template-ல் © பார்க்கும்போது உடனே புரிகிறது). consumer பழையது அல்லது stricter என்றால் numeric (decimal அல்லது hex) பயன்படுத்துங்கள் — XML parsers, legacy email clients மற்றும் சில feed readers HTML5 named entities-ன் ஒரு சிறிய subset மட்டுமே அடையாளம் காண்கின்றன, ஆனால் எல்லாரும் numeric வடிவங்களை அடையாளம் காண்கிறார்கள். Security-focused contexts-ல் hex வெற்றிபெறுகிறது ஏனெனில் அது spec documents-ல் பயன்படுத்தப்படும் Unicode code-point notation-உடன் one-for-one line up ஆகிறது.

Decoding & போன்ற hex entities-ஐ கையாளுமா?

ஆம். decoder ஒரே pass-ல் மூன்று entity வடிவங்களையும் match செய்யும் single regex பயன்படுத்துகிறது: &name;, &#NNN; மற்றும் &#xHH;. Numeric matches base 10 அல்லது base 16 உடன் String.fromCodePoint மூலம் resolve ஆகின்றன. Mixed input (அதே string-ல் named மற்றும் numeric) சரியாக decode ஆகிறது, மற்றும் அறியப்படாத names literal text ஆக விடப்படுகின்றன, இதனால் partial input இழப்பின்றி round-trip ஆகும்.

இது untrusted input-உடன் பயன்படுத்த பாதுகாப்பானதா?

codec itself browser-only மற்றும் உங்கள் input-ஐ எங்கும் அனுப்புவதில்லை. வெளியீட்டை embed செய்வது பாதுகாப்பானதா என்பது context-ஐ பொறுத்தது. Entity encoding HTML body மற்றும் attribute-value contexts-ஐ கையாளுகிறது, இது OWASP Rule #1 case-ஐ cover செய்கிறது. JavaScript contexts (inline event handlers, `<script>` blocks), CSS contexts மற்றும் URL contexts ஒவ்வொன்றும் தங்கள் சொந்த encoding rules தேவைப்படுகின்றன — entity encoding மட்டும் அங்கே போதுமானதில்லை. Server-side defence in depth-க்கு இதை DOMPurify அல்லது உங்கள் framework-ன் auto-escape போன்ற context-aware templating engine-உடன் இணைத்துப் பயன்படுத்துங்கள்.

Browser-side entity encoding user input மற்றும் rendered HTML இடையே உள்ள எல்லையில் இருக்கிறது. Conversion locally செய்வதால் original text மூன்றாம் தரப்பு கருவிக்கு அனுப்பாமல் உங்கள் framework என்ன emit செய்திருக்கும் என்று sanity-check செய்யலாம்.