Base64 ตัวถอดรหัส

Base64 คืออะไร?#

Base64 คือวิธีการแทนข้อมูลไบนารีในรูปแบบข้อความธรรมดา โดยใช้อักขระ ASCII 64 ตัว ได้แก่ A–Z, a–z, 0–9, รวมถึง + และ / ช่วยให้ข้อมูลไบนารี เช่น รูปภาพ คีย์ และไฟล์แนบอีเมล ส่งผ่านระบบที่ออกแบบมาสำหรับข้อความได้อย่างปลอดภัย Base64 คือการเข้ารหัส ไม่ใช่การเข้ารหัสลับ

Base64 ใช้ชุดอักขระ 64 ตัวที่กำหนดไว้ตายตัว แต่ละค่าตั้งแต่ 0 ถึง 63 จะสอดคล้องกับอักขระหนึ่งตัวพอดี นี่คือวิธีที่ข้อมูลไบนารี 3 ไบต์กลายเป็นอักขระที่อ่านได้ 4 ตัว:

คุณน่าจะเคยเห็นมันมาก่อนแล้ว Base64 ปรากฏอยู่ทุกที่ที่ข้อมูลไบนารีต้องเดินทางผ่านข้อความ:

• ฝังรูปภาพหรือไอคอนขนาดเล็กโดยตรงใน HTML หรือ CSS
• ส่งคืนข้อมูลไบนารีภายใน JSON API response
• เข้ารหัสไฟล์แนบอีเมล (MIME)
• จัดเก็บคีย์และใบรับรองในไฟล์ PEM

เทคนิค data-URI นั้นมีหน้าตาแบบนี้ สตริงยาวๆ คือรูปภาพทั้งใบ:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

เหตุใด Base64 จึงมีอยู่?#

โปรโตคอลเครือข่ายในยุคแรกถูกสร้างมาสำหรับข้อความ ไม่ใช่ไบต์ดิบ ASCII ใช้ 7 บิตและ 128 อักขระ ซึ่งเพียงพอสำหรับภาษาอังกฤษแต่ไม่ใช่สำหรับข้อมูลไบนารี บางระบบบิดเบือนอักขระควบคุมหรือเขียนจุดสิ้นสุดบรรทัดใหม่ (LF เป็น CR + LF) ซึ่งทำให้รูปภาพและไฟล์เสียงเสียหายโดยไม่รู้ตัวระหว่างการส่ง

Base64 หลีกเลี่ยงปัญหาทั้งหมดนั้นโดยส่งออกเฉพาะอักขระที่ทุกระบบเห็นตรงกัน Base16 และ Base32 ทำงานแบบเดียวกันแต่ใช้ชุดอักขระที่เล็กกว่า แต่ Base64 บรรจุข้อมูลได้มากกว่าต่ออักขระหนึ่งตัวในขณะที่ยังคงปลอดภัย นั่นคือเหตุผลที่มันชนะ

วิธีการทำงานของ Base64 encoding#

กระบวนการทั้งหมดเป็นแนวคิดเดียวที่ทำซ้ำ: นำ 3 ไบต์ (24 บิต) มาแบ่งใหม่เป็นกลุ่ม 6 บิตสี่กลุ่ม แล้วค้นหาแต่ละกลุ่มในชุดอักขระ นี่คือคำว่า "Logto" ที่เข้ารหัสด้วยมือ

1. เขียนแต่ละอักขระเป็นเลขฐานสองขนาด 8 บิต โดยใช้รหัส ASCII
2. นำ 3 ไบต์ต่อครั้ง นั่นคือ 24 บิต
3. แบ่งบิต 24 ตัวเดิมใหม่เป็นสี่กลุ่ม กลุ่มละ 6 บิต
4. อ่านแต่ละกลุ่ม 6 บิตเป็นตัวเลขตั้งแต่ 0 ถึง 63
5. ค้นหาตัวเลขนั้นในชุดอักขระเพื่อรับอักขระหนึ่งตัว
6. หากไบต์ชุดสุดท้ายไม่ครบ 3 ให้เติมบิตที่เหลือด้วยศูนย์และเพิ่ม "=" เพื่อให้แต่ละบล็อกมี 4 อักขระเสมอ

ขั้นตอนที่ 1 แปลงแต่ละอักขระเป็นเลขฐานสองขนาด 8 บิต:

ขั้นตอนที่ 2 นำสามไบต์แรก "Log" มาแบ่ง 24 บิตเดิมใหม่เป็นสี่กลุ่ม 6 บิต:

ขั้นตอนที่ 3 อ่านแต่ละกลุ่ม 6 บิตเป็นตัวเลข แล้วค้นหาตัวเลขนั้นในชุดอักขระ:

"Logto" มี 5 ไบต์ ไม่ใช่จำนวนที่หารด้วย 3 ลงตัว สองไบต์สุดท้าย "to" ให้การแบ่งเป็น 6 + 6 + 4 เติมบิตสุดท้าย 4 บิตด้วยศูนย์เพื่อให้ครบกลุ่ม 6 บิต แล้วเพิ่ม "=" หนึ่งตัวเพื่อให้บล็อก 4 อักขระสมบูรณ์:

นำบล็อกทั้งหมดมาต่อกัน:

"Logto"  →  TG9ndG8=

ทุกภาษาโปรแกรมมีฟังก์ชันนี้ในตัว ใน Node.js:

const text = 'Logto';
const base64 = Buffer.from(text).toString('base64');
console.log(base64); // TG9ndG8=

กฎสามข้อเกิดขึ้นจากกระบวนการนั้น ควรจำไว้:

• 3 เข้า 4 ออก: ความยาว output คือ input ที่ปัดขึ้นให้เป็นจำนวนเต็มของ 4 อักขระ ดังนั้นข้อมูลที่เข้ารหัสจะมีขนาดใหญ่ขึ้นประมาณ 33% เสมอ
• "=" หมายถึง padding: มันจะปรากฏเฉพาะเมื่อ input ไม่ใช่จำนวนเต็มของ 3 ไบต์
• Padding นับส่วนที่เหลือ: ไม่มี "=" หมายถึงจำนวนเต็มของ 3 ไบต์ มี "=" หนึ่งตัวหมายถึงมี 2 ไบต์เหลือ มี "=" สองตัวหมายถึงมี 1 ไบต์เหลือ

ควรใช้ Base64 เมื่อใด?#

ใช้ Base64 เมื่อข้อมูลไบนารีต้องผ่านช่องทางที่รองรับเฉพาะข้อความ:

• ฝัง asset โดยตรง: ฝังรูปภาพหรือฟอนต์ขนาดเล็กใน HTML/CSS เพื่อลดจำนวน request
• การส่งข้อมูลแบบข้อความเท่านั้น: ใส่ข้อมูลไบนารีใน JSON, XML หรือพารามิเตอร์ query ใน URL
• อักขระที่ถูกจำกัด: ส่งข้อมูลผ่านระบบที่มีปัญหากับไบต์ควบคุม

สิ่งที่คุณได้รับตอบแทน:

• ใช้ได้กับทุกระบบ: ระบบใดก็ตามที่รองรับ ASCII สามารถอ่านได้ โดยไม่ต้องเจรจาเรื่อง charset
• ไม่มีข้อมูลเสียหาย: output จะผ่านช่องทางที่อาจทำให้ไบต์ดิบเสียหายได้อย่างปลอดภัย

URL-safe Base64 (Base64URL)#

Base64 มาตรฐานใช้อักขระสามตัวที่ขัดแย้งกับการทำงานของ URL, query string และชื่อไฟล์ ได้แก่ +, / และ padding "=" การนำสตริง Base64 ธรรมดาใส่ในลิงก์อาจทำให้เกิดปัญหาที่ไม่เด่นชัด:

• + กลายเป็นช่องว่าง. ใน query string เซิร์ฟเวอร์หลายตัวอ่าน + เป็นช่องว่าง ดังนั้น ?data=ab+cd จะถูกรับมาเป็น "ab cd" อย่างเงียบๆ และไบต์จะผิดพลาด
• / คือตัวคั่น path. / ภายในค่าอาจถูกอ่านเป็น path segment ใหม่ และระบบไฟล์ส่วนใหญ่ปฏิเสธมันในชื่อไฟล์โดยสิ้นเชิง
• = ก็เป็นอักขระสงวนเช่นกัน. มันแบ่งคีย์จากค่าใน query string ดังนั้น padding "=" ตอนท้ายจึงถูกตัดออกหรืออ่านผิด

คุณสามารถเข้ารหัสแบบ percent-encoding ได้ (+ เป็น %2B, / เป็น %2F, = เป็น %3D) แต่นั่นทำให้สตริงยาวขึ้นและเสี่ยงต่อการ encode ซ้ำโดยไม่ตั้งใจ

Base64URL (RFC 4648 §5) แก้ไขปัญหานี้ตั้งแต่ต้นทาง: แทนที่ + ด้วย -, แทนที่ / ด้วย _ และละ padding "=" ผลลัพธ์สามารถใส่ใน URL, query parameter หรือชื่อไฟล์ได้โดยตรงโดยไม่ต้องทำอะไรเพิ่ม คุณจะพบมันใน URL, ชื่อไฟล์ และ web API หลายตัว

const base64 = 'TG9ndG8=';
const urlSafe = base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
console.log(urlSafe); // TG9ndG8

ข้อจำกัด (และความเข้าใจผิดที่พบบ่อย)#

Base64 คือการแทนค่า ไม่ใช่ของฟรี ควรจำสิ่งสามอย่างนี้ไว้:

• ขนาดใหญ่ขึ้นประมาณ 33%: 3 ไบต์กลายเป็น 4 อักขระ ดังนั้นข้อมูลที่เข้ารหัสจะพองตัวขึ้นประมาณหนึ่งในสาม
• ใช้ทรัพยากร CPU: การเข้ารหัสและถอดรหัสไม่ฟรีเมื่อมีปริมาณมากหรือข้อมูลขนาดใหญ่
• อ่านยาก: สตริงที่ทึบแสงทำให้การดู log และการ debug ยากขึ้น

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