Vad är Base64?

Base64 är ett binärt-till-text encoding-schema som omvandlar binär data till en ASCII-sträng. Namnet kommer från att encodingen använder 64 olika tecken för att representera data.

De 64 tecknen

Base64 använder:

  • A-Z (26 tecken)
  • a-z (26 tecken)
  • 0-9 (10 tecken)
    • och / (2 tecken)
  • = (padding)

Totalt 64 tecken som är säkra att använda i de flesta system.

Varför Base64?

Problem som Base64 löser

1. Binär data i text-baserade system Många system är byggda för att hantera text, inte binär data:

  • Email (SMTP)
  • JSON och XML
  • URL query parameters
  • HTML och CSS

2. Säker överföring Base64 använder bara tecken som inte tolkas speciellt av olika system:

  • Inga whitespace-problem
  • Inga problem med olika charset
  • Fungerar i URLs (med Base64URL variant)

3. Data embedding Möjliggör att bädda in filer direkt i kod eller markup:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

Hur fungerar Base64?

Encoding Process

  1. Ta 3 bytes (24 bits) av data
  2. Dela upp i 4 grupper om 6 bits vardera
  3. Konvertera varje grupp till ett Base64-tecken
  4. Lägg till padding om nödvändigt

Exempel: “Hi”

Text:     H        i
ASCII:    72       105
Binary:   01001000 01101001
Grouped:  010010 000110 1001
Padded:   010010 000110 100100 (padding)
Base64:   S      G      k      =
Result:   SGk=

Varför blir det större?

Base64 ökar storleken med ~33%:

  • 3 bytes → 4 Base64-tecken
  • 24 bits → 32 bits (med padding)
  • 100 KB fil → 133 KB Base64

Detta är tradeoff för kompatibilitet!

Base64 vs Base64URL

Standard Base64

+ / =

Problematiskt i URLs eftersom dessa tecken har speciell betydelse.

Base64URL

- _ (no padding)

URL-säker variant som används i:

  • JWT tokens
  • URL parameters
  • Filnamn
// Standard Base64
"hello+world/test="

// Base64URL
"hello-world_test"

Vanliga användningsområden

1. Data URLs i HTML/CSS

Bädda in bilder direkt:

<img src="data:image/png;base64,iVBORw0KG..." alt="Logo">

Fördelar:

  • Färre HTTP-requests
  • Snabbare laddning för små bilder
  • Ingen extern fil att hantera

Nackdelar:

  • Större HTML-storlek
  • Kan inte cachas separat
  • Inte lämpligt för stora bilder

2. API Authentication

Basic Authentication:

const credentials = btoa("username:password");
// "dXNlcm5hbWU6cGFzc3dvcmQ="

fetch("/api/data", {
  headers: {
    "Authorization": `Basic ${credentials}`
  }
});

JWT Tokens:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIn0.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Varje del är Base64URL-encoded JSON.

3. File Upload Preview

Visa bild innan upload:

function previewImage(file) {
  const reader = new FileReader();
  
  reader.onload = (e) => {
    const base64 = e.target.result;
    document.getElementById("preview").src = base64;
  };
  
  reader.readAsDataURL(file);
}

4. Email Attachments

MIME använder Base64 för att skicka bilagor:

Content-Type: image/png
Content-Transfer-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI
12P4//8/w38GIAXDIBKE0DHxgljN
BAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

5. Lagra binär data i JSON

{
  "filename": "document.pdf",
  "content": "JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9UeXBl...",
  "encoding": "base64"
}

6. WebSocket Binary Data

const base64Data = btoa(String.fromCharCode(...new Uint8Array(buffer)));
websocket.send(JSON.stringify({
  type: "binary",
  data: base64Data
}));

JavaScript Implementation

Browser (Native)

Encoding:

// String to Base64
const encoded = btoa("Hello World");
console.log(encoded); // "SGVsbG8gV29ybGQ="

// Decode
const decoded = atob(encoded);
console.log(decoded); // "Hello World"

Problem med Unicode:

// Detta kommer INTE fungera!
btoa("Hello 👋"); // Error!

// Lösning:
function encodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, 
    (match, p1) => String.fromCharCode('0x' + p1)
  ));
}

function decodeUnicode(str) {
  return decodeURIComponent(atob(str).split('').map(
    c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
  ).join(''));
}

Node.js

// Encoding
const encoded = Buffer.from("Hello World").toString("base64");
console.log(encoded); // "SGVsbG8gV29ybGQ="

// Decoding
const decoded = Buffer.from(encoded, "base64").toString("utf-8");
console.log(decoded); // "Hello World"

// Base64URL
const base64url = encoded
  .replace(/\+/g, '-')
  .replace(/\//g, '_')
  .replace(/=/g, '');

Modern Web API

// TextEncoder/TextDecoder (Unicode-safe)
function base64Encode(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = String.fromCodePoint(...bytes);
  return btoa(binString);
}

function base64Decode(base64) {
  const binString = atob(base64);
  const bytes = Uint8Array.from(binString, m => m.codePointAt(0));
  return new TextDecoder().decode(bytes);
}

Performance Tips

1. Stora filer

För stora filer, använd streaming:

async function encodeFileInChunks(file) {
  const chunkSize = 1024 * 1024; // 1MB chunks
  const reader = file.stream().getReader();
  let result = "";
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    
    result += btoa(String.fromCharCode(...value));
  }
  
  return result;
}

2. Worker Threads

Flytta encoding till en Web Worker för stora dataset:

// worker.js
self.onmessage = (e) => {
  const encoded = btoa(e.data);
  self.postMessage(encoded);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage(largeString);
worker.onmessage = (e) => console.log(e.data);

3. Caching

Cache encoded resultat när möjligt:

const cache = new Map();

function cachedEncode(data) {
  const key = data.slice(0, 100); // Sample för key
  
  if (cache.has(key)) {
    return cache.get(key);
  }
  
  const encoded = btoa(data);
  cache.set(key, encoded);
  return encoded;
}

Security Considerations

1. Base64 är INTE kryptering!

// FARLIGT - synligt för alla!
const password = btoa("mySecretPassword123");
// "bXlTZWNyZXRQYXNzd29yZDEyMw=="

// Enkelt att dekoda:
atob("bXlTZWNyZXRQYXNzd29yZDEyMw==");
// "mySecretPassword123"

Base64 är encoding, inte encryption. Använd aldrig för att “gömma” känslig data!

2. Validera alltid input

function safeBase64Decode(str) {
  // Validera Base64 format
  const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
  
  if (!base64Regex.test(str)) {
    throw new Error("Invalid Base64 string");
  }
  
  try {
    return atob(str);
  } catch (e) {
    throw new Error("Failed to decode Base64");
  }
}

3. Storleksbegränsningar

const MAX_SIZE = 10 * 1024 * 1024; // 10MB

function encodeWithLimit(data) {
  const encoded = btoa(data);
  
  if (encoded.length > MAX_SIZE) {
    throw new Error("Encoded data too large");
  }
  
  return encoded;
}

Common Pitfalls

1. Unicode-hantering

// Fel - fungerar inte med emoji/unicode
btoa("Hello 🌍"); // Error!

// Rätt - hantera unicode korrekt
btoa(unescape(encodeURIComponent("Hello 🌍")));

2. Newlines i output

Vissa Base64-implementationer lägger till newlines:

const encoded = "SGVsbG8g\nV29ybGQ=";
const cleaned = encoded.replace(/\n/g, "");

3. Padding

// Standard Base64 - padding required
"SGVsbG8=" // OK

// Base64URL - no padding
"SGVsbG8"  // OK

// Mixed - problematic!
"SGVsbG8-" // Fel!

Best Practices

1. Använd rätt variant

  • Standard Base64: Email, MIME, general encoding
  • Base64URL: JWTs, URL parameters, filenames
  • Base64 no-padding: Vissa databaser, kompakt format

2. Dokumentera encoding

interface FileData {
  filename: string;
  content: string;  // Base64-encoded binary data
  encoding: "base64";
  mimeType: string;
}

3. Hantera fel graciöst

function tryDecode(base64String) {
  try {
    return {
      success: true,
      data: atob(base64String)
    };
  } catch (error) {
    return {
      success: false,
      error: "Invalid Base64 string"
    };
  }
}

4. Överväg alternativ för stora filer

För filer > 5MB, överväg:

  • Direct file upload (multipart/form-data)
  • Chunked upload
  • Signed URLs (S3, CloudFlare R2)
  • Binary WebSocket

Verktyg

Använd våra online-verktyg för Base64:

Slutsats

Base64 är ett ovärderligt verktyg för moderna webbutvecklare:

Använd Base64 för:

  • ✅ Små bilder i HTML/CSS
  • ✅ API authentication headers
  • ✅ JWT tokens
  • ✅ Email attachments
  • ✅ Binär data i JSON

Undvik Base64 för:

  • ❌ Kryptering eller säkerhet
  • ❌ Stora filer (>5MB)
  • ❌ Data som behöver sökas/indexeras
  • ❌ När direkta HTTP-uploads är möjliga

Kom ihåg: Base64 är encoding för kompatibilitet, inte säkerhet eller komprimering!