HTML ਏਂਟਿਟੀ ਏਨਕੋਡਿੰਗ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ
ਇੱਕ HTML ਏਂਟਿਟੀ ਇੱਕ ਅੱਖਰ ਸੰਦਰਭ ਹੈ ਜਿਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਾਪਸ ਇੱਕ ਅੱਖਰ ਵਿੱਚ ਪਾਰਸ ਕਰਦਾ ਹੈ। ਪੰਜ ਰਾਖਵੇਂ HTML ਅੱਖਰ (<, >, &, ", ') ਨੂੰ ਹਮੇਸ਼ਾ ਏਨਕੋਡਿੰਗ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਟੈਕਸਟ HTML ਵਜੋਂ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ।
- ਇੱਕ ਮੋਡ ਅਤੇ ਦਾਇਰਾ ਚੁਣੋ. ਏਨਕੋਡ ਮੋਡ ਇੱਕ-ਇੱਕ ਅੱਖਰ ਕਰਕੇ ਇਨਪੁੱਟ ਤੇ ਚੱਲਦਾ ਹੈ। ਡੀਕੋਡ ਮੋਡ ਏਂਟਿਟੀ ਪੈਟਰਨਾਂ ਦੀ ਭਾਲ ਕਰਦਾ ਹੈ। ਦਾਇਰਾ ਟੌਗਲ ਫੈਸਲਾ ਕਰਦਾ ਹੈ ਕਿ ਕੇਵਲ ਪੰਜ HTML-ਸੁਰੱਖਿਅਤ ਅੱਖਰ ਏਨਕੋਡ ਹੋਣਗੇ ਜਾਂ ਹਰ ਗੈਰ-ASCII ਕੋਡ ਪੁਆਇੰਟ ਵੀ।
- ਇੱਕ ਏਂਟਿਟੀ ਸ਼ੈਲੀ ਚੁਣੋ. ਨਾਮੀ ਏਂਟਿਟੀਆਂ (
©) ਸਰੋਤ ਵਿੱਚ ਚੰਗੀ ਤਰ੍ਹਾਂ ਪੜ੍ਹੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। ਦਸ਼ਮਲਵ ਸੰਦਰਭ (©) ਅਤੇ hex ਸੰਦਰਭ (©) ਨਾਮ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਹਰ Unicode ਕੋਡ ਪੁਆਇੰਟ ਲੈ ਜਾਂਦੇ ਹਨ। ਪੁਰਾਣੇ ਈਮੇਲ ਕਲਾਇੰਟ ਅਤੇ XML ਪਾਰਸਰ ਸੰਖਿਆਤਮਕ ਰੂਪਾਂ ਨੂੰ ਤਰਜੀਹ ਦਿੰਦੇ ਹਨ। - ਇਨਪੁੱਟ ਤੇ ਚੱਲੋ. ਏਨਕੋਡ ਤੇ, ਅਸੀਂ ਹਰ ਕੋਡ ਪੁਆਇੰਟ ਪੜ੍ਹਦੇ ਹਾਂ ਅਤੇ ਲਗਭਗ 200 ਆਮ ਨਾਮੀ ਏਂਟਿਟੀਆਂ ਦੀ ਬਿਲਟ-ਇਨ ਸਾਰਣੀ ਵਿੱਚ ਭਾਲਦੇ ਹਾਂ। ਗੁੰਮ ਜਾਣ ਤੇ ਸੰਖਿਆਤਮਕ ਤੇ ਵਾਪਸ ਜਾਂਦੇ ਹਾਂ। ਡੀਕੋਡ ਤੇ, ਅਸੀਂ ਇੱਕ regex ਨਾਲ ਸਕੈਨ ਕਰਦੇ ਹਾਂ ਜੋ
&name;,&#NNN;, ਅਤੇ&#xHH;ਇੱਕ ਪਾਸ ਵਿੱਚ ਮੇਲ ਖਾਂਦਾ ਹੈ। - ਅੱਖਰਾਂ ਵਿੱਚ ਮੈਪ ਕਰੋ. ਨਾਮੀ ਮੇਲ ਇੱਕ ਰਿਵਰਸ ਸਾਰਣੀ ਰਾਹੀਂ ਹੱਲ ਹੁੰਦੇ ਹਨ। ਸੰਖਿਆਤਮਕ ਮੇਲ ਆਧਾਰ 10 ਜਾਂ ਆਧਾਰ 16 ਨਾਲ
String.fromCodePointਰਾਹੀਂ ਜਾਂਦੇ ਹਨ। ਅਣਜਾਣ ਨਾਮੀ ਏਂਟਿਟੀਆਂ ਅਛੂਤੀਆਂ ਰਹਿੰਦੀਆਂ ਹਨ। - ਲਾਈਵ ਮੋਡ. ਲਾਈਵ ਮੋਡ ਟੌਗਲ ਕਰੋ ਅਤੇ ਹਰ ਕੀਸਟ੍ਰੋਕ 150 ms ਡੀਬਾਉਂਸ ਨਾਲ ਕਨਵਰਜ਼ਨ ਦੁਬਾਰਾ ਚਲਾਉਂਦਾ ਹੈ। ਜਦੋਂ ਤੁਸੀਂ ਕੋਈ ਸਨਿੱਪਟ ਠੀਕ ਕਰ ਰਹੇ ਹੋ ਅਤੇ ਤੁਰੰਤ ਫੀਡਬੈਕ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਮਦਦਗਾਰ।
HTML ਏਂਟਿਟੀਆਂ ਏਨਕੋਡ ਕਿਉਂ ਕਰੋ
- ਯੂਜ਼ਰ ਇਨਪੁੱਟ ਨੂੰ ਲੇਆਉਟ ਖ਼ਰਾਬ ਕਰਨ ਤੋਂ ਰੋਕੋ. ਜਦੋਂ ਕੋਈ ਯੂਜ਼ਰ ਕਮੈਂਟ ਬਾਕਸ ਵਿੱਚ ਅਵਾਰਾ
<ਟਾਈਪ ਕਰਦਾ ਹੈ, ਉਹ ਟੈਕਸਟ ਸਿੱਧੇ HTML ਵਿੱਚ ਪਾਉਣ ਨਾਲ ਬਾਕੀ ਪੰਨਾ ਦੁਬਾਰਾ ਲਿਖਿਆ ਜਾਂਦਾ ਹੈ। ਪਹਿਲਾਂ ਰਾਖਵੇਂ ਅੱਖਰ ਏਨਕੋਡ ਕਰਨ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਅੱਖਰ ਰੈਂਡਰ ਕਰਦਾ ਹੈ ਨਾ ਕਿ ਇਸਨੂੰ ਟੈਗ ਦੀ ਸ਼ੁਰੂਆਤ ਵਜੋਂ ਪਾਰਸ ਕਰਦਾ ਹੈ। - ਐਟ੍ਰੀਬਿਊਟ ਮੁੱਲ ਵੈਧ ਰੱਖੋ. HTML ਐਟ੍ਰੀਬਿਊਟ ਦੇ ਅੰਦਰ ਉੱਧਰਿਤ ਸਤਰ ਏਮਬੈੱਡ ਕਰਨ ਲਈ ਏਮਬੈੱਡ ਕੀਤੀ ਕੁਓਟ ਨੂੰ
"(ਡਬਲ-ਕੁਓਟਡ ਐਟ੍ਰੀਬਿਊਟ ਲਈ) ਜਾਂ'(ਸਿੰਗਲ-ਕੁਓਟਡ ਲਈ) ਨਾਲ ਬਦਲਣ ਦੀ ਲੋੜ ਹੈ। - ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਵਿੱਚ ਅਚਾਨਕ HTML ਨਿਸ਼ਕ੍ਰਿਅ ਕਰੋ. ਲੌਗ, ਬੱਗ ਰਿਪੋਰਟਾਂ ਅਤੇ ਚੈਟ ਨਿਰਯਾਤ ਵਿੱਚ ਅਕਸਰ ਅਸਲ ਐਂਗਲ ਬ੍ਰੈਕਟ ਅਤੇ ਐਂਪਰਸੈਂਡ ਹੁੰਦੇ ਹਨ। ਡੌਕਿਊਮੈਂਟੇਸ਼ਨ ਪੰਨੇ ਵਿੱਚ ਪੇਸਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਡੰਪ ਨੂੰ ਏਂਟਿਟੀ-ਏਨਕੋਡ ਕਰਨਾ ਉਸ ਕਾਪੀ ਨੂੰ ਟੈਕਸਟ ਵਜੋਂ ਦਿਖਾਉਂਦਾ ਰੱਖਦਾ ਹੈ।
- ਕੋਡ ਸਨਿੱਪਟ ਸੁਰੱਖਿਅਤ ਸਾਂਝੇ ਕਰੋ. ਕਿਸੇ ਬਲੌਗ ਪੋਸਟ, ਈਮੇਲ, ਜਾਂ Slack ਮੈਸੇਜ ਵਿੱਚ
<script>alert(1)</script>ਵਰਗਾ ਉਦਾਹਰਣ ਟੈਗ ਪੋਸਟ ਕਰਨ ਲਈ ਬ੍ਰੈਕਟ ਏਨਕੋਡ ਕਰਨੇ ਪੈਂਦੇ ਹਨ ਤਾਂ ਕਿ ਸਨਿੱਪਟ ਦਿਖੇ ਨਾ ਕਿ ਚੱਲੇ।
ਆਮ ਵਰਤੋਂਆਂ
ਏਂਟਿਟੀ ਏਨਕੋਡਿੰਗ ਉੱਥੇ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ ਜਿੱਥੇ ਵੀ ਕੱਚਾ ਟੈਕਸਟ ਰਨਟਾਈਮ ਤੇ HTML ਵਿੱਚ ਮਿਲਾਇਆ ਜਾਂਦਾ ਹੈ — ਇੱਥੋਂ ਤੱਕ ਕਿ ਜਦੋਂ ਫ੍ਰੇਮਵਰਕ ਆਮ ਤੌਰ ਤੇ ਇਹ ਤੁਹਾਡੇ ਲਈ ਸੰਭਾਲਦਾ ਹੈ।
- ਸਰਵਰ-ਰੈਂਡਰ ਕੀਤੇ ਟੈਂਪਲੇਟ: Jinja2, ERB, Twig ਅਤੇ Handlebars ਡਿਫਾਲਟ ਤੌਰ ਤੇ ਆਟੋ-ਏਸਕੇਪ ਕਰਦੇ ਹਨ, ਪਰ ਕੱਚੇ ਬਲਾਕ ਅਤੇ `safe` ਮਾਰਕਰ ਇਹ ਬੰਦ ਕਰਦੇ ਹਨ — ਕੋਡੈਕ ਤੁਹਾਨੂੰ ਪੁਸ਼ਟੀ ਕਰਨ ਦਿੰਦਾ ਹੈ ਕਿ ਏਸਕੇਪ ਕੀ ਪੈਦਾ ਕਰਦਾ।
- ਈਮੇਲ ਅਤੇ ਨਿਊਜ਼ਲੈਟਰ ਲੇਖਕੀ: ਕਈ ESP ਟੈਂਪਲੇਟਿੰਗ ਇੰਜਣ ਮਰਜ ਫੀਲਡਾਂ ਨੂੰ ਆਟੋ-ਏਸਕੇਪ ਨਹੀਂ ਕਰਦੇ, ਇਸ ਲਈ ਯੂਜ਼ਰ-ਸਪਲਾਈ ਕੀਤੇ ਨਾਵਾਂ ਵਿੱਚ ਸਮਾਰਟ ਕੁਓਟਸ ਅਤੇ ਕਾਪੀਰਾਈਟ ਗਲਿਫਾਂ ਨੂੰ ਪਹਿਲਾਂ ਏਨਕੋਡ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
- ਦਸਤਾਵੇਜ਼ੀਕਰਣ ਅਤੇ ਕੋਡ ਨਮੂਨੇ: Markdown ਬਲੌਗ ਪੋਸਟ ਜਾਂ ਸਟੈਟਿਕ-ਸਾਈਟ ਸਨਿੱਪਟ ਵਿੱਚ ਉਦਾਹਰਣ HTML ਟੈਗ ਪੇਸਟ ਕਰਨ ਲਈ ਬ੍ਰੈਕਟ ਏਨਕੋਡ ਕਰਨੇ ਪੈਂਦੇ ਹਨ ਤਾਂ ਕਿ ਰੈਂਡਰਰ ਇਸਨੂੰ ਦਿਸਣਯੋਗ ਟੈਕਸਟ ਵਜੋਂ ਮੰਨੇ।
ਕੰਮ ਕੀਤੀ ਉਦਾਹਰਣ
<script>alert('hi')</script> ਨੂੰ ਮੋਡ ਏਨਕੋਡ, ਸ਼ੈਲੀ ਨਾਮੀ, ਦਾਇਰਾ ਘੱਟੋ-ਘੱਟ ਸੈੱਟ ਕਰਕੇ ਇਨਪੁੱਟ ਵਿੱਚ ਪੇਸਟ ਕਰੋ। ਆਉਟਪੁੱਟ <script>alert('hi')</script> ਪੜ੍ਹਦਾ ਹੈ। ਸ਼ੈਲੀ ਨੂੰ Numeric hex ਤੇ ਬਦਲੋ ਅਤੇ ਉਹੀ ਇਨਪੁੱਟ <script>alert('hi')</script> ਪੈਦਾ ਕਰਦਾ ਹੈ। ਮੋਡ ਨੂੰ ਡੀਕੋਡ ਤੇ ਫਲਿੱਪ ਕਰੋ, ਏਨਕੋਡ ਕੀਤੀ ਸਤਰ ਵਾਪਸ ਪੇਸਟ ਕਰੋ, ਅਤੇ ਅਸਲ ਟੈਗ ਬਰਕਰਾਰ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ।
FAQ
HTML ਏਂਟਿਟੀਆਂ ਕੀ ਹਨ?
HTML ਏਂਟਿਟੀਆਂ ਅੱਖਰ ਸੰਦਰਭ ਹਨ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਪੰਨਾ ਪਾਰਸ ਕਰਦੇ ਸਮੇਂ ਵਾਪਸ ਇੱਕ ਅੱਖਰ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਇਹ ਤਿੰਨ ਰੂਪਾਂ ਵਿੱਚ ਆਉਂਦੇ ਹਨ: ਨਾਮੀ (ਜਿਵੇਂ & & ਲਈ), ਦਸ਼ਮਲਵ ਸੰਖਿਆਤਮਕ (&), ਅਤੇ hex ਸੰਖਿਆਤਮਕ (&)। ਪੰਜ ਰਾਖਵੇਂ HTML ਅੱਖਰ (<, >, &, ", ') ਨੂੰ ਜਦੋਂ ਵੀ ਟੈਕਸਟ HTML ਵਿੱਚ ਪਾਇਆ ਜਾਂਦਾ ਹੈ ਤਾਂ ਏਨਕੋਡਿੰਗ ਦੀ ਲੋੜ ਹੈ।
ਮੈਨੂੰ ਨਾਮੀ ਬਨਾਮ ਸੰਖਿਆਤਮਕ ਏਂਟਿਟੀਆਂ ਕਦੋਂ ਵਰਤਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ?
ਨਾਮੀ ਏਂਟਿਟੀਆਂ ਉਦੋਂ ਵਰਤੋ ਜਦੋਂ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਸਰੋਤ ਸਾਫ਼ ਪੜ੍ਹਿਆ ਜਾਵੇ (ਇੱਕ ਟੈਂਪਲੇਟ ਵਿੱਚ © ਦੀ ਸਮੀਖਿਆ ਕਰਨ ਵਾਲਾ ਇੱਕ ਮਨੁੱਖ ਇਸਨੂੰ ਤੁਰੰਤ ਸਮਝ ਲੈਂਦਾ ਹੈ)। ਸੰਖਿਆਤਮਕ (ਦਸ਼ਮਲਵ ਜਾਂ hex) ਉਦੋਂ ਵਰਤੋ ਜਦੋਂ ਖਪਤਕਾਰ ਪੁਰਾਣਾ ਜਾਂ ਸਖ਼ਤ ਹੋਵੇ — XML ਪਾਰਸਰ, ਪੁਰਾਣੇ ਈਮੇਲ ਕਲਾਇੰਟ, ਅਤੇ ਕੁਝ ਫੀਡ ਰੀਡਰ ਕੇਵਲ HTML5 ਨਾਮੀ ਏਂਟਿਟੀਆਂ ਦੇ ਇੱਕ ਛੋਟੇ ਉਪ-ਸਮੂਹ ਨੂੰ ਪਛਾਣਦੇ ਹਨ, ਅਤੇ ਉਹ ਸਾਰੇ ਸੰਖਿਆਤਮਕ ਰੂਪਾਂ ਨੂੰ ਪਛਾਣਦੇ ਹਨ। Hex ਸੁਰੱਖਿਆ-ਕੇਂਦਰਿਤ ਸੰਦਰਭਾਂ ਵਿੱਚ ਜਿੱਤਣ ਦੀ ਪ੍ਰਵਿਰਤੀ ਰੱਖਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ ਸਪੈੱਕ ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ Unicode ਕੋਡ-ਪੁਆਇੰਟ ਸੰਕੇਤਨ ਨਾਲ ਇੱਕ-ਦਰ-ਇੱਕ ਮੇਲ ਖਾਂਦਾ ਹੈ।
ਕੀ ਡੀਕੋਡਿੰਗ & ਵਰਗੀਆਂ hex ਏਂਟਿਟੀਆਂ ਸੰਭਾਲਦੀ ਹੈ?
ਹਾਂ। ਡੀਕੋਡਰ ਇੱਕ regex ਵਰਤਦਾ ਹੈ ਜੋ ਇੱਕ ਪਾਸ ਵਿੱਚ ਸਾਰੇ ਤਿੰਨ ਏਂਟਿਟੀ ਰੂਪਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੈ: &name;, &#NNN;, ਅਤੇ &#xHH;। ਸੰਖਿਆਤਮਕ ਮੇਲ ਆਧਾਰ 10 ਜਾਂ ਆਧਾਰ 16 ਨਾਲ String.fromCodePoint ਨਾਲ ਹੱਲ ਹੁੰਦੇ ਹਨ। ਮਿਸ਼ਰਿਤ ਇਨਪੁੱਟ ਸਹੀ ਡੀਕੋਡ ਹੁੰਦਾ ਹੈ।
ਕੀ ਇਹ ਅਵਿਸ਼ਵਾਸਯੋਗ ਇਨਪੁੱਟ ਨਾਲ ਵਰਤੋਂ ਲਈ ਸੁਰੱਖਿਅਤ ਹੈ?
ਕੋਡੈਕ ਖੁਦ ਕੇਵਲ-ਬ੍ਰਾਊਜ਼ਰ ਹੈ ਅਤੇ ਤੁਹਾਡਾ ਇਨਪੁੱਟ ਕਿਤੇ ਨਹੀਂ ਭੇਜਦਾ। ਆਉਟਪੁੱਟ ਏਮਬੈੱਡ ਕਰਨ ਲਈ ਸੁਰੱਖਿਅਤ ਹੈ ਜਾਂ ਨਹੀਂ, ਇਹ ਸੰਦਰਭ ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਏਂਟਿਟੀ ਏਨਕੋਡਿੰਗ HTML ਬਾਡੀ ਅਤੇ ਐਟ੍ਰੀਬਿਊਟ-ਮੁੱਲ ਸੰਦਰਭਾਂ ਨੂੰ ਸੰਭਾਲਦੀ ਹੈ, ਜੋ OWASP ਨਿਯਮ #1 ਕੇਸ ਨੂੰ ਕਵਰ ਕਰਦੀ ਹੈ। JavaScript ਸੰਦਰਭਾਂ (ਇਨਲਾਈਨ ਇਵੈਂਟ ਹੈਂਡਲਰ, `<script>` ਬਲਾਕ), CSS ਸੰਦਰਭਾਂ, ਅਤੇ URL ਸੰਦਰਭਾਂ — ਹਰੇਕ ਨੂੰ ਆਪਣੇ ਖੁਦ ਦੇ ਏਨਕੋਡਿੰਗ ਨਿਯਮਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ — ਏਂਟਿਟੀ ਏਨਕੋਡਿੰਗ ਇਕੱਲੀ ਉੱਥੇ ਕਾਫ਼ੀ ਨਹੀਂ ਹੈ। ਸਰਵਰ-ਸਾਈਡ ਡਿਫੈਂਸ ਇਨ ਡੈਪਥ ਲਈ, ਇਸਨੂੰ ਇੱਕ ਸੰਦਰਭ-ਜਾਣੂ ਟੈਂਪਲੇਟਿੰਗ ਇੰਜਨ ਜਿਵੇਂ DOMPurify ਜਾਂ ਤੁਹਾਡੇ ਫ੍ਰੇਮਵਰਕ ਦੇ ਆਟੋ-ਏਸਕੇਪ ਨਾਲ ਜੋੜੋ।
ਬ੍ਰਾਊਜ਼ਰ-ਸਾਈਡ ਏਂਟਿਟੀ ਏਨਕੋਡਿੰਗ ਯੂਜ਼ਰ ਇਨਪੁੱਟ ਅਤੇ ਰੈਂਡਰ ਕੀਤੇ HTML ਦੀ ਸੀਮਾ ਤੇ ਬੈਠਦੀ ਹੈ। ਕਨਵਰਜ਼ਨ ਸਥਾਨਕ ਤੌਰ ਤੇ ਕਰਨ ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਜਾਂਚ ਕਰ ਸਕਦੇ ਹੋ ਕਿ ਤੁਹਾਡਾ ਫ੍ਰੇਮਵਰਕ ਕੀ ਭੇਜਦਾ, ਅਸਲ ਟੈਕਸਟ ਕਿਸੇ ਤੀਜੀ-ਧਿਰ ਸਾਧਨ ਨੂੰ ਭੇਜੇ ਬਿਨਾਂ।