İçeriğe geç
Toova
Tüm Araçlar

Base64 Kodlamayı Anlama — Tam Geliştirici Kılavuzu

Toova

Base64 kodlama web geliştirmenin neredeyse her alanında görünür — JWT belirteçleri, data URI'ler, e-posta ekleri, API yükleri, kriptografik imzalar ve yapılandırma dosyaları. Yaygın olmasına rağmen, sıkça yanlış anlaşılır: geliştiriciler bazen onu şifrelemeyle karıştırırlar veya işleri daha da kötüleştirdiği durumlarda kullanırlar. Bu kılavuz Base64'ün tam olarak nasıl çalıştığını, ne zaman başvurulacağını, ne zaman kaçınılacağını ve JavaScript'te nasıl doğru kullanılacağını açıklar.

Base64 Kodlama Nedir (ve Ne Değildir)

Base64 bir ikiliden metine kodlama şemasıdır. Tek işi rastgele ikili veriyi yazdırılabilir ASCII karakter dizgisine dönüştürmektir. Veriyi sıkıştırmaz, veriyi şifrelemez ve veriyi doğrulamaz. Tamamen bir temsil dönüşümüdür — null baytları, kontrol karakterleri veya metin tabanlı protokolleri bozacak değerler içerebilen baytları alır ve güvenli bir karakter setine dönüştürür.

Ad kodlama alfabesi olarak kullanılan 64 yazdırılabilir karakterden gelir: A–Z (26 karakter), a–z (26 karakter), 0–9 (10 karakter), artı + ve / (2 karakter). = karakteri dolgu için kullanılır. Karakter konumu başına 64 olası değer olduğu ve 2^6 = 64 olduğu için, her Base64 karakteri orijinal verinin tam olarak 6 bitini kodlar.

Base64 Nasıl Çalışır — Adım Adım "Hello"

Base64'ü anlamanın en iyi yolu somut bir örneği takip etmektir. Hello dizgisini kodlayalım.

Adım 1: Baytlara dönüştür

Hello'daki her karakter ASCII koduna eşlenir, ardından ikili olarak ifade edilir (bayt başına 8 bit): 

H  e  l  l  o
72 65 6C 6C 6F   (ASCII / onaltılık)
01001000 01100101 01101100 01101100 01101111   (ikili)

Adım 2: 6 bitlik parçalara grupla

Tüm bitleri birleştir: 0100100001100101011011000110110001101111 (40 bit). Base64 bir kerede 3 bayt (24 bit) işler ve bunları 4 Base64 karakterine (4 × 6 = 24 bit) eşler. 40 biti 6 bitlik parçalara grupla, son grubu doldurmak için sıfırlarla doldur: 

010010 000110 010101 101100 011011 000110 1111
18     6      21     44     27     6      (son grup 6 bite dolduruldu: 111100 = 60)

Adım 3: Base64 alfabesine eşle

Her 6 bitlik değer Base64 alfabesinde bir karaktere eşlenir (A=0, B=1, ... Z=25, a=26, ... z=51, 0=52, ... 9=61, +=62, /=63). 5 bayt 3'ün katı olmadığı için bir = dolgu karakteri eklenir: 

Indeks: 18  6   21  44  27  6   60
Karakter:  S   G   V   s   b   G   8
Sonuç: SGVsbG8=   (= dolgudur)

Sonuç

"Hello" → "SGVsbG8="

Bunu Toova Base64 kodlayıcı/çözücü ile anında doğrulayabilirsiniz — Hello'yu yapıştırın, Kodla'ya tıklayın ve SGVsbG8='ı alın. Tersine çevirmek için Çöz'e tıklayın.

%33 Boyut Yükü

Base64 kodlama her zaman veri boyutunu yaklaşık %33 artırır. Matematik basittir: 3 bayt girdi (24 bit) 4 Base64 karakteri (4 × 6 bitlik gruplarda kodlanmış 24 bit) üretir. Bu 4/3 oranıdır veya %33,3 yüktür. Dolgu karakterlerini ekleyin ve gerçek yük, girdi uzunluğuna bağlı olarak %33 ile %36 arasındadır.

Bu performans için önemli ölçüde önemlidir. HTML'de bir Base64 data URI olarak gömülmüş 1 MB'lık bir görsel yaklaşık 1,37 MB olur. Tüm ikili yükleri Base64'te kodlayan bir API, gereksinimden %33 daha fazla veri gönderir. Kısa belirteçler veya sağlama toplamları gibi küçük değerler için, yük ihmal edilebilirdir. Büyük dosyalar için, gerçek bir maliyettir.

URL Güvenli Varyant

Standart Base64, son iki alfabe karakteri olarak + ve / kullanır. Bunların her ikisi de URL'lerde sorunludur:

  • + sorgu dizgilerinde boşluk karakteri olarak çözülür
  • / URL'lerde bir yol ayırıcıdır

URL güvenli Base64 (Base64url olarak da adlandırılır, RFC 4648 Bölüm 5'te tanımlanır) + yerine - ve / yerine _ koyar. Dolgu (=) URL güvenli bağlamlarda genellikle atlanır çünkü bazı URL ayrıştırıcıları tarafından da yanlış yorumlanabilir.

JWT belirteçleri Base64url'yi dolgu olmadan kullanır. Bir JWT header'ını veya payload'unu manuel olarak çözdüğünüzde, hem karakter değişimini hem de eksik dolguyu ele almalısınız. JavaScript'te bunu nasıl yapacağınız: 

// URL güvenli Base64 (+ yerine - ve / yerine _ koyun)
function toBase64Url(base64) {
  return base64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
}

function fromBase64Url(base64url) {
  const padded = base64url.padEnd(
    base64url.length + (4 - base64url.length % 4) % 4,
    '='
  );
  return atob(padded.replace(/-/g, '+').replace(/_/g, '/'));
}

Toova Base64 kodlayıcı/çözücü, tek bir geçişle hem standart hem de URL güvenli varyantları destekler.

JavaScript'te Base64

Tarayıcı: btoa() ve atob()

Tarayıcılar iki yerleşik fonksiyon sağlar: btoa() (ikiliden ASCII'ye, yani kodla) ve atob() (ASCII'den ikiliye, yani çöz). Karışık ad sırasına rağmen, on yıldan fazla süredir tarayıcılarda mevcuttur. 

// Tarayıcı — atob / btoa (yalnızca dizgiler, ASCII güvenli)
const encoded = btoa("Hello");
console.log(encoded); // "SGVsbG8="

const decoded = atob("SGVsbG8=");
console.log(decoded); // "Hello"

Önemli sınırlama: btoa() yalnızca Latin-1 aralığındaki (kod noktaları 0–255) karakterlerle dizgileri kabul eder. Emoji veya CJK karakterleri gibi Unicode karakterli bir dizgi geçirirseniz, bir DOMException fırlatır. Rastgele ikili veriyi kodlamak için önce bir Uint8Array'e dönüştürün: 

// Tarayıcı — rastgele ikiliyi kodlama (Uint8Array)
const bytes = new Uint8Array([72, 101, 108, 108, 111]);
const encoded = btoa(String.fromCharCode(...bytes));
console.log(encoded); // "SGVsbG8="

Unicode karakterler içerebilecek rastgele dizgileri kodlamak için önerilen modern yaklaşım önce TextEncoder'ı kullanarak bir Uint8Array elde etmek, ardından yukarıda gösterildiği gibi kodlamaktır.

Node.js: Buffer

Node.js, ikili veriyi doğru ele alan ve Base64 ve Base64url dahil birden fazla kodlamayı destekleyen Buffer sınıfını sağlar: 

// Node.js — Buffer (ikiliyi güvenle ele alır)
const encoded = Buffer.from('Hello').toString('base64');
console.log(encoded); // "SGVsbG8="

const decoded = Buffer.from('SGVsbG8=', 'base64').toString('utf8');
console.log(decoded); // "Hello"

// Node.js'te URL güvenli varyant
const urlSafe = Buffer.from('Hello').toString('base64url');
console.log(urlSafe); // "SGVsbG8" (dolgu yok)

base64url kodlama seçeneği (Node.js 16'dan beri mevcut), karakter değişimini ve dolgu kaldırılmasını otomatik olarak ele alır, bu da dönüşümü manuel olarak yapmaktan çok daha kolay hale getirir.

Büyük ikili dosyaları işlemesi gereken tarayıcı ortamları için, FileReader.readAsDataURL yöntemi dosyayı her şeyi belleğe bir anda yüklemeden bir Base64 data URI olarak kodlar.

Base64 Ne Zaman Kullanılır

Yalnızca metin protokollerine ikili veri gömme

Base64 için orijinal kullanım senaryosu, yalnızca 7 bit ASCII metin destekleyen bir protokol olan SMTP'de ikili e-posta eklerini kodlamaktı. Aynı ilke, ham baytları işleyemeyen bir formatta ikili veri eklemek istediğiniz her yerde geçerlidir: JSON API yükleri, XML belgeleri, HTML öznitelikleri, CSS değerleri, HTTP başlıkları.

Küçük varlıklar için data URI'ler

CSS ve HTML, görselleri, yazı tiplerini ve SVG'leri Base64 data URI'ler olarak gömmenize izin verir. Bu, simgeler gibi küçük varlıklar için bir HTTP gidiş-dönüşünü ortadan kaldırır ve görünür alandaki kritik görseller için stilsiz içerik flaşını ortadan kaldırır. 

<!-- Base64 data URI olarak satır içi SVG simgesi -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c..." alt="simge" />

<!-- Satır içi CSS arka planı -->
.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
}

Ödün: Base64 data URI'ler, onları içeren HTML/CSS dosyasından ayrı olarak önbelleğe alınamaz. Görsel hiç değişmez ancak çevredeki HTML değişirse, tarayıcı her sayfa yeniden yüklemesinde görsel verisini yeniden indirir. Data URI'leri yalnızca küçük varlıklar için (ideal olarak 4 KB'ın altında) ve gidiş-dönüşün ortadan kaldırılmasının önbellek cezasından daha ağır bastığı yerlerde kullanın.

JSON veya URL parametreleri için ikili veri kodlama

JSON bir metin formatıdır — ham ikili baytları doğrudan temsil edemez. Bir API'nin ikili veriyi (görsel küçük resimler, kriptografik imzalar, sıkıştırılmış veri) iletmesi gerektiğinde, Base64 bunu bir JSON yüküne dahil etmenin standart yoludur. Benzer şekilde, ikili veriyi bir URL sorgu parametresinde geçirmeniz gerekiyorsa, Base64url kodlama verinin yüzde kodlamadan bozulmadan geçmesini sağlar.

JWT ve diğer belirteç formatları

JWT belirteçleri, header ve payload bölümlerini kodlamak için Base64url'yi kullanır. Bu, belirteci HTTP başlıklarında, çerezlerde veya URL parametrelerinde geçirilebilen yazdırılabilir, URL güvenli bir dizgi yapar. Kodlama güvenlik için değildir (payload, belirtece sahip herkes tarafından okunabilir) — tamamen güvenli iletim içindir.

Base64 NE ZAMAN Kullanılmaz

Güvenlik veya gizlilik

Base64 sıfır güvenlik sağlar. Milisaniyeler içinde önemsiz şekilde tersine çevrilebilir. Parolaları, API anahtarlarını veya hassas yapılandırma değerlerini "gizlemek" için kullanmayın. Bir Base64 dizgisi gören herhangi bir geliştirici onu hemen çözecektir. Gizliliğe ihtiyacınız varsa, şifreleme kullanın.

Parola depolama

Base64 kodlanmış parolaları depolamak, onları düz metin olarak depolamakla aynıdır — kodlama anında tersine çevrilebilir. Parolalar bcrypt, Argon2 veya scrypt gibi uygun bir parola karma fonksiyonu ile karma yapılmalıdır.

Büyük ikili dosyalar

10 MB'lık bir dosyayı Base64 olarak kodlamak 13,7 MB'lık bir dizgi üretir. Bunu bir veritabanı sütununda depolarsanız, içinde arama yaparsanız veya bir API üzerinden iletirseniz, %33 yükü her seferinde ödersiniz. Büyük ikili veri için, özel ikili depolama kullanın: veritabanı BLOB/BYTEA sütunları, S3 veya GCS gibi nesne depolama veya ikiliyi doğrudan akıtın.

İkiliyi doğrudan kullanabileceğiniz durumlar

Protokolünüz veya formatınız ham ikiliyi destekliyorsa — örneğin, ikili mesaj türlü bir WebSocket, bir multipart/form-data HTTP yüklemesi veya bir ikili dosya formatı — ikiliyi doğrudan kullanın. Base64 yalnızca iletim ortamı gerçekten ham baytları işleyemediğinde gereklidir.

Yaygın Tuzaklar

Kodlamayı şifrelemeyle karıştırma

Bu en yaygın hatadır. Base64 görünürdür. Bir güvenlik mekanizması değildir. "parola güvenlik için Base64 kodlu olarak saklanır" gibi kod yorumları, kod incelemesinde yakalanması gereken ciddi bir yanlış anlamayı belirtir.

btoa()'yı Unicode dizgilerle kullanma

Kod noktaları 255'in üzerindeki karakterler içeren bir dizgide btoa() çağırmak DOMException: Failed to execute 'btoa': The string to be encoded contains characters outside of the Latin1 range fırlatır. Unicode karakterler içerebilecek dizgileri kodlamadan önce her zaman TextEncoder aracılığıyla Uint8Array'e dönüştürün.

Çözerken dolguyu unutma

Base64 dizgilerinin uzunlukları 4'ün katı olmalıdır. Bir Base64 dizgisi dolgu olmadan üretildiyse (URL güvenli kodlamada yaygın), çözmeden önce doğru sayıda = karakteri eklemelisiniz. n uzunluğunda bir Base64 dizgisi (4 - n % 4) % 4 dolgu karakterine ihtiyaç duyar. Bunu unutmak, teşhis etmesi zor çözme hatalarına neden olur.

Çift kodlama

Bir Base64 dizgisinin kendisi geçerli ASCII'dir, bu yüzden btoa(btoa(data)) hatasız çalışır ancak çift kodlanmış çıktı üretir. Base64 değerlerini birden fazla seri hale getirme katmanından geçirirken (örneğin, JSON içinde JSON), aynı veriyi iki kez kodlamak kolaydır. Her zaman tam olarak kodladığınız sayıda çözün.

Hızlı Referans: Pratikte Base64

Kod yazmadan tarayıcıda kodlama ve çözme için, Toova Base64 kodlayıcı/çözücü tamamen tarayıcınızda çalışır — sunucu gidiş-dönüşü yok. Standart ve URL güvenli varyantları, ikili dosyaları kodlamak için dosya yüklemesini ve çözülen veri için hem metin hem de onaltılık çıktıyı destekler.

URL'lerin içinde kodlanmış içerikle çalışıyorsanız, URL kodlayıcı/çözücü yüzde kodlamayı Base64'ten ayrı olarak ele alır. HTML varlıkları için, HTML entities dönüştürücüsü HTML bağlamlarında karakter kaçırmayı ele alır. Bunlar farklı kodlama şemalarıdır — her birinin belirli bir kullanım senaryosu vardır.

Base64 için kanonik referans RFC 4648'dir; standart Base64'ü (Bölüm 4), Base64url'yi (Bölüm 5) ve Base32'yi (Bölüm 6–7) tanımlar. btoa() ve atob() tarayıcı API'leri için, btoa() için MDN belgeleri tarayıcı uyumluluğunu ve Unicode sınırlamasını ayrıntılı olarak kapsar.

Özet

Base64 kodlama, 64 karakterli bir alfabe kullanarak ikili veriyi yazdırılabilir ASCII'ye dönüştürür. Veri boyutunu %33 artırır, tamamen tersine çevrilebilir ve hiçbir güvenlik sağlamaz. İkili veriyi metin tabanlı bir formata gömmeniz gerektiğinde kullanın — JSON yükleri, HTML data URI'ler, JWT belirteçleri, e-posta ekleri, URL parametreleri. Güvenliğe ihtiyacınız olduğunda, iletim ikiliyi doğrudan desteklediğinde veya %33 yükü ölçekte önemli olduğunda kaçının.

Base64'ün ne olduğunu — ve ne olmadığını — anlamak en yaygın hataları önler: güvenlik için kullanma, büyük dosyalara gereksiz yere uygulama ve URL kodlama veya HTML varlıkları gibi diğer kodlama şemalarıyla karıştırma. Her kodlama şeması belirli bir sorunu çözer. Base64 tam olarak birini çözer: ikili veriyi yalnızca metin kanalları için güvenli hale getirme.

Kodlamaya veya çözmeye hazır mısınız? Toova Base64 kodlayıcı/çözücü'yü deneyin — metin yapıştırın veya bir dosya bırakın, standart veya URL güvenli'i değiştirin ve sonucu kopyalayın. Hesap yok, sunucu yok, sınır yok.