HTML Encoder

HTML Encoder / Decoder

Escape `& < > " '` เป็น HTML entity ที่ปลอดภัย หรือถอดรหัสข้อความที่ escape แล้วกลับเป็นข้อความธรรมดา สี่ระดับการเข้ารหัส — Minimal, Named, Numeric, All non-ASCII รองรับ UTF-8 + อิโมจิ + CJK ทำงานในเบราว์เซอร์ของคุณ

ค่าเริ่มต้นใช้ Minimal — escape เฉพาะ & < > " ' ห้าตัวที่ทำให้ context ของ HTML body / attribute เสีย นั่นคือสิ่งที่ templating engine สมัยใหม่ทุกตัวทำ ใช้ Named entities หากต้องการให้ copyright / nbsp / ลูกศร ฯลฯ เป็นโค้ดที่อ่านได้ (&copy; แทน &#169;) ใช้ Numeric เมื่อส่ง HTML ผ่าน pipeline ที่อาจไม่เข้าใจ named entity ใช้ All non-ASCII เมื่อเป้าหมายเป็นระบบที่รองรับเฉพาะ ASCII (เซิร์ฟเวอร์อีเมลเก่า, API ที่มีปัญหา)

&apos; ใช้ได้ใน XML และ HTML5 แต่ ไม่ได้ อยู่ใน HTML 4.01 — เบราว์เซอร์เก่าจะแสดงเป็นข้อความตรงตัว ' การอ้างอิงเชิงตัวเลข &#39; ใช้ได้ทุกที่ ตัวถอดรหัสรับ &apos; เป็นอินพุตเพื่อความเข้ากันได้

อินพุต
ผลลัพธ์

สร้างมาเพื่อเอาต์พุต HTML ที่ปลอดภัย

Escape เนื้อหาจากผู้ใช้สำหรับเทมเพลต ถอดรหัสข้อมูลที่ encode เป็น entity แล้ว — พร้อมรายละเอียดเล็ก ๆ น้อย ๆ ที่ทำให้ใช้งานสนุก

สี่โหมดการเข้ารหัส

Minimal escape เฉพาะอักขระห้าตัวที่ไม่ปลอดภัยใน HTML (& < > " ') — เป็นค่าเริ่มต้นที่ถูกต้องสำหรับเนื้อหาทั่วไปจากผู้ใช้ Named ใช้ HTML5 entity ที่อ่านง่ายอย่าง &copy; / &nbsp; / &hearts; เมื่อมีอยู่ Numeric เข้ารหัสทุก codepoint ที่ไม่ใช่ ASCII เป็น &#NN; All non-ASCII เข้ารหัสทุก codepoint ที่อยู่นอก ASCII แบบพิมพ์ได้ สำหรับ pipeline เดิมที่รองรับเฉพาะ ASCII

ถอดรหัส entity ใดก็ได้

ตัวถอดรหัสรองรับ named entity (&copy;), เลขฐานสิบ (&#169;) และเลขฐานสิบหก (&#xA9;) Codepoint ที่เป็น surrogate pair (อิโมจิ อักษรโบราณ) round-trip ได้ถูกต้องผ่าน UTF-16

พรีวิวสด

ผลลัพธ์อัปเดตทุกการกดปุ่ม — ไม่ต้องกดปุ่ม Encode / Decode สลับทิศทางได้ในคลิกเดียว ปุ่ม Swap ย้ายผลลัพธ์กลับไปที่อินพุต ทำให้ต่อการแปลงเป็นทอดได้

ปลอดภัยสำหรับ UTF-8 + อิโมจิ + CJK

ทุก codepoint Unicode round-trip ได้: 中文, العربية, русский, हिंदी, 🎉, Þorgeir ตัวเข้ารหัสวนต่อ codepoint (ไม่ใช่ charAt) เพื่อให้ surrogate pair คงสภาพ

ออกแบบให้เป็นส่วนตัว

ข้อความของคุณอยู่บนอุปกรณ์ของคุณ ตัวเข้ารหัส ตัวถอดรหัส และตาราง named-entity ทั้งหมดทำงานเป็น JavaScript ภายในเครื่อง เปิด DevTools → Network แล้วตรวจสอบได้ว่าไม่มี request ออกไปเลย

เล็กและเร็ว

JavaScript ล้วน ไม่มี runtime ของเฟรมเวิร์ก โหลดครั้งแรกน้อยกว่า 25 KB หลัง gzip เอกสาร HTML ขนาด 100 KB เข้ารหัสได้ในเวลาน้อยกว่า 5 ms

วิธี encode หรือ decode HTML entity

สี่ขั้นตอนจากข้อความดิบสู่เอาต์พุตที่ปลอดภัยจาก entity

  1. 1

    วางข้อความของคุณ

    วางข้อความธรรมดาหรือ HTML ลงในช่อง อินพุต อะไรก็ได้ — ความคิดเห็นของผู้ใช้ บล็อกโพสต์ อิโมจิ CJK สคริปต์ RTL ตัวเข้ารหัสวนต่อ codepoint ลำดับมัลติไบต์จึงคงสภาพอยู่

  2. 2

    เลือกทิศทางและโหมด

    ตั้ง ทิศทาง เป็น Encode (ข้อความ → entity) หรือ Decode (entity → ข้อความ) สำหรับ Encode ให้เลือกโหมด: Minimal สำหรับเทมเพลต Named สำหรับ entity ที่อ่านง่าย Numeric สำหรับ non-ASCII เป็น &#NN; All non-ASCII สำหรับเอาต์พุตเฉพาะ ASCII

  3. 3

    ดูพรีวิวสด

    ผลลัพธ์อัปเดตทุกครั้งที่กดปุ่ม เปรียบเทียบโหมดได้แบบเรียลไทม์โดยเปลี่ยน dropdown ใช้ Swap เพื่อย้ายผลลัพธ์กลับไปที่อินพุต — มีประโยชน์สำหรับการตรวจสอบ round-trip (encode แล้ว decode = ต้นฉบับ)

  4. 4

    คัดลอกหรือดาวน์โหลด

    ใช้ไอคอนคัดลอกเพื่อนำผลลัพธ์ไปยังคลิปบอร์ด หรือไอคอนดาวน์โหลดเพื่อบันทึกเป็น output.encode.html / output.decode.txt ส่วนต่างของขนาด (อักขระ / ไบต์ เข้า → ออก) แสดงให้เห็นว่าการเข้ารหัสทำให้ข้อความขยายหรือลดขนาดลงเท่าใด

สร้างมาเพื่องาน web-dev ประจำวัน

สี่สถานการณ์ทั่วไปที่เครื่องมือบนเบราว์เซอร์ที่ให้ความสำคัญกับความเป็นส่วนตัว ดีกว่าการวางโค้ดลงใน encoder ออนไลน์แบบสุ่ม

ฝังเนื้อหาผู้ใช้ลงในเทมเพลตอย่างปลอดภัย

ความคิดเห็นจากผู้ใช้ การตอบฟอร์ม คำค้นหา — อะไรก็ตามที่มาจากภายนอกแล้วลงเอยภายใน <p>, <li> หรือ attribute ผ่านการ encode โหมด Minimal ก่อนต่อเป็นสตริงในโค้ด HTML แล้วคุณจะปลอดภัยจาก markup ที่เสียและ payload XSS แบบง่าย ๆ

อ่านข้อมูลที่ escape เป็น entity จาก API

บาง API คืนสตริงที่ escape เป็น entity แล้ว (RSS feed, การส่งออกจาก CMS บางตัว, HTML ที่ scrape มา) วางลง กด Decode รับ Unicode ต้นฉบับกลับมา ตัวถอดรหัสรองรับ entity แบบ named, ฐานสิบ และฐานสิบหก รวมถึง surrogate pair

หัวเรื่องอีเมล + เมตาแท็ก

<title>, <meta name="description">, <meta property="og:title"> — ทั้งหมดต้อง escape เป็น entity สำหรับอักขระพิเศษ เข้ารหัสหัวข้อของคุณครั้งเดียว แล้ววางลงทั้งสามที่

เนื้อหาที่ละเอียดอ่อนซึ่งห้ามส่งไปยังบริการของบุคคลที่สาม

เนื้อหา CMS ภายใน ข้อมูลลูกค้า เทมเพลตที่อยู่ใต้ NDA — สิ่งที่คุณวางลงใน encoder บนคลาวด์ไม่ได้ เครื่องมือที่ทำงานในเบราว์เซอร์เท่านั้นจะเก็บทุกไบต์ไว้บนเครื่องของคุณ เปิด DevTools → Network เพื่อยืนยันว่าไม่มีอะไรออกไป

เป็นส่วนตัว 100% — ทำงานในเบราว์เซอร์ของคุณ

ข้อความของคุณไม่ออกจากอุปกรณ์ เปิด DevTools → Network แล้วคุณจะเห็นว่าไม่มี request ออกไปเลยระหว่างการ encode หรือ decode

  • ตัวเข้ารหัส ตัวถอดรหัส และตารางค้นหา named-entity ทั้งหมดทำงานเป็น JavaScript บนเครื่องของคุณ — ไม่มีการแปลงฝั่งเซิร์ฟเวอร์ ไม่มี API ของบุคคลที่สาม
  • Codepoint ที่เป็น surrogate pair (อิโมจิ อักษรโบราณ) ถูกจัดการด้วยการวนต่อ codepoint ไม่ใช่การ map ระดับไบต์ — ดังนั้นการวาง 🎉 ยังคงเป็น 🎉 หลัง round-trip
  • ไม่ต้องล็อกอิน ไม่มี telemetry บนเนื้อหาข้อความ เราใช้คุกกี้เพียงตัวเดียวสำหรับสถานะ cookie-consent และอีกหนึ่งตัวสำหรับการตั้งค่าภาษา

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

บทความคัดสรรเกี่ยวกับการ escape HTML ตาราง entity และการทำเทมเพลตอย่างปลอดภัย

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

ควรเลือกโหมดไหน?

ค่าเริ่มต้นใช้ Minimal — escape เฉพาะ & < > " ' ห้าตัวที่ทำให้ context ของ HTML body / attribute เสีย นั่นคือสิ่งที่ templating engine สมัยใหม่ทุกตัวทำ ใช้ Named entities หากต้องการให้ copyright / nbsp / ลูกศร ฯลฯ เป็นโค้ดที่อ่านได้ (&copy; แทน &#169;) ใช้ Numeric เมื่อส่ง HTML ผ่าน pipeline ที่อาจไม่เข้าใจ named entity ใช้ All non-ASCII เมื่อเป้าหมายเป็นระบบที่รองรับเฉพาะ ASCII (เซิร์ฟเวอร์อีเมลเก่า, API ที่มีปัญหา)

ทำไมจึง escape `'` เป็น `&#39;` แทน `&apos;`?

&apos; ใช้ได้ใน XML และ HTML5 แต่ ไม่ได้ อยู่ใน HTML 4.01 — เบราว์เซอร์เก่าจะแสดงเป็นข้อความตรงตัว ' การอ้างอิงเชิงตัวเลข &#39; ใช้ได้ทุกที่ ตัวถอดรหัสรับ &apos; เป็นอินพุตเพื่อความเข้ากันได้

อิโมจิและอักษร CJK จะอยู่รอดหรือไม่?

ใช่ ตัวเข้ารหัสวนต่อ codepoint (ไม่ใช่หน่วยรหัส UTF-16) ดังนั้นอิโมจิอย่าง 🎉 (U+1F389) จะกลายเป็น &#127881; เมื่อเข้ารหัส และ round-trip ได้ถูกต้องเมื่อถอดรหัส เช่นเดียวกับ CJK (中文 → &#20013;&#25991; ในโหมด numeric)

ปลอดภัยไหมหากนำอินพุตจากผู้ใช้ฝังลงใน HTML โดยตรงหลัง encode?

สำหรับ HTML body และ attribute — ปลอดภัย ด้วยโหมด Minimal สำหรับ context ของ URL (href="...") คุณยังต้องการ URL encoding ด้วย สำหรับ JavaScript หรือ CSS แบบ inline การเข้ารหัส HTML หรือ URL ไม่เพียงพอ — ให้ใช้ templating engine ที่เข้าใจ context เหล่านั้น อย่าวางอินพุตจากผู้ใช้ที่ยังไม่ escape ลงใน <script> โดยเด็ดขาด

มีอะไรถูกส่งไปยังเซิร์ฟเวอร์ของคุณหรือไม่?

ไม่มี ตัวเข้ารหัส ตัวถอดรหัส และตาราง named-entity ทั้งหมดทำงานเป็น JavaScript บนอุปกรณ์ของคุณ เปิด DevTools → Network แล้วคุณจะเห็นว่าไม่มี request ออกไปเลยระหว่างการ encode หรือ decode วางความลับ ข้อมูลลูกค้า เทมเพลตภายใน — ไม่มีอะไรออกจากเครื่องคุณ