🔧Toolify

เครื่องมือเข้ารหัส/ถอดรหัส HTML Entity

วางข้อความเพื่อเข้ารหัสอักขระพิเศษเป็น HTML entity หรือวาง HTML ที่มี entity เพื่อถอดรหัสกลับเป็นข้อความที่อ่านได้ เลือกระหว่าง entity แบบชื่อ (&, <, ©) แบบตัวเลขทศนิยม (©) หรือแบบเลขฐานสิบหก (©) และยังสามารถเข้ารหัสอักขระที่ไม่ใช่ ASCII ทั้งหมดเพื่อความเข้ากันได้สูงสุด

เอาต์พุตที่เข้ารหัส

วิธีการทำงาน

HTML entity คืออะไร?

HTML entity คือรหัสข้อความพิเศษที่ใช้แทนอักขระที่มีความหมายพิเศษใน HTML หรืออักขระที่ไม่สามารถพิมพ์ได้โดยตรง ที่สำคัญที่สุดคืออักขระห้าตัวที่สงวนไว้ในไวยากรณ์ HTML ได้แก่ & (แอมเปอร์แซนด์) → &amp;, < (น้อยกว่า) → &lt;, > (มากกว่า) → &gt;, " (เครื่องหมายคำพูดคู่) → &quot; และ ' (เครื่องหมายอะโพสทรอฟี) → &apos; หากอักขระเหล่านี้ปรากฏในเนื้อหาข้อความโดยไม่มีการเข้ารหัส เบราว์เซอร์อาจตีความว่าเป็น HTML markup ทำให้เกิดข้อผิดพลาดในการแสดงผลหรือช่องโหว่ด้านความปลอดภัย

HTML entity มีสามรูปแบบ: entity แบบชื่อใช้ชื่อที่อธิบาย (&copy; สำหรับ ©, &euro; สำหรับ €), การอ้างอิงอักขระแบบตัวเลขทศนิยมใช้หมายเลข code point (&#169; สำหรับ ©) และการอ้างอิงอักขระแบบเลขฐานสิบหกใช้รหัส hex (&#xA9; สำหรับ ©) ทั้งสามรูปแบบมีความเท่าเทียมกัน เบราว์เซอร์จะแสดงผลอักขระเดิมเสมอไม่ว่าจะใช้รูปแบบใด entity แบบชื่ออ่านได้ง่ายที่สุด ส่วน entity แบบตัวเลขนั้นใช้ได้ทั่วไปที่สุดเพราะรองรับอักขระ Unicode ทุกตัว

เมื่อใดควรเข้ารหัส HTML entity

คุณต้องเข้ารหัสอักขระ HTML ที่สงวนไว้อย่างน้อยห้าตัว (&, <, >, ", ') ทุกครั้งที่ปรากฏในเนื้อหาข้อความหรือค่าแอตทริบิวต์ การไม่เข้ารหัสเป็นสาเหตุของช่องโหว่ Cross-Site Scripting (XSS) หากอินพุตของผู้ใช้ถูกแทรกลงใน HTML โดยไม่มีการเข้ารหัส ผู้โจมตีสามารถแทรก script tag หรือ event handler ได้ framework สมัยใหม่อย่าง React, Vue และ Angular จะเข้ารหัส HTML อัตโนมัติโดยค่าเริ่มต้น โดย innerHTML เป็นข้อยกเว้นหลักที่ยังต้องเข้ารหัสด้วยตนเอง

นอกจากอักขระห้าตัวที่จำเป็นแล้ว คุณอาจต้องการเข้ารหัสอักขระที่ไม่ใช่ ASCII สำหรับสภาพแวดล้อมที่ไม่รองรับ UTF-8 อย่างน่าเชื่อถือ เช่น HTML ในอีเมล ระบบ CMS เดิม หรือเอกสารที่ต้องการความเข้ากันได้สูงสุด ตัวเลือก «เข้ารหัสอักขระที่ไม่ใช่ ASCII ทั้งหมด» จะแปลงทุกอักขระที่มี code point สูงกว่า 127 เป็น entity แบบตัวเลข ทำให้ผลลัพธ์เป็น ASCII ล้วนในขณะที่ยังคงรักษาลักษณะที่มองเห็นได้เมื่อแสดงผล สำหรับไฟล์ HTML UTF-8 สมัยใหม่ การเข้ารหัสอักขระที่ไม่ใช่ ASCII เป็นทางเลือก การประกาศ charset อย่างถูกต้องก็เพียงพอแล้ว

HTML entity เทียบกับการเข้ารหัส URL เทียบกับ Base64

HTML entity การเข้ารหัส URL (percent-encoding) และ Base64 เป็นรูปแบบการเข้ารหัสที่แตกต่างกันสามแบบสำหรับบริบทที่ต่างกัน HTML entity (เช่น &amp;) ใช้ภายในเอกสาร HTML เพื่อแสดงอักขระอย่างปลอดภัย การเข้ารหัส URL (เช่น %26 สำหรับ &) ใช้ใน query string และ URL เพื่อเข้ารหัสอักขระที่มีความหมายพิเศษใน URL Base64 เข้ารหัสข้อมูลไบนารีเป็นข้อความ ASCII ใช้สำหรับ data URI และไฟล์แนบในอีเมล

ข้อผิดพลาดทั่วไปคือการสับสนระหว่างสิ่งเหล่านี้ เช่น ใช้การเข้ารหัส URL กับเนื้อหา HTML หรือใช้การเข้ารหัส HTML กับ URL ตัวอย่างเช่น แอมเปอร์แซนด์ใน URL query string ต้องใช้ percent-encoding (%26) ไม่ใช่การเข้ารหัส HTML entity (&amp;) หากคุณสร้าง URL ที่จะถูกฝังลงในแอตทริบิวต์ HTML คุณต้องใช้ทั้งสอง: รูปแบบที่เข้ารหัส URL จะใส่ในแอตทริบิวต์ และค่าแอตทริบิวต์เองก็จะถูกเข้ารหัส HTML การเข้าใจว่าการเข้ารหัสแบบใดใช้ในบริบทใดจะป้องกันบัก double-encoding และปัญหาด้านความปลอดภัย

คำถามที่พบบ่อย

›HTML entity สำหรับแอมเปอร์แซนด์ (&) คืออะไร?

HTML entity สำหรับแอมเปอร์แซนด์คือ &amp; ซึ่งประกอบด้วยอักขระ &, a, m, p และเครื่องหมายอัฒภาคตามลำดับ เมื่อคุณเขียน &amp; ในซอร์ส HTML เบราว์เซอร์จะแสดงอักขระ & เพียงตัวเดียว การเข้ารหัสนี้จำเป็นทุกครั้งที่แอมเปอร์แซนด์ปรากฏในเนื้อหาข้อความหรือค่าแอตทริบิวต์ เนื่องจาก & ที่ไม่ได้เข้ารหัสจะเริ่มต้นลำดับ entity ที่ parser พยายามตีความ

›HTML entity สำหรับสัญลักษณ์ลิขสิทธิ์ (©) คืออะไร?

ลิขสิทธิ์ © มี HTML entity ที่เท่าเทียมกันสามแบบ: แบบชื่อ &copy;, แบบตัวเลขทศนิยม &#169; และแบบเลขฐานสิบหก &#xA9; ทั้งสามแบบแสดงอักขระ © เดียวกัน entity แบบชื่อเป็นตัวเลือกที่อ่านง่ายที่สุดเมื่อมีให้ใช้ สำหรับ HTML UTF-8 สมัยใหม่ คุณสามารถพิมพ์อักขระ © โดยตรงได้โดยไม่ต้องใช้ entity ตราบใดที่ไฟล์ HTML ของคุณประกาศ charset=utf-8

›ฉันต้องเข้ารหัสเครื่องหมายคำพูดใน HTML ไหม?

เครื่องหมายคำพูดคู่ (") ต้องเข้ารหัสเป็น &quot; ภายในแอตทริบิวต์ HTML ที่คั่นด้วยเครื่องหมายคำพูดคู่: <input value="&quot;"> เครื่องหมายคำพูดเดี่ยว (') ต้องเข้ารหัสเป็น &apos; หรือ &#39; ภายในแอตทริบิวต์ที่คั่นด้วยเครื่องหมายคำพูดเดี่ยว ภายในเนื้อหาข้อความขององค์ประกอบ (ระหว่างแท็ก) อักขระเครื่องหมายคำพูดทั้งสองแบบสามารถปรากฏโดยไม่ต้องเข้ารหัส แต่การเข้ารหัสก็ไม่เป็นอันตราย การเข้ารหัสทั้งสองอย่างสม่ำเสมอในทุกบริบทเป็นวิธีที่ปลอดภัยที่สุด

›ความแตกต่างระหว่าง entity แบบชื่อและแบบตัวเลขคืออะไร?

entity แบบชื่อใช้คำอธิบาย (&copy;, &euro;, &hearts;) และถูกกำหนดในข้อกำหนด HTML ไม่ใช่ทุกอักขระ Unicode จะมี entity แบบชื่อ entity แบบตัวเลขใช้ Unicode code point ไม่ว่าจะเป็นแบบทศนิยม (&#8364; สำหรับ €) หรือเลขฐานสิบหก (&#x20AC; สำหรับ €) entity แบบตัวเลขใช้ได้กับอักขระ Unicode ทุกตัว ในขณะที่ entity แบบชื่อครอบคลุมเพียงบางส่วนเท่านั้น ทั้งสองแบบแสดงผลเหมือนกันในเบราว์เซอร์

›ฉันควรเข้ารหัสอักขระที่ไม่ใช่ ASCII ใน HTML ไหม?

โดยทั่วไปไม่จำเป็น หากเอกสาร HTML ของคุณประกาศการเข้ารหัส UTF-8 (meta charset=utf-8) และบันทึกเป็น UTF-8 คุณสามารถเขียนอักขระที่ไม่ใช่ ASCII ได้โดยตรง เช่น é, ñ, 中, 🎉 การเข้ารหัสเป็น entity เป็นทางเลือกและทำให้ซอร์สอ่านยากขึ้น ข้อยกเว้นคือเมื่อส่ง HTML ในบริบทที่อาจไม่รักษาการเข้ารหัสไว้ เช่น ข้อความอีเมล, API เดิม หรือระบบที่ทำลาย byte ที่ไม่ใช่ ASCII ในกรณีเหล่านั้น การเข้ารหัสอักขระที่ไม่ใช่ ASCII ทั้งหมดเป็น entity แบบตัวเลขจะทำให้ผลลัพธ์เป็น ASCII ล้วนที่ปลอดภัย

›XSS คืออะไร และ HTML entity ป้องกันได้อย่างไร?

Cross-Site Scripting (XSS) เป็นช่องโหว่ด้านความปลอดภัยที่ผู้โจมตีแทรก JavaScript ที่เป็นอันตรายลงในหน้าเว็บโดยการใส่ข้อความที่เซิร์ฟเวอร์สะท้อนกลับมาใน HTML โดยไม่มีการเข้ารหัส ตัวอย่างเช่น หากอินพุตของผู้ใช้ <script>alert('xss')</script> ถูกแทรกโดยตรงลงในหน้า เบราว์เซอร์จะรันสคริปต์นั้น หากคุณเข้ารหัสอินพุตอย่างถูกต้อง โดยแปลง < เป็น &lt; และ > เป็น &gt; เบราว์เซอร์จะแสดงข้อความตามตัวอักษรแทนที่จะแยกวิเคราะห์เป็น tag การเข้ารหัส HTML entity เป็นการป้องกันหลักต่อ XSS แบบ reflected และ stored

›ทำไม &nbsp; ไม่ปรากฏในรายการของเครื่องมือนี้?

เครื่องมือนี้เข้ารหัสอักขระที่มี entity แบบชื่อ ช่องว่างที่ไม่ขึ้นบรรทัดใหม่ (Unicode U+00A0) จะถูกเข้ารหัสเป็น &nbsp; เมื่อคุณพิมพ์อักขระช่องว่างที่ไม่ขึ้นบรรทัดใหม่จริง (ซึ่งสามารถแทรกได้ด้วย Alt+Space ในบางระบบหรือคัดลอกจากแผนที่อักขระ) ช่องว่างปกติ (U+0020, แป้นเว้นวรรค) จะไม่ถูกเข้ารหัสเนื่องจากเป็นอักขระ ASCII ที่ปลอดภัย หากคุณต้องการ &nbsp; ในผลลัพธ์โดยเฉพาะ ให้พิมพ์หรือวางอักขระช่องว่างที่ไม่ขึ้นบรรทัดใหม่ลงในอินพุต

›ฉันสามารถใช้เครื่องมือนี้เพื่อป้องกันการแทรก HTML ในอินพุตของผู้ใช้ได้ไหม?

ได้ การเข้ารหัสข้อความที่ผู้ใช้ส่งมาก่อนแทรกลงใน HTML เป็นหนึ่งในการป้องกันหลักต่อการแทรก HTML และ XSS อย่างน้อยที่สุดให้เข้ารหัสอักขระที่สงวนไว้ห้าตัว: &, <, >, ", ' เครื่องมือนี้เข้ารหัสทั้งห้าตัว อย่างไรก็ตาม การเข้ารหัสเพียงอย่างเดียวไม่ใช่วิธีแก้ปัญหาด้านความปลอดภัยที่สมบูรณ์ คุณยังต้องการ header Content Security Policy ที่เหมาะสม การจัดการ URL javascript: ในแอตทริบิวต์อย่างระมัดระวัง และการป้องกันในระดับ framework สำหรับแอปพลิเคชันในการผลิต ให้ใช้ไลบรารีฝั่งเซิร์ฟเวอร์ที่ออกแบบมาเพื่อความปลอดภัย (OWASP Java Encoder, DOMPurify สำหรับฝั่งไคลเอนต์ เป็นต้น) แทนการเข้ารหัสด้วยตนเอง

เครื่องมือที่เกี่ยวข้อง

อัปเดตล่าสุด:

ลองพรอมต์ AI ของเรา →

ถูกแทรกโดยตรงลงในหน้า เบราว์เซอร์จะรันสคริปต์นั้น หากคุณเข้ารหัสอินพุตอย่างถูกต้อง โดยแปลง < เป็น < และ > เป็น > เบราว์เซอร์จะแสดงข้อความตามตัวอักษรแทนที่จะแยกวิเคราะห์เป็น tag การเข้ารหัส HTML entity เป็นการป้องกันหลักต่อ XSS แบบ reflected และ stored"}},{"@type":"Question","name":"ทำไม   ไม่ปรากฏในรายการของเครื่องมือนี้?","acceptedAnswer":{"@type":"Answer","text":"เครื่องมือนี้เข้ารหัสอักขระที่มี entity แบบชื่อ ช่องว่างที่ไม่ขึ้นบรรทัดใหม่ (Unicode U+00A0) จะถูกเข้ารหัสเป็น   เมื่อคุณพิมพ์อักขระช่องว่างที่ไม่ขึ้นบรรทัดใหม่จริง (ซึ่งสามารถแทรกได้ด้วย Alt+Space ในบางระบบหรือคัดลอกจากแผนที่อักขระ) ช่องว่างปกติ (U+0020, แป้นเว้นวรรค) จะไม่ถูกเข้ารหัสเนื่องจากเป็นอักขระ ASCII ที่ปลอดภัย หากคุณต้องการ   ในผลลัพธ์โดยเฉพาะ ให้พิมพ์หรือวางอักขระช่องว่างที่ไม่ขึ้นบรรทัดใหม่ลงในอินพุต"}},{"@type":"Question","name":"ฉันสามารถใช้เครื่องมือนี้เพื่อป้องกันการแทรก HTML ในอินพุตของผู้ใช้ได้ไหม?","acceptedAnswer":{"@type":"Answer","text":"ได้ การเข้ารหัสข้อความที่ผู้ใช้ส่งมาก่อนแทรกลงใน HTML เป็นหนึ่งในการป้องกันหลักต่อการแทรก HTML และ XSS อย่างน้อยที่สุดให้เข้ารหัสอักขระที่สงวนไว้ห้าตัว: &, <, >, \", ' เครื่องมือนี้เข้ารหัสทั้งห้าตัว อย่างไรก็ตาม การเข้ารหัสเพียงอย่างเดียวไม่ใช่วิธีแก้ปัญหาด้านความปลอดภัยที่สมบูรณ์ คุณยังต้องการ header Content Security Policy ที่เหมาะสม การจัดการ URL javascript: ในแอตทริบิวต์อย่างระมัดระวัง และการป้องกันในระดับ framework สำหรับแอปพลิเคชันในการผลิต ให้ใช้ไลบรารีฝั่งเซิร์ฟเวอร์ที่ออกแบบมาเพื่อความปลอดภัย (OWASP Java Encoder, DOMPurify สำหรับฝั่งไคลเอนต์ เป็นต้น) แทนการเข้ารหัสด้วยตนเอง"}}]},{"@context":"https://schema.org","@type":"HowTo","name":"เครื่องมือเข้ารหัส/ถอดรหัส HTML Entity","inLanguage":"th","step":[{"@type":"HowToStep","position":1,"name":"เข้ารหัสอักขระพิเศษ","text":"เลือกโหมดเข้ารหัส วางข้อความในกล่องด้านซ้าย ผลลัพธ์ที่เข้ารหัสจะปรากฏทางด้านขวา เลือก «แบบชื่อ» สำหรับ entity ที่อ่านง่าย (&), «แบบตัวเลข» สำหรับทศนิยมสากล (&) หรือ «เลขฐานสิบหก» สำหรับ hex (&) ติ๊ก «เข้ารหัสอักขระที่ไม่ใช่ ASCII ทั้งหมด» เพื่อแปลงทุกอักขระที่ไม่ใช่ ASCII เป็น entity"},{"@type":"HowToStep","position":2,"name":"ถอดรหัส HTML entity","text":"เลือกโหมดถอดรหัส วาง HTML ที่มี entity ในกล่องด้านซ้าย เครื่องมือจะจดจำ entity แบบชื่อ (&, ©), entity แบบตัวเลขทศนิยม (©) และ entity แบบ hex (©) และแปลงทั้งหมดกลับเป็นอักขระต้นฉบับ"},{"@type":"HowToStep","position":3,"name":"สลับการเข้ารหัสและถอดรหัส","text":"คลิกปุ่ม «สลับ» เพื่อย้ายผลลัพธ์ไปยังอินพุตและสลับโหมด มีประโยชน์สำหรับการตรวจสอบการแปลงไปกลับหรือย้อนการแปลงอย่างรวดเร็ว"},{"@type":"HowToStep","position":4,"name":"คัดลอกผลลัพธ์","text":"คลิก «คัดลอก» เพื่อวางผลลัพธ์ที่เข้ารหัสหรือถอดรหัสแล้วลงในคลิปบอร์ด"}]}]