คู่มือ HTML Entities ฉบับสมบูรณ์
HTML Entities เป็นหนึ่งในแง่มุมพื้นฐานที่สุดแต่ก็มักถูกเข้าใจผิดในการพัฒนา Web มันเป็นกลไกที่เบราว์เซอร์ใช้แสดงอักขระที่มิฉะนั้นจะถูกตีความเป็น HTML markup และมีบทบาทสำคัญในความปลอดภัยของ Web ไม่ว่าคุณจะเข้ารหัสอักขระพิเศษเพื่อป้องกันการโจมตี Cross-Site Scripting แสดงสัญลักษณ์ทางคณิตศาสตร์ หรือรับรองว่าเนื้อหาแสดงผลอย่างถูกต้องภายใต้การเข้ารหัสที่แตกต่างกัน การเข้าใจ HTML Entities เป็นสิ่งจำเป็นสำหรับนักพัฒนา Web ทุกคน
HTML Entities คืออะไร?
HTML Entities คือลำดับอักขระที่แทนอักขระตัวเดียวใน HTML Entities เริ่มต้นด้วย Ampersand (&) และลงท้ายด้วย Semicolon (;) เมื่อเบราว์เซอร์พบ Entity มันจะแทนที่ด้วยอักขระที่เกี่ยวข้องระหว่างการเรนเดอร์ กลไกนี้ช่วยให้คุณรวมอักขระใน HTML ที่มิฉะนั้นจะเป็นไปไม่ได้หรือมีปัญหา
<) เริ่มแท็ก เครื่องหมายมากกว่า (>) จบแท็ก และ Ampersand (&) เริ่มการอ้างอิง Entity หากคุณต้องการแสดงอักขระเหล่านี้เป็นเนื้อหาที่มองเห็นได้แทนที่จะเป็น markup คุณต้องเข้ารหัสมันเป็น Entities
HTML Entities ที่พบบ่อย
แม้ว่า HTML จะกำหนด Named Entities มากกว่า 2,000 รายการ แต่มีเพียงไม่กี่รายการที่ใช้บ่อยในการพัฒนา Web ในชีวิตประจำวัน นี่คือ Entities ที่คุณจะพบและใช้บ่อยที่สุด:
ห้า Entities ที่จำเป็น
| อักขระ | Named Entity | Entity ทศนิยม | Entity เลขฐานสิบหก | การใช้งาน |
|---|---|---|---|---|
| & | & | & | & | ต้องเข้ารหัสเสมอเพื่อหลีกเลี่ยงความกำกวมกับ Entity Reference |
| < | < | < | < | ต้องเข้ารหัสเพื่อป้องกันการเปิดแท็ก HTML |
| > | > | > | > | ต้องเข้ารหัสเพื่อป้องกันการปิดแท็ก HTML |
| " | " | " | " | ต้องเข้ารหัสภายในค่า Attribute แบบ Double Quote |
| ' | ' | ' | ต้องเข้ารหัสภายในค่า Attribute แบบ Single Quote | Non-Breaking Space (ป้องกันการตัดบรรทัด) |
Symbol Entities ที่ใช้บ่อย
| อักขระ | Named Entity | คำอธิบาย |
|---|---|---|
| สัญลักษณ์ลิขสิทธิ์ | © | |
| สัญลักษณ์เครื่องหมายการค้าจดทะเบียน | ® | สัญลักษณ์เครื่องหมายการค้า |
| ™ | Em Dash (ขีดยาว) | — |
| En Dash (สำหรับช่วง) | – | Left-Pointing Double Angle Quotation Mark |
| « | Right-Pointing Double Angle Quotation Mark | » |
| อักขระ Bullet | • | Horizontal Ellipsis (จุดสามจุด) |
| … | «
| Left-pointing double angle quotation mark |
| » | »
| Right-pointing double angle quotation mark |
| • | •
| Bullet character |
| … | …
| Horizontal ellipsis (three dots) |
Numeric Entities กับ Named Entities
HTML Entities มีสองรูปแบบ: Named และ Numeric การเข้าใจความแตกต่างช่วยให้คุณเลือก Entity ที่ถูกต้องในแต่ละสถานการณ์
Named Entities
Named Entities ใช้คำที่มนุษย์อ่านได้เพื่อระบุอักขระ ตัวอย่างเช่น < แทนเครื่องหมายน้อยกว่า © แทนสัญลักษณ์ลิขสิทธิ์ Named Entities อ่านและจดจำได้ง่ายกว่า ทำให้ซอร์สโค้ด HTML ของคุณบำรุงรักษาง่ายขึ้น อย่างไรก็ตาม Named Entities มีอยู่สำหรับชุดอักขระที่จำกัด — ประมาณ 2,000 ตัว ในขณะที่ Unicode มีอักขระมากกว่า 140,000 ตัว
Numeric Entities
Numeric Entities อ้างอิงอักขระผ่าน Unicode Code Point มันมีสองรูปแบบ: ทศนิยมและเลขฐานสิบหก Numeric Entities ทศนิยมใช้รูปแบบ &#NNN; โดย NNN คือ Code Point ทศนิยม Entities เลขฐานสิบหกใช้รูปแบบ &#xHHH; โดย HHH คือ Code Point เลขฐานสิบหก ตัวอย่างเช่น สัญลักษณ์ลิขสิทธิ์สามารถเขียนเป็น © (ทศนิยม) หรือ © (เลขฐานสิบหก)
Numeric Entities สามารถแทนอักขระ Unicode ใดๆ ทำให้จำเป็นสำหรับอักขระที่ไม่มีการอ้างอิง Named Entity หากคุณต้องการแสดงอักขระ CJK ที่หายาก รูปแบบอักขระประวัติศาสตร์ หรือ Emoji ที่ไม่มี Named Entity คุณต้องใช้รูปแบบ Numeric
เมื่อใดควรใช้แบบไหน
- ใช้ Named Entities สำหรับอักขระที่จำเป็นห้าตัว (&, <, >, ", ') และสัญลักษณ์ทั่วไปเช่น ©, ®, ™ มันอ่านง่ายกว่าและเป็นเอกสารในตัวเอง
- ใช้ Numeric Entities เมื่ออักขระที่คุณต้องการไม่มี Named Entity หรือเมื่อคุณสร้าง HTML ด้วยโปรแกรมและต้องการวิธีการเข้ารหัสที่สม่ำเสมอและเป็นสากล
- ใช้ Numeric Entities เลขฐานสิบหกเมื่อทำงานกับ Unicode Code Point เพราะเลขฐานสิบหกเป็นสัญกรณ์มาตรฐานในเอกสาร Unicode และตารางอักขระ
เมื่อใดควรใช้ HTML Entities
การรู้ว่าเมื่อใดควรใช้ Entities มีความสำคัญพอๆ กับการรู้วิธีใช้ นี่คือสถานการณ์หลักที่ Entities จำเป็นหรือมีประโยชน์:
1. แสดงอักขระสงวน
< เปล่าๆ เบราว์เซอร์จะพยายามแยกวิเคราะห์เป็นจุดเริ่มต้นของแท็ก HTML ซึ่งอาจทำลายเลย์เอาต์หน้าของคุณหรือสร้างช่องโหว่ด้านความปลอดภัย
2. ป้องกันความกำกวมของ Ampersand
Ampersand ที่ตามด้วยตัวอักษรและ Semicolon จะถูกตีความเป็น Entity Reference เสมอ หากคุณมี Ampersand ในเนื้อหาที่ไม่ได้เป็นส่วนหนึ่งของ Entity (เช่นใน "Tom & Jerry") คุณต้องเข้ารหัสมันเป็น & Ampersand ที่ไม่ได้เข้ารหัสและตามด้วยข้อความที่ตรงกับชื่อ Entity จะถูกถอดรหัสผิด ตัวอย่างเช่น "AT&T" ที่ไม่ได้เข้ารหัสอาจกลายเป็น "AT&T" หากเบราว์เซอร์ตีความ &T เป็น Entity Reference (แม้ว่า &T จะไม่ใช่ Entity ที่ถูกต้อง แต่พฤติกรรมนี้ก็ยังผิดทางเทคนิค)
3. รวมอักขระที่ไม่มีบนคีย์บอร์ด
อักขระเช่น Em Dash, สัญลักษณ์ลิขสิทธิ์ และตัวดำเนินการทางคณิตศาสตร์อาจพิมพ์ยากบนคีย์บอร์ดมาตรฐาน Entities ให้วิธีที่เชื่อถือได้ในการรวมอักขระเหล่านี้ โดยไม่ต้องพึ่งพาวิธีป้อนข้อมูลหรือ Character Map ของโปรแกรมแก้ไข ตัวอย่างเช่น — มักพิมพ์ง่ายกว่าการค้นหาอักขระ Em Dash บนคีย์บอร์ด
4. Non-Breaking Space
Entity สร้าง Non-Breaking Space ป้องกันไม่ให้เบราว์เซอร์ตัดบรรทัดที่ตำแหน่งนั้น สิ่งนี้สำคัญสำหรับการเก็บคำที่เกี่ยวข้องกันไว้ในบรรทัดเดียวกัน เช่น "10 kg", "บทที่ 3" หรือชื่อแบรนด์ที่ไม่ควรถูกแบ่งข้ามบรรทัด มันยังใช้บ่อยเพื่อสร้างระยะห่างทางสายตาในเลย์เอาต์ที่ CSS ไม่เหมาะสม
ผลกระทบด้านความปลอดภัย: การป้องกัน XSS
การเข้ารหัส HTML Entities เป็นหนึ่งในแนวป้องกันที่สำคัญที่สุดต่อการโจมตี Cross-Site Scripting (XSS) XSS เกิดขึ้นเมื่อผู้โจมตีสามารถแทรกโค้ดที่เรียกทำงานได้ลงในหน้าเว็บที่ผู้ใช้รายอื่นดู การเข้ารหัส Entities ป้องกันสิ่งนี้โดยการแปลงอักขระอันตรายเป็น Entity Equivalent ที่ปลอดภัย
การเข้ารหัส Entities ป้องกัน XSS ได้อย่างไร
และหน้าแสดงผลโดยไม่เข้ารหัส เบราว์เซอร์จะเรียกใช้สคริปต์นั้น อย่างไรก็ตาม หากผลลัพธ์ถูกเข้ารหัส Entity มันจะกลายเป็น <script>alert('xss')</script> และเบราว์เซอร์จะแสดงเป็นข้อความตามตัวอักษรแทนที่จะเรียกใช้โค้ด
กฎการเข้ารหัสเฉพาะบริบท
การเข้ารหัส Entities มีผลในบริบทเนื้อหา HTML และ Attributes แต่บริบทที่แตกต่างกันต้องการกลยุทธ์การเข้ารหัสที่แตกต่างกัน:
- <, >, & เป็น Entities สิ่งนี้ป้องกันการแทรกแท็ก HTML ใหม่
- <, >, &, ", ' เป็น Entities ต้องเข้ารหัสอัญประกาศเพื่อป้องกันการหลุดออกจากค่า Attribute