HTML Codec

แปลงระหว่างข้อความและ HTML Entities ได้อย่างอิสระ

HTML Codec เป็นเครื่องมือออนไลน์ฟรีสำหรับการแปลงระหว่างอักขระพิเศษ HTML และ HTML entities ได้ง่าย แปลงอักขระพิเศษเช่น "<", ">", "&", "\"" เป็น HTML entities เช่น "<", ">", "&", """ และในทางกลับกัน ข้อมูลที่ป้อนของคุณไม่ถูกเก็บบนเซิร์ฟเวอร์ ดังนั้นคุณสามารถแปลงข้อมูลที่ละเอียดอ่อนได้อย่างปลอดภัย

วิธีใช้งาน

การใช้ HTML Codec นั้นง่ายมาก:

ขั้นตอนที่ 1: ป้อนข้อมูลและเลือกรูปแบบอินพุต
ป้อนข้อมูลที่คุณต้องการแปลงในกล่องข้อความด้านล่าง เลือกรูปแบบอินพุต (ข้อความหรือ HTML Entities)
ขั้นตอนที่ 2: เลือกรูปแบบเอาต์พุต
เลือกรูปแบบปลายทางการแปลง คุณสามารถเลือกจากข้อความ (อักขระพิเศษ) หรือ HTML Entities
ขั้นตอนที่ 3: คลิกปุ่มแปลง
คลิกปุ่ม "แปลง" และข้อมูลที่ป้อนจะถูกแปลงเป็นรูปแบบที่เลือกทันที คัดลอกผลลัพธ์และใช้งาน

ข้อมูลที่ป้อนของคุณไม่ถูกเก็บบนเซิร์ฟเวอร์ การประมวลผลทั้งหมดเสร็จสิ้นในเบราว์เซอร์และความเป็นส่วนตัวของคุณได้รับการปกป้องอย่างสมบูรณ์

เครื่องมือแปลง HTML

รูปแบบอินพุต

รูปแบบเอาต์พุต

ป้อนข้อมูลที่จะแปลง

ผลลัพธ์การแปลง

กรณีการใช้งานจริงสำหรับ HTML Codec

HTML Codec ถูกใช้ในสถานการณ์ต่อไปนี้ในการพัฒนาเว็บและการสร้างเนื้อหา:

การสร้างเทมเพลตอีเมล

แสดงข้อความที่มีอักขระพิเศษอย่างปลอดภัยในเทมเพลตอีเมล HTML แสดงสัญลักษณ์และเครื่องหมายคำพูดอย่างถูกต้องในขณะที่รักษาความเข้ากันได้ของไคลเอนต์อีเมล

การสร้าง Data URLs (Data URIs)

เมื่อฝังรูปภาพหรือไอคอนขนาดเล็กโดยตรงใน HTML หรือ CSS จะใช้ Data URLs ที่เข้ารหัส Base64 ซึ่งช่วยลดคำขอ HTTP และปรับปรุงความเร็วในการโหลดหน้าเว็บ

การยืนยันตัวตน API (Basic Auth)

ในการยืนยันตัวตนแบบ HTTP Basic ชื่อผู้ใช้และรหัสผ่านจะถูกรวมกันด้วยเครื่องหมายโคลอน (:) และเข้ารหัส Base64 เพื่อรวมในส่วนหัวการยืนยันตัวตน

JSON Web Token (JWT)

ส่วนหัวและเพย์โหลดของ JWT จะถูกแทนด้วยการเข้ารหัส Base64URL (รูปแบบหนึ่งของ Base64)

การถ่ายโอนข้อมูลไบนารี

เมื่อถ่ายโอนข้อมูลไบนารีในรูปแบบ JSON จะใช้การเข้ารหัส Base64 เพื่อแปลงเป็นรูปแบบข้อความ

HTML Entities คืออะไร? ทำความเข้าใจการ Escape อักขระพิเศษ

Base64 เป็นวิธีการเข้ารหัสที่แทนข้อมูลไบนารีโดยใช้เพียง 64 อักขระ ASCII ที่พิมพ์ได้ ชื่อ "64" มาจากความจริงที่ว่าใช้ 64 อักขระ (2 ยกกำลัง 6)

64 อักขระที่ใช้ใน Base64

ตัวอักษรพิมพ์ใหญ่: A-Z (26 อักขระ)
ตัวอักษรพิมพ์เล็ก: a-z (26 อักขระ)
ตัวเลข: 0-9 (10 อักขระ)
สัญลักษณ์: + (บวก) และ / (สแลช) (2 อักขระ)
อักขระเติม: = (เท่ากับ)

วิธีการทำงานของการเข้ารหัส

การเข้ารหัส Base64 แบ่งข้อมูล 3 ไบต์ (24 บิต) เป็นหน่วย 6 บิตสี่หน่วย โดยแมปแต่ละหน่วยกับอักขระหนึ่งใน 64 อักขระข้างต้น

ตัวอย่างการเข้ารหัส

ข้อความต้นฉบับ: "Hello"
การแทนไบนารี: 01001000 01100101 01101100 01101100 01101111
ผลลัพธ์ Base64: SGVsbG8=

เมื่อขนาดข้อมูลไม่เป็นจำนวนเท่าของ 3 จะเติม "=" ที่ท้าย

การใช้งานและประโยชน์ของการเข้ารหัส Base64

ปรับปรุงความน่าเชื่อถือในการถ่ายโอนข้อมูล

แม้ในระบบที่รองรับเฉพาะข้อความ (เช่น ระบบอีเมลเก่า) ข้อมูลไบนารีสามารถถ่ายโอนได้อย่างปลอดภัยโดยใช้การเข้ารหัส Base64 ช่วยป้องกันการเสียหายของข้อมูล

ความเข้ากันได้ข้ามแพลตฟอร์ม

เนื่องจาก Base64 ใช้เพียงอักขระ ASCII จึงไม่มีปัญหาการเข้ารหัสอักขระเมื่อแลกเปลี่ยนข้อมูลระหว่างระบบต่างๆ

การแปลงเป็นสตริงที่ปลอดภัยสำหรับ URL

การใช้การเข้ารหัส Base64URL (แทนที่ + ด้วย - และ / ด้วย _) ช่วยให้คุณสร้างสตริงที่สามารถใช้อย่างปลอดภัยใน URLs และชื่อไฟล์

การฝังข้อมูล

โดยการฝังรูปภาพและฟอนต์โดยตรงในไฟล์ CSS และ HTML คุณสามารถลดคำขอไปยังไฟล์ภายนอกและปรับปรุงประสิทธิภาพของหน้าเว็บ

สำคัญ: Base64 ไม่ใช่การเข้ารหัสลับ

⚠️ การเข้ารหัส Base64 ไม่ใช่การเข้ารหัสลับ นี่เป็นความแตกต่างที่สำคัญ

ความแตกต่างระหว่างการเข้ารหัสและการเข้ารหัสลับ

การเข้ารหัส (Encoding)

กระบวนการแปลงข้อมูลเป็นรูปแบบอื่น
ทุกคนสามารถย้อนกลับได้ (reversible)
ไม่ได้มีวัตถุประสงค์เพื่อความปลอดภัย
การเข้ารหัส Base64 อยู่ในประเภทนี้

การเข้ารหัสลับ (Encryption)

การแปลงข้อมูลเป็นรูปแบบที่อ่านไม่ได้โดยใช้คีย์ลับ
ไม่สามารถย้อนกลับได้โดยไม่มีคีย์
วัตถุประสงค์คือความปลอดภัยและการปกป้องความเป็นส่วนตัว
ตัวอย่างเช่น AES, RSA ฯลฯ

สตริงที่เข้ารหัส Base64 สามารถถอดรหัสได้ง่ายโดยทุกคน ดังนั้น คุณไม่ควรใช้ Base64 เพื่อ "ซ่อน" รหัสผ่านหรือข้อมูลที่เป็นความลับ

การใช้งานที่เหมาะสม

✅ การแปลงรูปแบบการถ่ายโอนข้อมูล
✅ การแทนข้อมูลไบนารีเป็นข้อความ
✅ การเข้ารหัสไฟล์แนบอีเมล
❌ การปกป้องรหัสผ่าน (ใช้การเข้ารหัสลับแทน)
❌ การซ่อนข้อมูลที่เป็นความลับ (ใช้การเข้ารหัสลับแทน)

หากคุณต้องการปกป้องข้อมูลที่เป็นความลับ ใช้อัลกอริทึมการเข้ารหัสลับที่แข็งแกร่งเช่น AES-256

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

HTML encoding และ HTML escaping เหมือนกันหรือไม่?

ใช่ พวกเขามีความหมายเหมือนกันโดยพื้นฐาน ทั้งคู่หมายถึงการแปลงอักขระพิเศษ HTML เป็น HTML entities "Escaping" เป็นศัพท์การเขียนโปรแกรมทั่วไป ในขณะที่ "encoding" ใช้จากมุมมองการแปลงอักขระ

อักขระใดบ้างที่ต้องแปลงเป็น entities?

อย่างน้อย อักขระห้าตัว <, >, &, ", และ ' ควรแปลงเป็น entities โดยเฉพาะ < และ > จำเป็นเพราะจะถูกตีความว่าเป็นแท็ก HTML เมื่อแสดงอินพุตของผู้ใช้ อักขระพิเศษทั้งหมดควรแปลงเป็น entities เพื่อป้องกันการโจมตี XSS

ความแตกต่างระหว่าง numeric entities และ named entities คืออะไร?

Numeric entities (<) แทนด้วยรหัสอักขระ Unicode และสามารถใช้กับอักขระทั้งหมด Named entities (<) แทนด้วยชื่อที่อ่านได้ แต่จำกัดอยู่ที่ประมาณ 2,000 ประเภทที่กำหนดใน HTML5 ทั้งคู่ทำงานเหมือนกัน

ENT_QUOTES และ ENT_HTML5 คืออะไร?

เป็นแฟล็กสำหรับฟังก์ชัน htmlentities() ของ PHP ENT_QUOTES เข้ารหัสทั้งเครื่องหมายคำพูดเดี่ยวและคู่ และ ENT_HTML5 ใช้ชุด entity ที่สอดคล้องกับ HTML5 เครื่องมือนี้รวมทั้งสองเพื่อการแปลงที่ปลอดภัยที่สุด

อักขระหลายไบต์เช่นภาษาไทยถูกแปลงเป็น entities ด้วยหรือไม่?

ไม่ อักขระหลายไบต์เช่นภาษาไทยที่เข้ารหัสอย่างถูกต้องใน UTF-8 สามารถแสดงตามต้นฉบับใน HTML ได้และไม่จำเป็นต้องแปลงเป็น entities อย่างไรก็ตาม สามารถแทนด้วย numeric entities (ก = ก) ได้เช่นกัน

การแปลง HTML entity เป็นการเข้ารหัสลับหรือไม่?

ไม่ การแปลง HTML entity ไม่ใช่การเข้ารหัสลับ แต่เป็นเพียงการเปลี่ยนแปลงการแทนอักขระ จากมุมมองความปลอดภัย เป็น "escaping" เพื่อป้องกันการโจมตี XSS ซึ่งแตกต่างจากการเข้ารหัสลับที่ปกป้องความลับของข้อมูล

วิธีทำ HTML encoding ในภาษาการเขียนโปรแกรมคืออะไร?

แต่ละภาษามีฟังก์ชันเฉพาะ PHP: htmlentities(), JavaScript: textContent (auto-escape), Python: html.escape(), Java: StringEscapeUtils.escapeHtml4(), Ruby: CGI.escapeHTML() ฯลฯ มีให้ใช้งาน

อะไรทำให้เกิดอักขระผิดเพี้ยนแม้หลังจากถอดรหัส?

การเข้ารหัสอักขระ (UTF-8, Shift_JIS, ฯลฯ) อาจไม่ตรงกัน นอกจากนี้ entities ที่ไม่สมบูรณ์ (ไม่มีเซมิโคลอนหลัง &lt ฯลฯ) หรือข้อมูลที่เข้ารหัสหลายครั้ง (&lt; → < → < ต้องถอดรหัสสองครั้ง) อาจเป็นสาเหตุ