HTML entities encode ചെയ്യുക, decode ചെയ്യുക _

HTML entity encoding എങ്ങനെ പ്രവർത്തിക്കുന്നു

HTML entity ഒരു character reference ആണ്, browser ഒരൊറ്റ ക്യാരക്ടർ ആക്കി parse ചെയ്യുന്നു. <, >, &, ", ' — അഞ്ച് reserved HTML ക്യാരക്ടർ ടെക്സ്റ്റ് HTML ആയി render ചെയ്യുമ്പോൾ encoding ആവശ്യം; ബാക്കിയുള്ളത് optional ആണ്, document encoding-നെ ആശ്രയിക്കുന്നു.

1. Mode, scope തിരഞ്ഞെടുക്കുക. Encode mode ഇൻപുട്ട് ക്യാരക്ടർ by ക്യാരക്ടർ walk ചെയ്യുന്നു. Decode mode entity patterns നോക്കി walk ചെയ്യുന്നു. Scope toggle നിർണ്ണയിക്കുന്നത് അഞ്ച് HTML-safe char മാത്രം encode ചെയ്യുമോ, non-ASCII code point-ഉം rewrite ചെയ്യുമോ.
2. Entity style തിരഞ്ഞെടുക്കുക. Named entities (©) source-ൽ വ്യക്തമായി വായിക്കാം. Decimal reference (©), hex reference (©) ഇവ name ആവശ്യമില്ലാതെ ഓരോ Unicode code point carry ചെയ്യുന്നു. പഴയ email client, XML parser ഇവ numeric form prefer ചെയ്യുന്നു.
3. ഇൻപുട്ട് walk ചെയ്യുക. Encode-ൽ ഓരോ code point വായിച്ച് ഏകദേശം 200 common named entity-യുടെ built-in table-ൽ നോക്കുന്നു. Miss ആയത് numeric-ൽ fallback ചെയ്യുന്നു. Decode-ൽ ഒരൊറ്റ regex ഉപയോഗിച്ച് &name;, &#NNN;, &#xHH; ഒരൊറ്റ pass-ൽ match ചെയ്യുന്നു.
4. ക്യാരക്ടറുകളിലേക്ക് map ചെയ്യുക. Named match reverse table-ൽ resolve ചെയ്യുന്നു. Numeric match String.fromCodePoint base 10 അല്ലെങ്കിൽ base 16 ഉപയോഗിച്ച് process ചെയ്യുന്നു. Unknown named entities untouched ആക്കുന്നു, partial input loss ഇല്ലാതെ round-trip ചെയ്യുന്നു.
5. ലൈവ് മോഡ്. Live mode toggle ചെയ്ത് ഓരോ keystroke-ഉം 150 ms debounce ഉപയോഗിച്ച് conversion re-run ചെയ്യുന്നു. Template-ൽ paste ചെയ്യുന്നതിന് മുൻപ് snippet tweak ചെയ്ത് immediate feedback വേണ്ടവർക്ക് ഉപകരണം.

HTML entities encode ചെയ്യേണ്ടതെന്തുകൊണ്ട്

• User input layout break ചെയ്യുന്നതിൽ നിന്ന് തടയൽ. User comment box-ൽ < ടൈപ്പ് ചെയ്ത്, ആ text HTML-ൽ drop ചെയ്താൽ page-ൻ്റെ ബാക്കി ഭാഗം rewrite ആകും. Reserved characters ആദ്യം encode ചെയ്താൽ browser tag-ൻ്റെ തുടക്കമായി parse ചെയ്യുന്നതിന് പകരം ക്യാരക്ടർ render ചെയ്യും.
• Attribute values valid ആക്കി നിലനിർത്തൽ. HTML attribute-ൽ quoted string embed ചെയ്യുമ്പോൾ embedded quote " (double-quoted attrs-ന്) അല്ലെങ്കിൽ ' (single-quoted-ന്) ആക്കണം. ഇല്ലെങ്കിൽ parser attribute നേരത്തെ close ചെയ്ത് ബാക്കി line stray markup ആകും.
• Store ചെയ്ത data-ൽ accidental HTML defuse ചെയ്യൽ. Log, bug report, chat export ഇവ real angle brackets, ampersands ഉൾക്കൊള്ളുന്നു. Documentation page-ൽ paste ചെയ്യുന്നതിന് മുൻപ് dump entity-encode ചെയ്താൽ copy renderer trigger ചെയ്യുന്നതിന് പകരം text ആയി visible ആകും.
• Code snippets safely share ചെയ്യൽ. Blog post, email, Slack message-ൽ <script>alert(1)</script> പോലുള്ള example tag post ചെയ്യുമ്പോൾ brackets encode ചെയ്തിരിക്കണം — snippet display ആകണം, run ആകരുത്. RSS feed body, JSON-LD `description` field-ലും ഇത് apply ആകും.

സാധാരണ ഉപയോഗങ്ങൾ

Entity encoding raw text runtime-ൽ HTML-ൽ compose ചെയ്യുന്ന ഏതൊരു ഇടത്തും കാണുന്നു — framework സാധാരണ handle ചെയ്യുന്നതാണെങ്കിലും, manual ടൂൾ ഇത് handle ചെയ്യാത്ത moments-ൽ ഉപകരിക്കും.

• Server-rendered templates: Jinja2, ERB, Twig, Handlebars ഇവ default-ൽ auto-escape ചെയ്യുന്നു, raw blocks, `safe` markers അത് off ആക്കുന്നു — codec escape produce ചെയ്തത് confirm ചെയ്യാൻ ഉതകും.
• Email, newsletter authoring: പല ESP templating engine merge field auto-escape ചെയ്യില്ല — user-supplied name-ൽ smart quotes, copyright glyph ഇവ pre-encode ചെയ്യണം.
• Documentation, code samples: Markdown blog post, static-site snippet-ൽ example HTML tag paste ചെയ്യുമ്പോൾ renderer visible text ആയി treat ചെയ്യാൻ brackets encode ചെയ്യണം.

ഒരു worked example

Mode Encode, style Named, scope Minimal-ൽ <script>alert('hi')</script> ഇൻപുട്ട് paste ചെയ്യുക. Output: <script>alert('hi')</script>. Style Numeric hex ആക്കുമ്പോൾ <script>alert('hi')</script>. Mode Decode ആക്കി encoded string paste ചെയ്യുക — ഒറിജിനൽ tag intact ആയി തിരിച്ചുവരുന്നു.

FAQ

HTML entities എന്തെല്ലാം?

HTML entities ബ്രൗസർ page parse ചെയ്യുമ്പോൾ ഒരൊറ്റ ക്യാരക്ടർ ആക്കി substitute ചെയ്യുന്ന character reference ആണ്. മൂന്ന് form: named (& → &), decimal numeric (&), hex numeric (&). <, >, &, ", ' — അഞ്ച് reserved HTML character ടെക്സ്റ്റ് HTML-ൽ drop ചെയ്യുമ്പോൾ encoding ആവശ്യം. ഏകദേശം 2,225 named entity symbols, accents, Greek letters cover ചെയ്യുന്നു, UTF-8 document encoding-ൽ optional.

Named vs numeric entities, ഏത് ഉപയോഗിക്കണം?

Source clearly read ആകണമെങ്കിൽ named entities ഉപയോഗിക്കുക (template-ൽ © review ചെയ്യുന്ന human ഉടൻ മനസ്സിലാക്കും). Consumer പഴയതോ strict ആയതോ ആകുമ്പോൾ numeric (decimal, hex) ഉപയോഗിക്കുക — XML parser, legacy email client, feed reader HTML5 named entity subset-ൻ്റെ ഒരു ഭാഗം മാത്രം recognize ചെയ്യുന്നു, numeric forms recognise ചെയ്യും. Security context-ൽ hex prefer ചെയ്യപ്പെടുന്നു — spec document-ൽ Unicode code-point notation-ഉമൊത്ത് one-for-one ആകുന്നു.

& പോലുള്ള hex entities decode ആകുമോ?

അതെ. Decoder ഒരൊറ്റ regex ഉപയോഗിച്ച് മൂന്ന് entity form ഒരൊറ്റ pass-ൽ match ചെയ്യുന്നു: &name;, &#NNN;, &#xHH;. Numeric match String.fromCodePoint base 10 അല്ലെങ്കിൽ base 16 ഉപയോഗിച്ച് resolve ചെയ്യുന്നു. Mixed input (named, numeric) correctly decode ചെയ്യുന്നു, unknown names literal text ആകുന്നു.

Untrusted input-ഉമൊത്ത് ഉപയോഗിക്കാൻ safe ആണോ?

Codec browser-only ആണ്, ഇൻപുട്ട് ഒരിടത്തും അയക്കില്ല. Output safe ആണോ എന്നത് context-നെ ആശ്രയിക്കുന്നു. Entity encoding HTML body, attribute-value context handle ചെയ്യുന്നു — OWASP Rule #1 case cover ആകുന്നു. JavaScript context (inline event handler, `<script>` block), CSS context, URL context ഇവക്ക് ഓരോ encoding rule ആവശ്യം — entity encoding മാത്രം sufficient അല്ല. Server-side defence-ൽ DOMPurify അല്ലെങ്കിൽ framework auto-escape-ഉമൊത്ത് ഇത് pair ചെയ്യുക.

Browser-side entity encoding user input-ഉം rendered HTML-ഉം തമ്മിലുള്ള അതിർത്തിയിൽ ഇരിക്കുന്നു. Locally convert ചെയ്യൽ framework emit ചെയ്യേണ്ടത് sanity-check ചെയ്യാൻ ഒറിജിനൽ text third-party tool-ലേക്ക് അയക്കാതെ കഴിയുന്നു.