JavaScript'te Base64 — btoa() & Buffer

·Front-end & Node.js Developer·İnceleyenSophie Laurent·Yayınlandı

Ücretsiz Base64 Kodlayıcı Online aracını doğrudan tarayıcınızda kullanın — kurulum gerektirmez.

Base64 Kodlayıcı Online Online Dene →

Bir CSS data URI'ye görsel gömdüğünüzde, HTTP Authorization başlığında kimlik bilgisi ilettiğinizde ya da bir ortam değişkeninde ikili sertifika sakladığınızda, JavaScript verilerini hem tarayıcıda hem de Node.js'te güvenilir biçimde Base64 ile kodlamanız gerekir. JavaScript iki ayrı yerleşik API sunar:btoa() tarayıcı ortamları için (Node.js 16+ sürümünde de mevcuttur) ve Buffer.from()Node.js için — her birinin Unicode, ikili veri ve URL güvenliği konusunda farklı kısıtlamaları vardır. Kod yazmadan hızlı bir kodlama yapmak için ToolDeck's Base64 Encoder bunu tarayıcıda anında gerçekleştirir. Bu kılavuz her iki ortam için üretime hazır örnekleri kapsar: Unicode işleme, URL güvenli varyantlar, dosya ve API yanıtı kodlama, CLI kullanımı ve gerçek kod tabanlarında tutarlı biçimde hatalara yol açan dört yaygın hata.

  • btoa() tarayıcıya özgüdür ve Node.js 16+ sürümünde global olarak mevcuttur, ancak yalnızca Latin-1 (kod noktaları 0–255) kabul eder — Unicode girdi DOMException fırlatır
  • Buffer.from(text, "utf8").toString("base64") Node.js karşılığıdır ve Unicode'u ek adımlara gerek kalmadan yerel olarak işler
  • URL güvenli Base64, + karakterini - ile, / karakterini _ ile değiştirir ve = doldurmayı kaldırır — Node.js 18+ sürümünde Buffer.from().toString("base64url") tek satırla çözüm sunar
  • İkili veriler (ArrayBuffer, Uint8Array, dosyalar) için Node.js'te Buffer kullanın ya da tarayıcıda arrayBuffer() + Uint8Array yaklaşımını tercih edin — asla response.text() kullanmayın
  • Uint8Array.prototype.toBase64() (TC39 Stage 3) Node.js 22+ ve Chrome 130+ sürümlerinde zaten kullanılabilir durumdadır ve her iki ortamı birleştirecektir

Base64 Kodlama Nedir?

Base64, rastgele ikili verileri 64 yazdırılabilir ASCII karakterinden oluşan bir dizgeye dönüştürür: A–Z, a–z, 0–9, + ve /. Her 3 bayt girdi tam olarak 4 Base64 karakteriyle eşleşir; girdi uzunluğu 3'ün katı değilse bir ya da iki = dolgu karakteri eklenir. Kodlanmış çıktı her zaman orijinalden yaklaşık %33 daha büyüktür.

Base64 şifreleme değildir— gizlilik sağlamaz. Kodlanmış dizgeye sahip olan herkes tek bir fonksiyon çağrısıyla çözebilir. Amacı aktarım güvenliğidir: pek çok protokol ve depolama biçimi 7 bitlik ASCII metin için tasarlanmıştır ve rastgele ikili baytları işleyemez. Base64 bu boşluğu kapatır. Yaygın JavaScript kullanım senaryoları arasında varlıkları satır içi olarak yerleştirmek için data URI'ler, HTTP Basic Auth başlıkları, JWT token segmentleri, e-posta MIME ekleri ve JSON API'lerinde ikili blob'ların saklanması sayılabilir.

Before · text
After · text
deploy-bot:sk-prod-a7f2c91e4b3d8
ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg=

btoa() — Tarayıcıya Özgü Kodlama Fonksiyonu

btoa()(binary-to-ASCII), IE10'dan bu yana tarayıcılarda mevcuttur ve WinterCG uyumluluk girişiminin bir parçası olarak Node.js 16.0'da global fonksiyon haline gelmiştir. Deno, Bun ve Cloudflare Workers'ta da yerel olarak çalışır. İçe aktarma gerekmez.

Fonksiyon tek bir dize argümanı alır ve Base64 kodlanmış biçimini döndürür. Simetrik karşılığı atob() (ASCII-to-binary) geri çözer. Her ikisi de eş zamanlıdır ve girdi boyutuna göre sabit bellekte çalışır.

Minimal çalışan örnek

JavaScript (browser / Node.js 16+)
// Encoding an API credential pair for an HTTP Basic Auth header
const serviceId  = 'deploy-bot'
const apiKey     = 'sk-prod-a7f2c91e4b3d8'

const credential = btoa(`${serviceId}:${apiKey}`)
// → 'ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg='

const headers = new Headers({
  Authorization: `Basic ${credential}`,
  'Content-Type': 'application/json',
})

console.log(headers.get('Authorization'))
// Basic ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg=

atob() ile çözme

JavaScript
// Round-trip: encode, transmit, decode
const payload = 'service:payments region:eu-west-1 env:production'

const encoded = btoa(payload)
const decoded = atob(encoded)

console.log(encoded)
// c2VydmljZTpwYXltZW50cyByZWdpb246ZXUtd2VzdC0xIGVudjpwcm9kdWN0aW9u

console.log(decoded === payload) // true
Not:btoa() ve atob(), WinterCG Minimum Common API'nin parçasıdır — tarayıcı dışı çalışma zamanlarında Fetch, URL ve crypto'yu yöneten aynı spesifikasyon. Node.js 16+, Bun, Deno ve Cloudflare Workers'ta aynı şekilde davranırlar.

Unicode ve ASCII Dışı Karakterlerin İşlenmesi

btoa()'nın en yaygın tuzağı, katı Latin-1 sınırıdır. U+00FF'in üzerinde bir kod noktasına sahip herhangi bir karakter anında istisna fırlatır:

JavaScript
btoa('Müller & Søren') // ❌ Uncaught DOMException: String contains an invalid character
btoa('résumé')         // ❌ 'é' is U+00E9 = 233 — within Latin-1, this one actually works
btoa('田中太郎')         // ❌ Throws — all CJK characters are above U+00FF

Doğru yaklaşım, önce dizeyi UTF-8 baytlarına kodlamak, ardından bu baytları Base64 ile kodlamaktır. JavaScript tam bu amaç için TextEncoder'ı sunar:

TextEncoder yaklaşımı — herhangi bir Unicode girdi için güvenli

JavaScript (browser + Node.js 16+)
// Utility functions for Unicode-safe Base64
function toBase64(text: string): string {
  const bytes = new TextEncoder().encode(text)
  const chars = Array.from(bytes, byte => String.fromCharCode(byte))
  return btoa(chars.join(''))
}

function fromBase64(encoded: string): string {
  const binary = atob(encoded)
  const bytes  = Uint8Array.from(binary, ch => ch.charCodeAt(0))
  return new TextDecoder().decode(bytes)
}

// Works with any language or script
const orderNote = 'Onaylandı: Mehmet Yılmaz — İstanbul deposu, miktar: 250'
const encoded   = toBase64(orderNote)
const decoded   = fromBase64(encoded)

console.log(encoded)
// T25heWFuZMSxOiBNZWhtZXQgWcSxbG1heiDigJQgxLBzdGFuYnVsIGRlcG9zdSwgbWlrdGFyOiAyNTA=

console.log(decoded === orderNote) // true
Not:Zaten Node.js kullanıyorsanız TextEncoder geçici çözümünü tamamen atlayın — Buffer.from(text, 'utf8').toString('base64')kullanın. Unicode'u yerel olarak işler ve büyük diziler için daha hızlıdır.

Node.js'te Buffer.from() — Örneklerle Kapsamlı Kılavuz

Node.js'te Buffer, kodlama dönüşümleri de dahil olmak üzere tüm ikili veri işlemleri için deyimsel API'dir. TextEncoder'dan yıllar önce ortaya çıkmıştır ve sunucu tarafı kodlarda tercih edilen seçim olmaya devam etmektedir. btoa()'ya göre temel avantajları: yerel UTF-8 desteği, ikili veri işleme ve Node.js 18'den itibaren kullanılabilen 'base64url' kodlama kısayolu.

Temel metin kodlama ve çözme

Node.js
// Encoding a server configuration object for storage in an env variable
const dbConfig = JSON.stringify({
  host:           'db-primary.internal',
  port:           5432,
  database:       'analytics_prod',
  maxConnections: 100,
  ssl:            { rejectUnauthorized: true },
})

const encoded = Buffer.from(dbConfig, 'utf8').toString('base64')
console.log(encoded)
// eyJob3N0IjoiZGItcHJpbWFyeS5pbnRlcm5hbCIsInBvcnQiOjU0MzIsImRhdGFiYXNlIjoiYW5h...

// Decoding back
const decoded = Buffer.from(encoded, 'base64').toString('utf8')
const config  = JSON.parse(decoded)

console.log(config.host)           // db-primary.internal
console.log(config.maxConnections) // 100

Diskten ikili dosyaları kodlama

Node.js
import { readFileSync, writeFileSync } from 'node:fs'
import { join } from 'node:path'

// Read a TLS certificate and encode it for embedding in a config file
const certPem     = readFileSync(join(process.cwd(), 'ssl', 'server.crt'))
const certBase64  = certPem.toString('base64')

// Store as a single-line string — suitable for env vars or JSON configs
writeFileSync('./dist/cert.b64', certBase64, 'utf8')

console.log(`Certificate encoded: ${certBase64.length} characters`)
// Certificate encoded: 2856 characters

// Restore the binary cert from the encoded value
const restored = Buffer.from(certBase64, 'base64')
console.log(restored.equals(certPem)) // true

Hata işlemeli asenkron dosya kodlama

Node.js
import { readFile } from 'node:fs/promises'

async function encodeFileToBase64(filePath: string): Promise<string> {
  try {
    const buffer = await readFile(filePath)
    return buffer.toString('base64')
  } catch (err) {
    const code = (err as NodeJS.ErrnoException).code
    if (code === 'ENOENT') throw new Error(`File not found: ${filePath}`)
    if (code === 'EACCES') throw new Error(`Permission denied: ${filePath}`)
    throw err
  }
}

// Encode a PDF for an email attachment payload
const reportBase64 = await encodeFileToBase64('./reports/q1-financials.pdf')

const emailPayload = {
  to:          'finance-team@company.internal',
  subject:     'Q1 Financial Report',
  attachments: [{
    filename:    'q1-financials.pdf',
    content:     reportBase64,
    encoding:    'base64',
    contentType: 'application/pdf',
  }],
}

console.log(`Attachment: ${reportBase64.length} chars`)

JavaScript Base64 Fonksiyonları — Parametre Referansı

Python'ın base64modülünün aksine, JavaScript'in tek bir birleşik Base64 fonksiyonu yoktur. API, hedef ortama göre farklılık gösterir. Tüm yerel yaklaşımlar için tam referans:

FonksiyonGirdi türüUnicodeURL güvenliKullanılabilir ortamlar
btoa(string)string (Latin-1)❌ U+00FF üzerinde fırlatır❌ manuel değiştirmeBrowser, Node 16+, Bun, Deno
atob(string)Base64 string❌ ikili dize döndürür❌ manuel değiştirmeBrowser, Node 16+, Bun, Deno
Buffer.from(src, enc) .toString(enc)string | Buffer | Uint8Array✅ utf8 kodlama✅ Node 18+'de base64urlNode.js, Bun
TextEncoder().encode(str) + btoa()string (herhangi Unicode)✅ UTF-8 baytları ile❌ manuel değiştirmeBrowser, Node 16+, Deno
Uint8Array.toBase64() (TC39)Uint8Array✅ ikili✅ omitPadding + alphabetChrome 130+, Node 22+

Buffer.from(src, enc).toString(enc) imzası Base64 ile ilgili birkaç kodlama değeri kabul eder:

"base64"
Standart Base64 (RFC 4648 §4). + ve / kullanır, = dolgusuyla.
"base64url"
URL güvenli Base64 (RFC 4648 §5, Node.js 18+). - ve _ kullanır, dolgu olmadan.
"utf8"
Dize kaynakları için varsayılan. Kaynak insan tarafından okunabilir metin olduğunda kullanın.
"binary"
Latin-1 / ISO-8859-1. Kaynak ham ikili dize (ör. atob()'dan) olduğunda kullanın.

URL Güvenli Base64 — JWT, URL ve Dosya Adları için Kodlama

Standart Base64, URL'lerde ayrılmış olan + ve / karakterlerini kullanır — + sorgu dizelerinde boşluk olarak çözümlenir ve /yol ayırıcıdır. JWT'ler, URL parametreleri, dosya adları ve çerez değerleri URL güvenli varyantı gerektirir: +-, /_, sondaki = kaldırılır.

Tarayıcı — manuel karakter değiştirme

JavaScript (browser)
function toBase64Url(text: string): string {
  // For ASCII-safe input (e.g., JSON with only ASCII chars)
  return btoa(text)
    .replace(/+/g, '-')
    .replace(///g, '_')
    .replace(/=/g, '')
}

function fromBase64Url(encoded: string): string {
  // Restore standard Base64 characters and padding before decoding
  const base64  = encoded.replace(/-/g, '+').replace(/_/g, '/')
  const padded  = base64 + '==='.slice(0, (4 - base64.length % 4) % 4)
  return atob(padded)
}

// JWT header — must be URL-safe Base64
const header  = JSON.stringify({ alg: 'HS256', typ: 'JWT' })
const encoded = toBase64Url(header)
console.log(encoded) // eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

const decoded = fromBase64Url(encoded)
console.log(decoded) // {"alg":"HS256","typ":"JWT"}

Node.js 18+ — yerel 'base64url' kodlama

Node.js 18+
// Node.js 18 added 'base64url' as a first-class Buffer encoding
const sessionPayload = JSON.stringify({
  userId:     'usr_9f2a1c3e8b4d',
  role:       'editor',
  workspaceId:'ws_3a7f91c2',
  exp:        Math.floor(Date.now() / 1000) + 3600,
})

const encoded = Buffer.from(sessionPayload, 'utf8').toString('base64url')
// No + or / or = characters in the output
// eyJ1c2VySWQiOiJ1c3JfOWYyYTFjM2U4YjRkIiwicm9sZSI6ImVkaXRvciIsIndvcmtzcGFjZUlkIjoid3NfM2E3ZjkxYzIiLCJleHAiOjE3MTcyMDM2MDB9

const decoded = Buffer.from(encoded, 'base64url').toString('utf8')
console.log(JSON.parse(decoded).role) // editor

JavaScript'te Dosyaları ve API Yanıtlarını Kodlama

Üretim kodunda Base64 kodlama en çok iletilen dosyalara ve ikili içerik döndüren harici API'lerden gelen yanıtlara uygulanır. Desenler tarayıcı ile Node.js arasında farklıdır ve ikili veriler özel dikkat gerektirir.

Tarayıcı — input öğesinden dosya kodlama

JavaScript (browser)
// Modern approach: File.arrayBuffer() (Chrome 76+, Firefox 69+, Safari 14+)
async function encodeFile(file: File): Promise<string> {
  const buffer = await file.arrayBuffer()
  const bytes  = new Uint8Array(buffer)
  const chars  = Array.from(bytes, b => String.fromCharCode(b))
  return btoa(chars.join(''))
}

const uploadInput = document.getElementById('avatar') as HTMLInputElement

uploadInput.addEventListener('change', async (e) => {
  const file = (e.target as HTMLInputElement).files?.[0]
  if (!file) return

  try {
    const encoded = await encodeFile(file)
    const dataUri = `data:${file.type};base64,${encoded}`

    // Preview the image inline
    const img   = document.getElementById('preview') as HTMLImageElement
    img.src     = dataUri
    img.hidden  = false

    console.log(`Encoded ${file.name} (${file.size} bytes) → ${encoded.length} Base64 chars`)
  } catch (err) {
    console.error('Encoding failed:', err)
  }
})

API'den Base64 kodlu ikili veri çekme

JavaScript
// GitHub Contents API returns file content as Base64 with embedded newlines
async function fetchRepoFile(
  owner: string,
  repo:  string,
  path:  string,
  token: string,
): Promise<string> {
  const res = await fetch(
    `https://api.github.com/repos/${owner}/${repo}/contents/${path}`,
    {
      headers: {
        Authorization: `Bearer ${token}`,
        Accept: 'application/vnd.github.v3+json',
      },
    }
  )

  if (!res.ok) throw new Error(`GitHub API ${res.status}: ${res.statusText}`)

  const data = await res.json() as { content: string; encoding: string; size: number }

  if (data.encoding !== 'base64') {
    throw new Error(`Unexpected encoding from GitHub: ${data.encoding}`)
  }

  // GitHub wraps output at 60 chars — strip newlines before decoding
  const clean = data.content.replace(/\n/g, '')
  return atob(clean)
}

const openApiSpec = await fetchRepoFile(
  'acme-corp', 'platform-api', 'openapi.json', process.env.GITHUB_TOKEN!
)
const spec = JSON.parse(openApiSpec)
console.log(`API version: ${spec.info.version}`)

API hata ayıklama sırasında script yazmadan kodlanmış yanıtı incelemek istediğinizde, Base64 değerini doğrudan Base64 Encoder'a yapıştırın — çözme işlemini de destekler ve çıktıyı anında gösterir. GitHub API yanıtlarını, JWT yüklerini ve webhook imzalarını incelemek için kullanışlıdır.

Node.js ve Kabukta Komut Satırından Base64 Kodlama

CI/CD scriptleri, Makefile hedefleri veya tek seferlik hata ayıklama için nadiren tam bir script gerekir. Hem sistem araçları hem de Node.js tek satırlıkları platformlar arası çoğu durumu karşılar.

bash
# ── macOS / Linux system base64 ───────────────────────────────────────
# Standard encoding
echo -n "deploy-bot:sk-prod-a7f2c91e4b3d8" | base64
# ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg=

# URL-safe variant (replace chars and strip padding)
echo -n "deploy-bot:sk-prod-a7f2c91e4b3d8" | base64 | tr '+/' '-_' | tr -d '='

# Encode a file inline (macOS: -b 0 removes line wrapping; Linux: --wrap=0)
base64 -b 0 ./config/production.json
# or on Linux:
base64 --wrap=0 ./config/production.json

# Decode
echo "ZGVwbG95LWJvdDpzay1wcm9kLWE3ZjJjOTFlNGIzZDg=" | base64 --decode

# ── Node.js one-liner — works on Windows too ───────────────────────────
node -e "process.stdout.write(Buffer.from(process.argv[1]).toString('base64'))" "my:secret"
# bXk6c2VjcmV0

# URL-safe from Node.js 18+
node -e "process.stdout.write(Buffer.from(process.argv[1]).toString('base64url'))" "my:secret"
# bXk6c2VjcmV0  (same here since there are no special chars)

# Decode in Node.js
node -e "console.log(Buffer.from(process.argv[1], 'base64').toString())" "ZGVwbG95LWJvdA=="
Not:macOS'ta base64 varsayılan olarak çıktıyı 76 karakterde sarmalar. Bu, aşağı akış ayrıştırmayı bozar. Ortam değişkenine veya yapılandırma alanına yazarken olduğu gibi tek satırlık sonuca ihtiyaç duyduğunuzda her zaman -b 0 (macOS) veya --wrap=0 (Linux) ekleyin.

Yüksek Performanslı Alternatif: js-base64

Yerleşik API'ler çoğu kullanım durumu için yeterlidir. Bir kütüphaneye başvurmanın temel nedeni ortamlar arası tutarlılıktır: hem tarayıcıda hem de Node.js'te çalışan bir paket yayımlıyorsanız, Buffer kullanmak ortam tespiti veya paketleyici yapılandırması gerektirir; btoa()ise Unicode geçici çözümü gerektirir. js-base64 (haftalık 100M+ npm indirmesi) her ikisini şeffaf biçimde işler.

bash
npm install js-base64
# or
pnpm add js-base64
JavaScript
import { toBase64, fromBase64, toBase64Url, fromBase64Url, isValid } from 'js-base64'

// Standard encoding — Unicode-safe, works in browser and Node.js
const telemetryEvent = JSON.stringify({
  eventId:   'evt_7c3a9f1b2d',
  type:      'checkout_completed',
  currency:  'EUR',
  amount:    14900,
  userId:    'usr_4e2b8d6a5c',
  timestamp: 1717200000,
})

const encoded    = toBase64(telemetryEvent)
const urlEncoded = toBase64Url(telemetryEvent) // No +, /, or = characters

const decoded = fromBase64(encoded)
console.log(JSON.parse(decoded).type) // checkout_completed

// Binary data — pass a Uint8Array as second argument
const pngMagicBytes = new Uint8Array([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
const binaryEncoded = toBase64(pngMagicBytes, true) // true = binary mode

// Validation before decoding
const suspicious = 'not!valid@base64#'
console.log(isValid(suspicious)) // false

Arka planda js-base64, mevcut olduğunda yerel Buffer'ı kullanır ve tarayıcıda saf JS uygulamasına geri döner. Büyük Unicode dizeleri için TextEncoder+btoa yaklaşımından 2–3× daha hızlıdır ve simetrik API (toBase64 / fromBase64), btoa ile atob'un hangi yönde çalıştığını hatırlama zihinsel yükünü ortadan kaldırır.

Node.js Akışlarıyla Büyük İkili Dosyaları Kodlama

~50 MB'tan büyük dosyaları kodlamanız gerektiğinde, readFileSync()ile tüm dosyayı belleğe yüklemek sorun haline gelir. Node.js akışları verileri parçalar halinde işlemenize izin verir — ancak Base64 kodlamanın bir kısıtlaması vardır: parça sınırlarında yanlış dolguyu önlemek için kodlayıcıya 3'ün katı bayt vermelisiniz.

Node.js
import { createReadStream, createWriteStream } from 'node:fs'
import { pipeline } from 'node:stream/promises'

// Stream a large binary file to a Base64-encoded output file
async function streamEncodeToBase64(
  inputPath:  string,
  outputPath: string,
): Promise<void> {
  const readStream  = createReadStream(inputPath, { highWaterMark: 3 * 1024 * 256 }) // 768 KB chunks (multiple of 3)
  const writeStream = createWriteStream(outputPath, { encoding: 'utf8' })

  let buffer = Buffer.alloc(0)

  await pipeline(
    readStream,
    async function* (source) {
      for await (const chunk of source) {
        buffer = Buffer.concat([buffer, chunk as Buffer])

        // Encode in complete 3-byte groups to avoid mid-stream padding
        const remainder = buffer.length % 3
        const safe      = buffer.subarray(0, buffer.length - remainder)
        buffer          = buffer.subarray(buffer.length - remainder)

        if (safe.length > 0) yield safe.toString('base64')
      }
      // Flush remaining bytes (may add 1 or 2 '=' padding chars)
      if (buffer.length > 0) yield buffer.toString('base64')
    },
    writeStream,
  )
}

// Usage: encode a 200 MB video attachment
await streamEncodeToBase64(
  './uploads/product-demo.mp4',
  './dist/product-demo.b64',
)
console.log('Stream encoding complete')
Not:Çıktının ortasında gereksiz = dolgusu oluşmaması için parça boyutu 3 baytın katı olmalıdır. Örnekte 3 * 1024 * 256 = 786.432 bayt (768 KB) kullanılmaktadır — highWaterMark değerini bellek bütçenize göre ayarlayın. 50 MB altındaki dosyalar için readFile() + Buffer.toString('base64') daha basit ve yeterince hızlıdır.

Yaygın Hatalar

Base64 kodlama içeren pek çok JavaScript kod tabanını inceledim ve bu dört hata sürekli karşıma çıkıyor — genellikle ASCII dışı bir karakter veya ikili dosya üretim ortamındaki kodlama yoluna ulaşana kadar fark edilmeden kalıyor.

Hata 1 — Unicode'u doğrudan btoa()'ya geçirme

Sorun: btoa() yalnızca 0–255 aralığındaki kod noktalarına sahip karakterleri kabul eder. ñ, emoji veya CJK ideografları gibi karakterler anında DOMException fırlatır. Çözüm: önce TextEncoder ile kodlayın ya da Node.js'te Buffer.from(text, 'utf8').toString('base64') kullanın.

Before · JavaScript
After · JavaScript
// ❌ DOMException: The string to be encoded contains
//    characters outside of the Latin1 range
const username = 'Алексей Иванов'
const encoded  = btoa(username)  // throws
// ✅ Encode as UTF-8 bytes first
function safeEncode(text: string): string {
  const bytes = new TextEncoder().encode(text)
  const chars = Array.from(bytes, b => String.fromCharCode(b))
  return btoa(chars.join(''))
}
const encoded = safeEncode('Алексей Иванов')
// 0JDQu9C10LrRgdC10Lkg0JjQstCw0L3QvtCy

Hata 2 — atob() çağrısından önce dolguyu geri yüklemeyi unutma

Sorun: URL güvenli Base64, = dolgusunu kaldırır. Dolgusuz dizeyi doğrudan atob()'ya geçirmek, dize uzunluğuna bağlı olarak yanlış çıktı üretir veya istisna fırlatır. Çözüm: atob()'yu çağırmadan önce + ve /'yi geri yükleyin ve doğru miktarda dolguyu yeniden ekleyin.

Before · JavaScript
After · JavaScript
// ❌ atob() may return wrong data or throw
//    on URL-safe Base64 without padding
const jwtSegment = 'eyJ1c2VySWQiOiJ1c3JfOWYyYTFjM2UifQ'
const decoded    = atob(jwtSegment) // Unreliable
// ✅ Restore characters and padding first
function decodeBase64Url(input: string): string {
  const b64 = input.replace(/-/g, '+').replace(/_/g, '/')
  const pad = b64 + '==='.slice(0, (4 - b64.length % 4) % 4)
  return atob(pad)
}
const decoded = decodeBase64Url('eyJ1c2VySWQiOiJ1c3JfOWYyYTFjM2UifQ')
// {"userId":"usr_9f2a1c3e"}

Hata 3 — Ham arabellekler yerine kodlanmış parçaları birleştirme

Sorun: btoa() veya .toString('base64')'ya yapılan her çağrı kendi dolgusunu ekler. İki dolgulu Base64 dizesini birleştirmek geçersiz çıktı üretir; çünkü dolgu yalnızca en sona ait olmalıdır. Çözüm: kodlamadan önce ham verileri birleştirin.

Before · JavaScript
After · JavaScript
// ❌ Both parts are padded independently —
//    the combined string is not valid Base64
const part1 = Buffer.from('webhook-secret').toString('base64')
// d2ViaG9vay1zZWNyZXQ=  ← has padding
const part2 = Buffer.from('-v2').toString('base64')
// LXYy            ← correct in isolation
const combined = part1 + part2 // ❌ Invalid — padding in the middle
// ✅ Concatenate raw Buffers before encoding
const combined = Buffer.concat([
  Buffer.from('webhook-secret'),
  Buffer.from('-v2'),
]).toString('base64')
// d2ViaG9vay1zZWNyZXQtdjI= — single valid Base64 string

Hata 4 — Kodlamadan önce ikili API verilerini response.text() ile okuma

Sorun: response.text() ham baytları UTF-8 olarak yorumlar ve tanınmayan bayt dizilerini yedek karakter U+FFFD ile değiştirir. Görsel, PDF, ses gibi her türlü ikili içerik, btoa()'ya ulaşmadan sessizce bozulur. Çözüm: ham baytları almak için response.arrayBuffer()kullanın.

Before · JavaScript
After · JavaScript
// ❌ response.text() corrupts binary data
const res     = await fetch('/api/exports/invoice.pdf')
const text    = await res.text()   // ❌ PDF bytes mangled as UTF-8
const encoded = btoa(text)         // ❌ Corrupted Base64
// ✅ arrayBuffer() preserves raw bytes
const res     = await fetch('/api/exports/invoice.pdf')
const buffer  = await res.arrayBuffer()
const bytes   = new Uint8Array(buffer)
const chars   = Array.from(bytes, b => String.fromCharCode(b))
const encoded = btoa(chars.join('')) // ✅ Valid Base64

JavaScript Base64 Yöntemleri — Hızlı Karşılaştırma

YöntemUnicodeİkili veriURL güvenliOrtamlarKurulum gerektirir
btoa() / atob()❌ Latin-1❌ geçici çözüm gerekir❌ manuel değiştirmeBrowser, Node 16+, Bun, DenoHayır
TextEncoder + btoa()✅ UTF-8✅ Uint8Array ile❌ manuel değiştirmeBrowser, Node 16+, DenoHayır
Buffer.from().toString()✅ utf8✅ yerel✅ base64url (Node 18+)Node.js, BunHayır
Uint8Array.toBase64() (TC39)✅ ikili✅ yerel✅ alphabet seçeneğiChrome 130+, Node 22+Hayır
js-base64✅ her zaman✅ Uint8Array✅ yerleşikEvrenselnpm install

btoa()'yı yalnızca girdi kesinlikle ASCII ise tercih edin — onaltılık özetler, sayısal kimlikler veya önceden doğrulanmış Latin-1 dizeleri. Tarayıcıda kullanıcı tarafından sağlanan metin için TextEncoder + btoa() kullanın. Tüm Node.js sunucu tarafı kodu için Buffer doğru varsayılandır. Paketleyici yapılandırması olmadan her iki ortamda da çalışması gereken kütüphaneler için js-base64 tüm uç durumları ortadan kaldırır.

Sıkça Sorulan Sorular

btoa() neden dizem için "InvalidCharacterError" fırlatıyor?
btoa() yalnızca 0–255 aralığındaki kod noktalarına sahip (Latin-1 / ISO-8859-1) karakterleri kabul eder. U+00FF'in üzerindeki herhangi bir karakter — çoğu Kiril, Arapça, CJK ideografları ve birçok emoji dahil — DOMException'a neden olur. Düzeltme yöntemi ortama bağlıdır: tarayıcıda önce TextEncoder ile UTF-8 baytlarına kodlayın, String.fromCharCode() ile her baytı karaktere dönüştürün, ardından btoa()'yı çağırın. Node.js'te, Unicode'u yerel olarak işleyen Buffer.from(text, 'utf8').toString('base64') kullanın.
btoa() Node.js'te herhangi bir import olmadan kullanılabilir mi?
Evet, Node.js 16.0'dan itibaren. btoa() ve atob()'un ikisi de global fonksiyon olarak kayıtlıdır — import gerekmez. Latin-1 kısıtlaması dahil tarayıcı karşılıklarıyla aynı şekilde davranırlar. Node.js sunucu kodu için UTF-8'i yerel olarak işlediği, geçici çözüm olmadan ikili verileri desteklediği ve Node.js 18'de eklenen 'base64url' kodlama seçeneğine sahip olduğundan, btoa() yerine Buffer.from() hâlâ tercih edilir.
Standart Base64 ile URL güvenli Base64 arasındaki fark nedir?
Standart Base64 (RFC 4648 §4), değer 62 için +, değer 63 için / ve dolgu için = kullanır. Bu karakterlerin URL'lerde özel anlamı vardır: + sorgu dizelerinde boşluk olarak yorumlanır ve / yol ayırıcıdır. URL güvenli Base64 (RFC 4648 §5), +'yı -'ye, /'yi _'ye çevirir ve genellikle = dolgusunu tamamen atlar. JWT'ler her üç segment için URL güvenli Base64 kullanır. Node.js 18+'de Buffer.from(text).toString('base64url') doğrudan URL güvenli formatı üretir.
JavaScript'te CSS data URI için bir görseli Base64'e nasıl kodlarım?
Tarayıcıda: file.arrayBuffer() ile ikili veriyi okuyun, Uint8Array'e dönüştürün, ardından btoa(Array.from(bytes, b => String.fromCharCode(b)).join('')) çağırın. Data URI'yi 'data:' + file.type + ';base64,' + encoded olarak oluşturun. Node.js'te: const encoded = fs.readFileSync('./image.png').toString('base64') ve MIME türünü önüne ekleyin. SVG dosyaları için genellikle Base64'ü tamamen atlayıp URL kodlamalı data URI kullanabilirsiniz — daha okunabilir ve biraz daha küçüktür.
Tarayıcıda herhangi bir npm kütüphanesi olmadan Base64 kodlayıp çözebilir miyim?
Evet. Yalnızca ASCII girdi için btoa() ve atob() doğrudan çalışır. Unicode için TextEncoder / TextDecoder çifti tam araç setini sağlar — ikisi de tüm modern tarayıcılara ve Node.js 16+'ya yerleşik olarak dahildir. Kütüphanenin gerçekten değer kattığı tek durum ortamlar arası tutarlılıktır: paketleyici yapılandırması olmadan hem tarayıcıda hem de Node.js'te aynı şekilde çalışması gereken bir yardımcı yazıyorsanız, js-base64 ortam algılama mantığını ortadan kaldırır.
GitHub API'den dönen Base64 içeriğini nasıl çözerim?
GitHub Contents API, dosya içeriğini gömülü yeni satır karakterleri içeren Base64 olarak döndürür (API çıktıyı 60 karakterde sarmalar). Çözmeden önce yeni satırları kaldırın: const clean = data.content.replace(/\n/g, ''); const text = atob(clean);. Node.js'te: const text = Buffer.from(data.content.replace(/\n/g, ''), 'base64').toString('utf8');. GitHub her zaman standart Base64 kullanır (URL güvenli değil), dolayısıyla + → - veya / → _ değiştirmesi gerekmez.

İlgili Araçlar

Kod yazmadan tek tıkla kodlamak veya çözmek için dizinizi ya da ikili verilerinizi doğrudan Base64 Encoder'a yapıştırın — tarayıcıda standart ve URL güvenli modları anında işler.

Şu dillerde de mevcut:PythonJava
AC
Alex ChenFront-end & Node.js Developer

Alex is a front-end and Node.js developer with extensive experience building web applications and developer tooling. He is passionate about web standards, browser APIs, and the JavaScript ecosystem. In his spare time he contributes to open-source projects and writes about modern JavaScript patterns, performance optimisation, and everything related to the web platform.

SL
Sophie LaurentTeknik İnceleyici

Sophie is a full-stack developer focused on TypeScript across the entire stack — from React frontends to Express and Fastify backends. She has a particular interest in type-safe API design, runtime validation, and the patterns that make large JavaScript codebases stay manageable. She writes about TypeScript idioms, Node.js internals, and the ever-evolving JavaScript module ecosystem.