Javascript İle Tarayıcı Tabanlı Bir Şifreli Metin Şifreleme Aracı Nasıl Yapılır?

JavaScript ile Tarayıcı Tabanlı Bir Şifreli Metin Şifreleme Aracı Nasıl Yapılır?

Günümüzde verilerin istemci tarafında (tarayıcıda) güvenli bir şekilde işlenmesi, gizlilik odaklı uygulamalar için kritik bir öneme sahiptir. JavaScript ile tarayıcı tabanlı bir şifreli metin şifreleme aracı geliştirmek, sunucuya hiçbir hassas veri göndermeden verilerinizi korumanızı sağlar. Bu rehberde, modern Web Crypto API kullanarak tarayıcıda çalışan güvenli bir şifreleme aracı oluşturmayı adım adım öğreneceksiniz.

Bu makale, yazılım geliştirme süreçlerine yeni başlayanlar veya web güvenliği konusundaki bilgilerini pekiştirmek isteyen profesyoneller için hazırlanmıştır. Eğitim sonunda, AES-GCM (Advanced Encryption Standard - Galois/Counter Mode) algoritmasını kullanarak metinleri şifreleyen ve şifresini çözen tam fonksiyonel bir arayüze sahip olacaksınız.

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için herhangi bir sunucu tarafı diline veya karmaşık bir veritabanı kurulumuna ihtiyacınız yoktur. Modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve temel HTML/JavaScript bilgisi yeterlidir. Web Crypto API, tarayıcıların sunduğu yerel bir arayüzdür ve ekstra bir kütüphane kurulumu gerektirmez.

• Modern bir kod editörü (VS Code önerilir).
• HTTPS protokolü (Web Crypto API, güvenlik nedeniyle yerel `localhost` dışında sadece güvenli bağlantılarda çalışır).
• Temel JavaScript (ES6+ sözdizimi) bilgisi.

Adım 1: HTML Arayüzünün Oluşturulması

Şifreleme aracı için kullanıcıdan metin ve parola almamız, ardından sonuçları göstermemiz gerekir. Basit bir HTML yapısı ile temel bileşenleri hazırlayalım.

  
  
  Şifrele
  

Bu yapı, kullanıcının veri girişi yapabileceği alanları ve işlemleri tetikleyecek butonu içerir. password tipi, kullanıcının yazdığı karakterlerin gizli kalmasını sağlar.

Adım 2: Anahtar Türetme (Key Derivation)

Kullanıcının girdiği parolayı doğrudan şifreleme anahtarı olarak kullanmak güvensizdir. Bunun yerine, parolayı kriptografik bir anahtara dönüştüren PBKDF2 (Password-Based Key Derivation Function 2) yöntemini kullanmalıyız.

async function deriveKey(password, salt) {
  const enc = new TextEncoder();
  const keyMaterial = await crypto.subtle.importKey(
    "raw", enc.encode(password), "PBKDF2", false, ["deriveKey"]
  );
  return crypto.subtle.deriveKey(
    { name: "PBKDF2", salt: salt, iterations: 100000, hash: "SHA-256" },
    keyMaterial,
    { name: "AES-GCM", length: 256 },
    false,
    ["encrypt", "decrypt"]
  );
}

Bu fonksiyon, parolayı ve rastgele oluşturulmuş bir "salt" (tuz) değerini kullanarak 256-bit AES anahtarı türetir. 100.000 iterasyon, kaba kuvvet (brute-force) saldırılarına karşı koruma sağlar.

Adım 3: Metin Şifreleme İşlemi

Anahtarımız hazır olduğuna göre, artık veriyi şifreleyebiliriz. AES-GCM, hem şifreleme hem de veri bütünlüğü sağlayan güncel bir standarttır.

async function encryptText(text, password) {
  const salt = crypto.getRandomValues(new Uint8Array(16));
  const iv = crypto.getRandomValues(new Uint8Array(12));
  const key = await deriveKey(password, salt);
  
  const encoded = new TextEncoder().encode(text);
  const encrypted = await crypto.subtle.encrypt(
    { name: "AES-GCM", iv: iv }, key, encoded
  );
  return { encrypted, salt, iv };
}

Burada iv (Initialization Vector), her şifreleme işleminde benzersiz olmalıdır. salt ve iv değerleri, şifreli metinle birlikte saklanmalıdır ki şifre çözme aşamasında kullanılabilsin.

Adım 4: Şifre Çözme Mantığı

Şifrelenmiş veriyi geri okumak için aynı anahtarı ve aynı iv değerini kullanmamız gerekir. Şifre çözme süreci, şifreleme sürecinin tersidir.

async function decryptText(encryptedData, password, salt, iv) {
  const key = await deriveKey(password, salt);
  const decrypted = await crypto.subtle.decrypt(
    { name: "AES-GCM", iv: iv }, key, encryptedData
  );
  return new TextDecoder().decode(decrypted);
}

Bu fonksiyon, eğer parola yanlışsa veya veri bozulmuşsa hata fırlatacaktır. Bu durumu try-catch blokları ile yönetmek kullanıcı deneyimi açısından kritiktir.

Karşılaştırma: Şifreleme Yöntemleri

Adım 5: Güvenlik ve Hata Yönetimi

Tarayıcı tabanlı araçlarda en büyük risk, anahtarların bellekte (memory) uzun süre tutulmasıdır. İşlem bittikten sonra değişkenleri temizlemek veya sayfayı yenilemek iyi bir pratiktir.

Kritik Güvenlik Uyarısı: Tarayıcı tabanlı şifreleme, kullanıcının tarayıcısının güvenliğine bağlıdır. Kötü amaçlı tarayıcı eklentileri (extensions) veya XSS (Cross-Site Scripting) saldırıları, şifrelenmemiş metne erişebilir. Bu aracı sadece güvenilir ortamlarda kullanın.

Yaygın hatalardan biri, salt değerini sabit tutmaktır. Her şifreleme için crypto.getRandomValues() kullanarak benzersiz bir salt oluşturduğunuzdan emin olun.

Sıkça Sorulan Sorular

Web Crypto API tüm tarayıcılarda çalışır mı?

Evet, modern tüm tarayıcılar (Chrome, Firefox, Safari, Edge) Web Crypto API'yi desteklemektedir. Ancak, eski Internet Explorer sürümleri bu desteğe sahip değildir.

Şifremi unutursam veriyi kurtarabilir miyim?

Hayır, AES-GCM gibi güçlü şifreleme yöntemlerinde parola kurtarma mekanizması yoktur. Parolanızı unutursanız şifrelenmiş veriye erişim tamamen imkansız hale gelir.

Bu araç veritabanı gerektirir mi?

Hayır, bu tamamen istemci tarafında çalışan bir araçtır. İsterseniz şifrelenmiş veriyi localStorage içinde saklayabilirsiniz.

AES-256 ile AES-128 arasındaki fark nedir?

AES-256, daha büyük bir anahtar boyutu kullanır ve teorik olarak kaba kuvvet saldırılarına karşı çok daha dirençlidir. Güncel standartlarda AES-256 tercih edilmelidir.

Neden PBKDF2 kullanmalıyız?

PBKDF2, basit parolaları karmaşık anahtarlara dönüştürürken "yavaşlatma" işlemi yaparak saldırganların parolayı tahmin etmesini zorlaştırır.

Performans Optimizasyonu ve Büyük Veri Yönetimi

Web Crypto API, asenkron yapısı sayesinde ana iş parçacığını (main thread) bloklamadan kriptografik işlemler gerçekleştirebilir. Ancak, çok büyük metin dosyaları veya uzun süreli şifreleme işlemlerinde tarayıcının donmaması için bazı stratejiler izlenmelidir. Özellikle PBKDF2 ile anahtar türetme süreci, CPU üzerinde yoğun bir yük oluşturur.

Web Workers ile İş Parçacığı Yönetimi

Şifreleme işlemlerini ana arayüzden ayırmak, kullanıcı deneyimini iyileştirir. Web Workers kullanarak şifreleme mantığını arka planda çalıştırabilirsiniz. Aşağıda basit bir worker yapısı örneği yer almaktadır:

// encrypt-worker.js
self.onmessage = async (e) => {
    const { data, password } = e.data;
    // Burada Web Crypto API işlemleri gerçekleştirilir
    const encrypted = await performEncryption(data, password);
    self.postMessage(encrypted);
};

// Ana dosyadan çağrım:
const worker = new Worker('encrypt-worker.js');
worker.postMessage({ data: "Gizli Mesaj", password: "123" });
worker.onmessage = (e) => console.log("Şifreli veri:", e.data);

İleri Düzey Güvenlik: Veri Bütünlüğü ve Salt Kullanımı

Şifreleme aracınızın güvenliğini bir üst seviyeye taşımak için "Salt" (tuzlama) değerinin benzersiz olması kritik öneme sahiptir. Her şifreleme işleminde rastgele bir salt oluşturup bunu şifreli metinle birlikte saklamalısınız. Bu, aynı şifreyle farklı zamanlarda yapılan şifrelemelerin her seferinde farklı bir çıktı üretmesini sağlar (Rainbow Table saldırılarına karşı koruma).

Güvenli Veri Saklama İçin IndexedDB Entegrasyonu

Şifrelenmiş verileri tarayıcı kapandığında kaybolmayacak şekilde saklamak için IndexedDB kullanmak en profesyonel yaklaşımdır. İşte basit bir depolama fonksiyonu:

async function saveToDatabase(encryptedData) {
    const request = indexedDB.open("CryptoDB", 1);
    
    request.onupgradeneeded = (e) => {
        e.target.result.createObjectStore("notes", { keyPath: "id" });
    };

    request.onsuccess = (e) => {
        const db = e.target.result;
        const transaction = db.transaction(["notes"], "readwrite");
        transaction.objectStore("notes").add({ 
            id: Date.now(), 
            data: encryptedData 
        });
    };
}

Güvenlik Kontrol Listesi

• HTTPS Zorunluluğu: Web Crypto API, güvenli olmayan (HTTP) ortamlarda çalışmayabilir. Uygulamanızı mutlaka SSL sertifikalı bir sunucuda barındırın.
• Bellek Yönetimi: Şifreleme işlemi bittikten sonra, hassas verileri içeren değişkenleri null atayarak bellekten temizlenmelerini hızlandırın.
• CSP (Content Security Policy): Uygulamanızın güvenliğini artırmak için sunucunuzda katı bir CSP politikası uygulayın.

Sonuç

JavaScript kullanarak tarayıcı tabanlı bir şifreleme aracı geliştirmek, veri gizliliğini artırmak için oldukça etkili bir yöntemdir. Web Crypto API, tarayıcı içinde yerel ve güvenli kriptografik işlemler yapmanıza olanak tanır. Bu rehberde öğrendiğiniz AES-GCM ve PBKDF2 yöntemlerini kullanarak kendi özel şifreleme uygulamalarınızı inşa edebilirsiniz.

Sorumluluk Reddi: Bu araç eğitim amaçlıdır. Ticari veya kritik verilerin korunması için profesyonelce denetlenmiş şifreleme kütüphanelerini ve güvenlik protokollerini kullanmanız önerilir. Yazılım güvenliği sürekli güncellenen bir alan olduğundan, en güncel güvenlik standartlarını takip etmeyi unutmayın.

Bir sonraki adım olarak, şifrelenmiş verileri bir dosyaya kaydetme veya tarayıcıda IndexedDB kullanarak kalıcı bir şifreli not defteri oluşturma konusunu araştırmanızı öneririm.