HTML એન્ટિટી એન્કોડિંગ કેવી રીતે કામ કરે છે
HTML એન્ટિટી એ એક કેરેક્ટર રેફરન્સ છે જેને બ્રાઉઝર પાર્સ કરીને એક જ અક્ષરમાં પાછું ફેરવે છે. પાંચ આરક્ષિત HTML અક્ષરો (<, >, &, ", ') ને લખાણ HTML તરીકે રેન્ડર થાય ત્યારે હંમેશા એન્કોડિંગની જરૂર પડે છે; બાકીનું બધું વૈકલ્પિક છે અને ડોક્યુમેન્ટ એન્કોડિંગ પર આધાર રાખે છે.
- Mode scope pick. એન્કોડ મોડ તમારા ઇનપુટને અક્ષર-દર-અક્ષર ચાલે છે. ડિકોડ મોડ ઇનપુટમાં એન્ટિટી પેટર્ન શોધતો ચાલે છે. સ્કોપ ટૉગલ નક્કી કરે છે કે માત્ર પાંચ HTML-સલામત અક્ષરો જ એન્કોડ થાય, કે પછી દરેક નૉન-ASCII કોડ પોઇન્ટ પણ ફરી લખાય.
- Entity style pick. નામવાળી એન્ટિટી (
©) સોર્સમાં સારી રીતે વંચાય છે. દશાંશ રેફરન્સ (©) અને hex રેફરન્સ (©) નામની જરૂર વગર દરેક Unicode કોડ પોઇન્ટ વહન કરે છે. જૂના ઈમેલ ક્લાયન્ટ અને XML પાર્સર સંખ્યાત્મક રૂપ પસંદ કરે છે. - Input walk. એન્કોડ વખતે, અમે દરેક કોડ પોઇન્ટ વાંચીને તેને લગભગ 200 સામાન્ય નામવાળી એન્ટિટીના બિલ્ટ-ઇન કોષ્ટક સામે શોધીએ છીએ. ન મળે તે સંખ્યાત્મક રૂપ પર પાછા પડે છે. ડિકોડ વખતે, અમે એક જ regex વડે સ્કેન કરીએ છીએ જે
&name;,&#NNN;, અને&#xHH;ને એક જ પાસમાં મેચ કરે છે. - Characters map. નામવાળાં મેચ એક રિવર્સ કોષ્ટક મારફતે ઉકેલાય છે. સંખ્યાત્મક મેચ
String.fromCodePointમારફતે બેઝ 10 કે બેઝ 16 સાથે જાય છે. અજાણી નામવાળી એન્ટિટી અકબંધ રખાય છે જેથી આંશિક ઇનપુટ કોઈ નુકસાન વગર રાઉન્ડ-ટ્રિપ થાય. - લાઇવ મોડ. લાઇવ મોડ ટૉગલ કરો અને દરેક કીસ્ટ્રોક 150 ms ડિબાઉન્સ સાથે રૂપાંતરણ ફરી ચલાવે છે. જ્યારે તમે કોઈ સ્નિપેટ સુધારી રહ્યા હો અને તેને કોઈ ટેમ્પ્લેટમાં પેસ્ટ કરતા પહેલાં તાત્કાલિક પ્રતિસાદ ઇચ્છતા હો ત્યારે ઉપયોગી.
HTML entities encode કેમ?
- વપરાશકર્તાના ઇનપુટને લેઆઉટ તોડતા અટકાવો. જ્યારે કોઈ વપરાશકર્તા કોમેન્ટ બોક્સમાં છૂટોછવાયો
<ટાઇપ કરે, ત્યારે એ લખાણને સીધું HTML માં મૂકવાથી પેજનો બાકીનો ભાગ ફરી લખાઈ જાય છે. આરક્ષિત અક્ષરોને પહેલાં એન્કોડ કરવાનો અર્થ એ કે બ્રાઉઝર તેને કોઈ ટેગની શરૂઆત તરીકે પાર્સ કરવાને બદલે અક્ષર તરીકે રેન્ડર કરે છે. - એટ્રિબ્યૂટ મૂલ્યોને માન્ય રાખો. કોઈ HTML એટ્રિબ્યૂટની અંદર quoted સ્ટ્રિંગ એમ્બેડ કરવા માટે અંદરના quote ને
"(ડબલ-ક્વોટેડ એટ્રિબ્યૂટ માટે) કે'(સિંગલ-ક્વોટેડ માટે) સાથે બદલવાની જરૂર પડે છે. નહીંતર પાર્સર એટ્રિબ્યૂટ વહેલું બંધ કરી દે છે અને બાકીની પંક્તિ છૂટુંછવાયું માર્કઅપ બની જાય છે. - સંગ્રહિત ડેટામાં અજાણતાં આવેલ HTML ને નિષ્ક્રિય કરો. લોગ, બગ રિપોર્ટ અને ચેટ એક્સપોર્ટમાં ઘણી વાર સાચા એંગલ બ્રેકેટ અને એમ્પરસૅન્ડ હોય છે. ડમ્પને કોઈ ડોક્યુમેન્ટેશન પેજમાં પેસ્ટ કરતા પહેલાં એન્ટિટી-એન્કોડ કરવાથી એ નકલ રેન્ડરર કે લિંક ઑટો-ડિટેક્ટરને ટ્રિગર કરવાને બદલે લખાણ તરીકે દૃશ્યમાન રહે છે.
- કોડ સ્નિપેટ્સ સુરક્ષિત રીતે શેર કરો. કોઈ બ્લોગ પોસ્ટ, ઈમેલ, કે Slack સંદેશમાં
<script>alert(1)</script>જેવો ઉદાહરણ ટેગ પોસ્ટ કરવા માટે બ્રેકેટ એન્કોડ કરવાની જરૂર પડે છે જેથી સ્નિપેટ ચાલવાને બદલે દેખાય. એ જ રીત RSS ફીડ બોડી અને JSON-LD `description` ક્ષેત્રોને પણ આવરી લે છે.
સામાન્ય ઉપયોગ
જ્યાં પણ કાચું લખાણ રનટાઇમ પર HTML માં રચાય ત્યાં એન્ટિટી એન્કોડિંગ આવે છે — ભલે ફ્રેમવર્ક સામાન્ય રીતે તે તમારા માટે સંભાળતું હોય, જે ક્ષણોમાં તે નથી સંભાળતું ત્યારે મેન્યુઅલ ટૂલ ઉપયોગી છે.
- સર્વર-રેન્ડર્ડ ટેમ્પ્લેટ: Jinja2, ERB, Twig, અને Handlebars ડિફૉલ્ટ રૂપે ઑટો-એસ્કેપ કરે છે, પણ raw બ્લોક અને `safe` માર્કર તેને બંધ કરી દે છે — કોડેક તમને ખાતરી કરવા દે છે કે એસ્કેપ શું બનાવ્યું હોત.
- ઈમેલ અને ન્યૂઝલેટર લેખન: ઘણાં ESP ટેમ્પ્લેટિંગ એન્જિન મર્જ ક્ષેત્રોને ઑટો-એસ્કેપ કરતાં નથી, તેથી વપરાશકર્તાએ આપેલાં નામોમાંના સ્માર્ટ ક્વોટ્સ અને કૉપીરાઇટ ગ્લિફને પ્રી-એન્કોડિંગની જરૂર પડે છે.
- ડોક્યુમેન્ટેશન અને કોડ નમૂના: કોઈ Markdown બ્લોગ પોસ્ટ કે સ્ટેટિક-સાઇટ સ્નિપેટમાં ઉદાહરણ HTML ટેગ પેસ્ટ કરવા માટે બ્રેકેટ એન્કોડ કરવાની જરૂર પડે છે જેથી રેન્ડરર તેને દૃશ્યમાન લખાણ તરીકે ગણે.
ઉદાહરણ
ઇનપુટમાં <script>alert('hi')</script> પેસ્ટ કરો, મોડ Encode પર, સ્ટાઇલ Named, સ્કોપ Minimal સેટ કરીને. આઉટપુટ આવે છે <script>alert('hi')</script>. સ્ટાઇલને Numeric hex પર બદલો અને એ જ ઇનપુટ <script>alert('hi')</script> બનાવે છે. મોડ Decode પર ફેરવો, એન્કોડ થયેલી સ્ટ્રિંગ ફરી પેસ્ટ કરો, અને મૂળ ટેગ અકબંધ પાછો આવે છે.
FAQ
HTML entities શું?
HTML એન્ટિટી એ કેરેક્ટર રેફરન્સ છે જેને બ્રાઉઝર પેજ પાર્સ કરતી વખતે પાછા એક જ અક્ષરમાં બદલી નાખે છે. તે ત્રણ રૂપમાં આવે છે: નામવાળી (જેમ કે &, જે & દર્શાવે છે), દશાંશ સંખ્યાત્મક (&), અને hex સંખ્યાત્મક (&). પાંચ આરક્ષિત HTML અક્ષરો (<, >, &, ", ') ને જ્યારે પણ લખાણ HTML માં મૂકાય ત્યારે એન્કોડિંગની જરૂર પડે છે. બાકીની આશરે 2,225 નામવાળી એન્ટિટી પ્રતીકો, ઉચ્ચારચિહ્નો અને ગ્રીક અક્ષરોને આવરી લે છે, પણ એક વાર ડોક્યુમેન્ટ એન્કોડિંગ UTF-8 હોય પછી તે વૈકલ્પિક છે.
નામવાળી અને સંખ્યાત્મક એન્ટિટી ક્યારે વાપરવી?
જ્યારે તમે ઇચ્છો કે સોર્સ સ્પષ્ટ વંચાય ત્યારે નામવાળી એન્ટિટી વાપરો (કોઈ માણસ ટેમ્પ્લેટમાં © તપાસતો હોય તો તરત સમજી જાય છે). જ્યારે વાંચનાર જૂનું કે વધુ કડક હોય ત્યારે સંખ્યાત્મક (દશાંશ કે hex) વાપરો — XML પાર્સર, જૂના ઈમેલ ક્લાયન્ટ અને કેટલાક ફીડ રીડર HTML5 નામવાળી એન્ટિટીનો માત્ર નાનો સબસેટ ઓળખે છે, અને તે બધાં સંખ્યાત્મક રૂપ ઓળખે છે. સુરક્ષા-કેન્દ્રિત સંદર્ભોમાં hex જીતે છે કારણ કે તે સ્પેક દસ્તાવેજોમાં વપરાતા Unicode કોડ-પોઇન્ટ સંકેત સાથે એક-થી-એક બંધ બેસે છે.
શું ડિકોડિંગ & જેવી hex એન્ટિટી સંભાળે છે?
હા. ડિકોડર એક જ regex વાપરે છે જે ત્રણેય એન્ટિટી રૂપ એક પાસમાં મેચ કરે છે: &name;, &#NNN;, અને &#xHH;. સંખ્યાત્મક મેચ String.fromCodePoint વડે બેઝ 10 કે બેઝ 16 વાપરીને ઉકેલાય છે. મિશ્ર ઇનપુટ (એક જ સ્ટ્રિંગમાં નામવાળી અને સંખ્યાત્મક) સાચી રીતે ડિકોડ થાય છે, અને અજાણ્યાં નામ શાબ્દિક લખાણ તરીકે રખાય છે જેથી આંશિક ઇનપુટ કોઈ નુકસાન વગર રાઉન્ડ-ટ્રિપ થાય.
શું આ અવિશ્વસનીય ઇનપુટ માટે સુરક્ષિત છે?
કોડેક પોતે માત્ર બ્રાઉઝરમાં જ ચાલે છે અને તમારું ઇનપુટ ક્યાંય મોકલતું નથી. આઉટપુટ એમ્બેડ કરવું સલામત છે કે નહીં તે સંદર્ભ પર આધાર રાખે છે. એન્ટિટી એન્કોડિંગ HTML બોડી અને એટ્રિબ્યૂટ-મૂલ્ય સંદર્ભો સંભાળે છે, જે OWASP Rule #1 કેસને આવરી લે છે. JavaScript સંદર્ભો (ઇનલાઇન ઇવેન્ટ હેન્ડલર, `<script>` બ્લોક), CSS સંદર્ભો, અને URL સંદર્ભો—દરેકને પોતાના એન્કોડિંગ નિયમોની જરૂર પડે છે—એકલી એન્ટિટી એન્કોડિંગ ત્યાં પૂરતી નથી. સર્વર-સાઇડ ઊંડાણભર્યા સંરક્ષણ માટે, તેને DOMPurify જેવા સંદર્ભ-જાગૃત ટેમ્પ્લેટિંગ એન્જિન કે તમારા ફ્રેમવર્કના ઑટો-એસ્કેપ સાથે જોડો.
Browser-side entity encoding user input rendered HTML boundary. Local conversion — framework emitted sanity-check, original text third-party tool send ન.