Base64 Encoding ในทางปฏิบัติ: 7 การใช้งานจริงที่นักพัฒนาทุกคนควรรู้

Base64 มีอยู่ทุกหนแห่งในการพัฒนาเว็บ แต่บทเรียนส่วนใหญ่อธิบายเพียงว่ามันทำงานอย่างไร บทความนี้เน้นที่ 7 สถานการณ์จริง ที่คุณจะใช้การเข้ารหัส Base64 จริง ๆ ในงานพัฒนาประจำวัน พร้อมตัวอย่างโค้ดที่สามารถคัดลอกได้โดยตรง

ลองใช้เครื่องมือเข้ารหัส/ถอดรหัส Base64 ของเรา →

1. ฝังรูปภาพใน HTML/CSS (Data URI)

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

<!-- Embed a small icon directly in HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU..." alt="icon" />

/* Embed in CSS */
.icon {
  background-image: url('data:image/svg+xml;base64,PHN2Zy...');
}

เมื่อใดควรใช้: รูปภาพขนาดต่ำกว่า 10KB (ไอคอน โลโก้ขนาดเล็ก องค์ประกอบ UI)

เมื่อใดไม่ควรใช้: รูปภาพขนาดเกิน 10KB — การเพิ่มขนาด 33% มีน้ำหนักมากกว่าการประหยัดคำขอ HTTP

// Node.js: Convert image file to Base64 data URI
const fs = require('fs');
const imageBuffer = fs.readFileSync('icon.png');
const base64 = imageBuffer.toString('base64');
const dataUri = `data:image/png;base64,${base64}`;
console.log(dataUri);

แปลงรูปภาพเป็น Base64 ด้วยเครื่องมือเข้ารหัสของเรา →

2. โครงสร้าง JWT Token

JSON Web Token (JWT) ใช้ การเข้ารหัส Base64URL (ตัวแปรที่ปลอดภัยสำหรับ URL) สำหรับสามส่วน: header, payload และ signature การเข้าใจสิ่งนี้เป็นสิ่งจำเป็นสำหรับการดีบักปัญหาการยืนยันตัวตน

// A JWT token:
// eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiam9obiJ9.signature
//  ^^^^^ header ^^^^^   ^^^^^ payload ^^^^^

// Decoding the header (Base64URL → JSON):
atob('eyJhbGciOiJIUzI1NiJ9');
// → '{"alg":"HS256"}'

// Decoding the payload:
atob('eyJ1c2VyIjoiam9obiJ9');
// → '{"user":"john"}'

จุดสำคัญ: JWT token ไม่ได้เข้ารหัสลับ ใครก็สามารถถอดรหัส header และ payload ได้ด้วยการถอดรหัส Base64 อย่างง่าย signature ตรวจสอบความสมบูรณ์ ไม่ใช่ความลับ

ถอดรหัส JWT token ด้วย JWT Decoder ของเรา →

3. Kubernetes Secrets

Kubernetes เก็บค่าลับในรูปแบบสตริงที่เข้ารหัส Base64 ในไฟล์ YAML manifest นี่เป็นหนึ่งในกรณีการใช้งาน Base64 ที่พบบ่อยที่สุดใน DevOps

# Creating a Kubernetes Secret
apiVersion: v1
kind: Secret
metadata:
  name: db-credentials
type: Opaque
data:
  DB_PASSWORD: c3VwZXItc2VjcmV0  # echo -n 'super-secret' | base64
  DB_USER: YWRtaW4=              # echo -n 'admin' | base64

# Encode a value for Kubernetes secrets
echo -n 'my-password' | base64
# → bXktcGFzc3dvcmQ=

# Decode a Kubernetes secret value
echo -n 'bXktcGFzc3dvcmQ=' | base64 --decode
# → my-password

# IMPORTANT: Always use -n with echo to avoid trailing newline!

คำเตือนด้านความปลอดภัย: Base64 ใน Kubernetes Secrets มีไว้สำหรับการเข้ารหัส (encoding) ไม่ใช่การเข้ารหัสลับ (encryption) ใช้โซลูชันเช่น Sealed Secrets, External Secrets หรือ Vault สำหรับความปลอดภัยที่แท้จริง

4. Payload คำขอ/การตอบกลับ API

เมื่อ API ต้องส่งข้อมูลไบนารี (รูปภาพ ไฟล์ ใบรับรอง) ภายใน JSON payload การเข้ารหัส Base64 เป็นวิธีมาตรฐาน เนื่องจาก JSON รองรับเฉพาะข้อความ

// Uploading an image via API
const fileInput = document.getElementById('avatar');
const file = fileInput.files[0];

const reader = new FileReader();
reader.onload = async () => {
  const base64 = reader.result.split(',')[1]; // Remove data URI prefix

  await fetch('/api/upload-avatar', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      filename: file.name,
      data: base64,        // Base64-encoded file content
      contentType: file.type,
    }),
  });
};
reader.readAsDataURL(file);

5. การยืนยันตัวตน HTTP Basic

รูปแบบการยืนยันตัวตน HTTP Basic ส่งข้อมูลรับรองเป็นสตริงที่เข้ารหัส Base64 ในส่วนหัว Authorization ซึ่งยังคงใช้ใน API จำนวนมาก

// Constructing Basic Auth header
const username = 'admin';
const password = 'secret123';
const credentials = btoa(`${username}:${password}`);
// → "YWRtaW46c2VjcmV0MTIz"

// Using in fetch
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': `Basic ${credentials}`,
  },
});

// curl equivalent
// curl -u admin:secret123 https://api.example.com/data
// (curl Base64-encodes automatically with -u)

ใช้ HTTPS เสมอกับ Basic Auth ผ่าน HTTP แบบไม่เข้ารหัสลับ ข้อมูลรับรอง Base64 สามารถถูกถอดรหัสได้ง่าย ๆ โดยใครก็ตามที่ดักจับทราฟฟิก

6. ไฟล์แนบอีเมล (MIME)

โปรโตคอลอีเมล (SMTP) ถูกออกแบบมาสำหรับข้อความ ASCII เท่านั้น ไฟล์แนบไบนารี — รูปภาพ, PDF, เอกสาร — จะถูกเข้ารหัส Base64 ก่อนรวมในข้อความอีเมลผ่าน MIME

// Node.js: Sending email with attachment (nodemailer)
const nodemailer = require('nodemailer');
const fs = require('fs');

const pdfBuffer = fs.readFileSync('report.pdf');

await transporter.sendMail({
  from: 'sender@example.com',
  to: 'recipient@example.com',
  subject: 'Monthly Report',
  attachments: [
    {
      filename: 'report.pdf',
      content: pdfBuffer,
      // nodemailer handles Base64 encoding internally
      encoding: 'base64',
    },
  ],
});

เบื้องหลัง ข้อความ MIME มีลักษณะดังนี้:

Content-Type: application/pdf
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename="report.pdf"

JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYmoKPDwvTGVuZ3RoIDMg
MCBSPj4Kc3RyZWFtCkJUCi9GMS...

7. จัดเก็บข้อมูลไบนารีในระบบข้อความเท่านั้น

บางระบบ — ตัวแปรสภาพแวดล้อม, ไฟล์คอนฟิก JSON, การส่งออก CSV — รองรับเฉพาะข้อความ Base64 ช่วยให้คุณฝังข้อมูลไบนารีได้อย่างปลอดภัยในบริบทข้อความเท่านั้นเหล่านี้

# .env file: Store SSL certificate as Base64
SSL_CERT=LS0tLS1CRUdJTiBDRVJUSUZJQ0FURS0tLS0t...
SSL_KEY=LS0tLS1CRUdJTiBQUklWQVRFIEtFWS0tLS0t...

# In your application:
# const cert = Buffer.from(process.env.SSL_CERT, 'base64');

// Storing binary config in JSON
{
  "favicon": "iVBORw0KGgoAAAANSUhEUgAAA...",
  "sslCert": "LS0tLS1CRUdJTiBDRVJUSUZJ..."
}

รูปแบบนี้ใช้กันทั่วไปในแพลตฟอร์มคลาวด์ (Heroku, Railway, Fly.io) ที่ตัวแปรสภาพแวดล้อมเป็นกลไกการกำหนดค่าหลัก

Base64 เทียบกับ Base64URL

Base64 มาตรฐานใช้ + และ / ซึ่งไม่ปลอดภัยใน URL Base64URL แทนที่ด้วย - และ _:

อ้างอิงด่วน: คำสั่ง Base64

# Encode a string
echo -n 'Hello World' | base64
# → SGVsbG8gV29ybGQ=

# Decode a string
echo -n 'SGVsbG8gV29ybGQ=' | base64 --decode
# → Hello World

# Encode a file
base64 < input.bin > output.txt

# Decode a file
base64 --decode < encoded.txt > output.bin

# JavaScript (browser)
btoa('Hello World')        // encode
atob('SGVsbG8gV29ybGQ=')  // decode

# Python
import base64
base64.b64encode(b'Hello World')
base64.b64decode(b'SGVsbG8gV29ybGQ=')

เข้ารหัสและถอดรหัส Base64 ทันทีด้วยเครื่องมือของเรา →