เครื่องมือเข้ารหัส / ถอดรหัส HTML
เข้ารหัสข้อความเป็นเอนทิตี HTML หรือถอดรหัสเอนทิตี HTML กลับเป็นข้อความ
วิธีใช้ เครื่องมือเข้ารหัส / ถอดรหัส HTML
- 1
ป้อนข้อความหรือ HTML ของคุณ
วางข้อความธรรมดาที่ต้องการ escape หรือ HTML entity ที่ต้องการแปลงกลับ ลงในช่องป้อนข้อมูล
- 2
เลือก encode หรือ decode
คลิก "Encode เป็น HTML Entity" เพื่อแปลงอักขระอย่าง < > & ให้เป็น entity ที่ปลอดภัย หรือ "Decode HTML Entity" เพื่อแปลง entity กลับเป็นอักขระที่อ่านได้
- 3
ตรวจดูผลลัพธ์
ตรวจผลลัพธ์ที่แปลงแล้วในช่องผลลัพธ์ และใช้ "สลับ Input/Output" เพื่อต่อการแปลงย้อนกลับหากจำเป็น
- 4
คัดลอกผลลัพธ์
กด "คัดลอกผลลัพธ์" เพื่อนำข้อความที่ encode หรือ decode ไปใช้ หรือ "ล้างทั้งสอง" เพื่อรีเซ็ตช่องต่าง ๆ
การเข้ารหัส HTML: การหลีกอักขระพิเศษอย่างปลอดภัย
การเข้ารหัส HTML หมายความว่าอย่างไร
การเข้ารหัส HTML หรือที่เรียกว่าการหลีก HTML แปลงอักขระที่มีความหมายพิเศษใน HTML ให้เป็นการอ้างอิงอักขระ เพื่อให้เบราว์เซอร์แสดงมันเป็นข้อความตรงตัวแทนที่จะตีความว่าเป็นมาร์กอัป เบราว์เซอร์อ่าน < ดิบ ๆ ว่าเป็นจุดเริ่มต้นของแท็ก ดังนั้นเพื่อแสดงเครื่องหมายน้อยกว่าจริง ๆ บนหน้า คุณต้องเขียนการอ้างอิง < แทน การเข้ารหัสคือการแปลที่ปลอดภัยระหว่างสิ่งที่คุณต้องการแสดงกับสิ่งที่เบราว์เซอร์จะดำเนินการมิฉะนั้น
มีอักขระเพียงไม่กี่ตัวที่จำเป็นต้องหลีกอย่างแท้จริงใน HTML ในชีวิตประจำวัน แต่การทำให้ถูกต้องคือความแตกต่างระหว่างหน้าที่แสดงผลอย่างถูกต้องกับหน้าที่พังหรือกลายเป็นช่องโหว่ การอ้างอิงมีสองแบบ: เอนทิตีแบบมีชื่อเช่น < และการอ้างอิงเชิงตัวเลขเช่น < หรือ < ซึ่งทั้งหมดให้อักขระที่มองเห็นได้ตัวเดียวกัน
อักขระหลักและเอนทิตีของพวกมัน
อักขระห้าตัวครอบคลุมความต้องการในการหลีกแทบทั้งหมด เครื่องหมายแอมเปอร์แซนด์ & กลายเป็น & และต้องมาก่อนในการแปลงด้วยมือใด ๆ เพราะมันเริ่มต้นทุกเอนทิตี เครื่องหมายน้อยกว่า < กลายเป็น < และเครื่องหมายมากกว่า > กลายเป็น > เนื่องจากสิ่งเหล่านี้กำหนดขอบเขตของแท็ก ส่วนอัญประกาศคู่ " กลายเป็น " และอัญประกาศเดี่ยวหรือเครื่องหมายวรรคตอน ' กลายเป็น ' (หรือชื่อ ' ใน HTML5) ซึ่งสำคัญภายในค่าแอตทริบิวต์
กฎแอมเปอร์แซนด์มาก่อนป้องกันบั๊กที่แยบยล หากคุณแทน < ด้วย < และค่อยหลีกแอมเปอร์แซนด์ในภายหลัง คุณก็จะเปลี่ยน < ที่เพิ่งเขียนใหม่ให้กลายเป็น &lt; และแสดงข้อความตรงตัว "<" บนหน้า จงเข้ารหัส & ก่อนตัวอื่น ๆ เสมอ เครื่องมือนี้ใช้การแปลงตามลำดับที่ถูกต้องโดยอัตโนมัติ ดังนั้นคุณจึงไม่มีวันตกหลุมพรางนั้น
ตัวอย่างประกอบ: การแสดงโค้ดสั้น ๆ
ลองนึกภาพว่าคุณต้องการให้หน้าหนึ่งแสดงข้อความ <a href="x">Tom & Jerry</a> ตรงตัวแทนที่จะแสดงผลเป็นลิงก์ อักขระพิเศษแต่ละตัวถูกแทนด้วยการอ้างอิงของมัน วงเล็บมุมเปิดกลายเป็น < วงเล็บมุมปิดกลายเป็น > อัญประกาศคู่รอบ ๆ แอตทริบิวต์กลายเป็น " และแอมเปอร์แซนด์ระหว่างชื่อกลายเป็น &
ผลลัพธ์ที่เข้ารหัสแล้วคือ <a href="x">Tom & Jerry</a> เมื่อวางลงในไฟล์ HTML เบราว์เซอร์จะพิมพ์ซอร์สโค้ดต้นฉบับให้มองเห็นได้บนหน้าจอ ตรงตามที่หน้าสอนหรือหน้าเอกสารประกอบจะแสดงมาร์กอัปตัวอย่าง แทนที่จะเปลี่ยนมันเป็นองค์ประกอบ anchor ที่ใช้งานได้
ทำไมการเข้ารหัสจึงป้องกัน XSS
Cross-site scripting (XSS) คือการโจมตีที่ผู้โจมตีฉีด HTML หรือ JavaScript เข้าไปในหน้าหนึ่งผ่านช่องที่ถูกแสดงต่อผู้ใช้คนอื่นในภายหลัง เช่นคอมเมนต์ ชื่อผู้ใช้ หรือคำค้นหา หากเว็บไซต์แทรกข้อความที่ไม่น่าเชื่อถือนั้นลงในหน้าโดยไม่หลีก เพย์โหลดอย่างแท็ก script จะถูกดำเนินการในเบราว์เซอร์ของเหยื่อด้วยสิทธิ์ของเว็บไซต์ ซึ่งเปิดทางให้เกิดการขโมยเซสชันและสิ่งที่เลวร้ายกว่านั้น
การเข้ารหัสทำให้การโจมตีเป็นกลางตั้งแต่ต้นตอ เมื่ออักขระอันตรายถูกหลีก <script>alert(1)</script> ที่ถูกฉีดเข้ามาจะถูกจัดเก็บและแสดงผลเป็นข้อความที่มองเห็นได้ซึ่งไม่เป็นพิษภัย คือ <script>alert(1)</script> แทนที่จะเป็นองค์ประกอบที่ดำเนินการได้ การป้องกันที่เชื่อถือได้ที่สุดเพียงหนึ่งเดียวต่อช่องโหว่ประเภทนี้คือการเข้ารหัส HTML ข้อมูลที่ไม่น่าเชื่อถือทุกชิ้น ณ จุดที่มันถูกเขียนลงในหน้าอย่างแม่นยำ
เนื้อหาขององค์ประกอบเทียบกับบริบทของแอตทริบิวต์
ตำแหน่งที่คุณวางข้อมูลเปลี่ยนว่าอักขระตัวใดเป็นอันตราย และกฎการหลีกเพียงข้อเดียวไม่เพียงพอสำหรับทุกจุด ภายในเนื้อหาขององค์ประกอบ คือข้อความระหว่างแท็กเปิดและแท็กปิด อักขระสำคัญคือ <, > และ & ส่วนภายในค่าแอตทริบิวต์ อักขระอัญประกาศที่กำหนดขอบเขตของแอตทริบิวต์คือตัวที่ให้ผู้โจมตีหลุดออกจากค่าได้ ดังนั้น " และ ' จึงต้องถูกเข้ารหัสที่นั่นเพิ่มเติมจากแอมเปอร์แซนด์
นิสัยที่แข็งแกร่งที่สุดคือการใส่อัญประกาศให้แอตทริบิวต์เสมอและเข้ารหัสอักขระอัญประกาศที่ตรงกันพร้อมกับ < > และ & แอตทริบิวต์ที่ไม่มีอัญประกาศนั้นรักษาความปลอดภัยได้ยากกว่ามาก เพราะเมื่อนั้นช่องว่างและอักขระอื่น ๆ อีกมากสามารถหลุดออกจากค่าได้ ยังมีบริบทที่แยกต่างหากโดยสิ้นเชิงด้วย คือภายในบล็อก script บล็อก style หรือแอตทริบิวต์ URL ที่ซึ่งการหลีก HTML เพียงอย่างเดียวไม่เพียงพอและจำเป็นต้องใช้การเข้ารหัสเฉพาะบริบทแทน
การเข้ารหัสเทียบกับการถอดรหัส และเมื่อใดควรทำแต่ละอย่าง
การเข้ารหัสคือทิศทางที่คุณหยิบมาใช้เมื่อสร้างเอาต์พุต: นำข้อความดิบมาผลิตมาร์กอัปที่ปลอดภัยด้วยการกระทำเข้ารหัส ส่วนการถอดรหัสคือสิ่งที่ตรงกันข้าม คือเปลี่ยนเอนทิตีกลับไปเป็นอักขระตรงตัวด้วยการกระทำถอดรหัส ซึ่งมีประโยชน์เมื่อคุณมีซอร์สที่หลีกแล้ว ที่คัดลอกมาจากฐานข้อมูล อีเมล หรือเครื่องมืออื่น และต้องการอ่านหรือแก้ไขข้อความเบื้องล่าง
ขั้นตอนการทำงานจริงใช้ทั้งสองอย่างด้วยปุ่ม Swap คุณอาจถอดรหัสโค้ดสั้น ๆ ที่จัดเก็บไว้ให้เป็นอักขระล้วน แก้ไขมัน แล้วเข้ารหัสฉบับที่แก้ไขแล้วใหม่เพื่อแสดงผลอย่างปลอดภัย ทั้งหมดโดยไม่ต้องพิมพ์ใหม่ เพียงจำกฎทองของจังหวะเวลาไว้: เข้ารหัส ณ ขณะของเอาต์พุต ไม่ใช่ ณ ขณะของอินพุต เพราะการหลีกเร็วเกินไปอาจทำให้ข้อมูลที่ต้องคงเป็นดิบในที่จัดเก็บเสียหาย
ข้อผิดพลาดที่พบบ่อยที่ควรหลีกเลี่ยง
ข้อผิดพลาดคลาสสิกคือการเข้ารหัสซ้ำซ้อน นั่นคือการรันข้อความที่หลีกแล้วผ่านตัวเข้ารหัสอีกครั้ง ซึ่งเปลี่ยน & เป็น &amp; และแสดงข้อความตรงตัว "&" ให้ผู้ใช้ของคุณเห็น จงเข้ารหัสเพียงครั้งเดียว และเฉพาะที่ขอบเขตของเอาต์พุตเท่านั้น ญาติใกล้ชิดของมันคือการหลีกข้อมูลตอนเข้าฐานข้อมูลและอีกครั้งตอนออก ซึ่งให้ผลลัพธ์ที่ผิดเพี้ยนแบบเดียวกัน
ความผิดพลาดที่พบบ่อยอีกอย่างคือการเข้าใจไปเองว่าการหลีก HTML ปกป้องทุกบริบท มันไม่ได้ปกป้องข้อมูลที่วางไว้ภายในสตริง JavaScript ค่า CSS หรือ href ที่ขึ้นต้นด้วย javascript: สิ่งเหล่านั้นต้องการกฎการเข้ารหัสของตัวเอง สุดท้าย อย่าสร้างตัวหลีกแบบไม่ครบถ้วนขึ้นเองที่ลืมแอมเปอร์แซนด์หรืออัญประกาศของแอตทริบิวต์ เพราะช่องโหว่เหล่านั้นคือจุดที่บั๊กและ XSS เล็ดลอดเข้ามาพอดี จงปล่อยให้ตัวเข้ารหัสที่สมบูรณ์และเรียงลำดับอย่างถูกต้องทำงานนั้น
คำถามที่พบบ่อย
อักขระใดบ้างที่ถูก encode เป็น HTML entity
การ encode ช่วยป้องกัน XSS อย่างไร
ฉันแปลง entity กลับเป็นข้อความปกติได้ไหม
ปุ่ม Swap มีไว้ทำอะไร
ข้อมูลของฉันถูกส่งไปยังเซิร์ฟเวอร์ไหม
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้