Javascript İle Tarayıcı Tabanlı Bir Şifre Güçlülüğü Denetleyicisi Nasıl Yapılır?

Ön Hazırlık ve Gereksinimler

Bu projeyi hayata geçirmek için ekstra bir kütüphaneye veya sunucu tarafı yazılımına ihtiyacınız yoktur. Modern bir web tarayıcısı ve bir kod editörü (VS Code gibi) yeterlidir. Çalışmalarımızı saf JavaScript (Vanilla JS) kullanarak gerçekleştireceğiz.

• Modern bir tarayıcı (Chrome, Firefox veya Edge).
• Temel HTML5 ve CSS bilgisi.
• JavaScript'te DOM (Document Object Model) manipülasyonu hakkında temel düzeyde bilgi.

Temel HTML Yapısının Oluşturulması

İlk adım olarak, kullanıcının şifresini gireceği bir giriş alanı ve güçlülük durumunu gösterecek bir görsel geri bildirim alanı oluşturmalıyız. HTML yapısı, JavaScript ile erişebileceğimiz anlamlı ID'lere sahip olmalıdır.

Burada passwordInput, kullanıcının veri girişi yaptığı alan; strengthMeter ise şifre gücünü görselleştireceğimiz çubuktur.

Düzenli İfadeler (Regex) ile Kriterleri Belirleme

Şifre denetleyicisinin temel mantığı, girilen metnin belirli kurallara uyup uymadığını kontrol etmektir. Bunun için JavaScript'in güçlü Regular Expression (Düzenli İfade) yeteneklerini kullanacağız.

const criteria = {
  length: (val) => val.length >= 8,
  hasUpper: (val) => /[A-Z]/.test(val),
  hasLower: (val) => /[a-z]/.test(val),
  hasNumber: (val) => /[0-9]/.test(val),
  hasSpecial: (val) => /[^A-Za-z0-9]/.test(val)
};

Bu nesne yapısı, her bir kriter için bir fonksiyon barındırır. .test() metodu, şifre içerisinde ilgili karakterin olup olmadığını boolean (doğru/yanlış) olarak döndürür.

Şifre Gücünü Hesaplama Fonksiyonu

Şimdi bu kriterleri birleştirerek toplam bir puanlama sistemi oluşturalım. Bu fonksiyon, her kriter için bir puan ekleyerek şifrenin genel güvenliğini belirler.

function calculateStrength(password) {
  let score = 0;
  if (criteria.length(password)) score++;
  if (criteria.hasUpper(password)) score++;
  if (criteria.hasLower(password)) score++;
  if (criteria.hasNumber(password)) score++;
  if (criteria.hasSpecial(password)) score++;
  return score;
}

Bu fonksiyon, şifre ne kadar çok kriteri karşılarsa o kadar yüksek puan (0-5 arası) üretir. Bu puanı daha sonra görselleştirmede kullanacağız.

Görsel Geri Bildirim ve DOM Manipülasyonu

Kullanıcı şifresini yazarken, input olayını (event) dinleyerek anlık güncellemeler yapmalıyız. Aşağıdaki kod bloğu, kullanıcının her tuş vuruşunda gücü hesaplar ve arayüzü günceller.

const passwordInput = document.getElementById('passwordInput');
passwordInput.addEventListener('input', () => {
  const val = passwordInput.value;
  const score = calculateStrength(val);
  updateUI(score);
});

function updateUI(score) {
  const meter = document.getElementById('strengthMeter');
  const colors = ['#ff4d4d', '#ffa500', '#ffd700', '#9acd32', '#008000'];
  meter.style.width = (score * 20) + '%';
  meter.style.backgroundColor = colors[score - 1] || '#ccc';
}

Bu kod, puanı yüzdelik dilime dönüştürür ve şifre çubuğunun genişliği ile rengini dinamik olarak değiştirir.

Şifre Güçlülüğü Denetleme Yöntemleri Karşılaştırması

Güvenlik Uyarısı: İstemci tarafında yapılan bu denetimler sadece kullanıcı deneyimini iyileştirmek içindir. Asla sunucu tarafındaki (Node.js, PHP, Python vb.) güvenlik kontrollerinin yerini tutmaz. Şifrelerinizi veritabanına kaydederken mutlaka bcrypt veya argon2 gibi güçlü hashleme algoritmaları kullanın.

Sıkça Sorulan Sorular

Şifre gücünü kontrol etmek neden önemlidir?

Kullanıcıları daha güçlü şifreler seçmeye teşvik etmek, kaba kuvvet (brute-force) saldırılarına karşı ilk savunma hattını oluşturur.

Bu yöntemi üretim ortamında kullanabilir miyim?

Evet, ancak bu sadece bir rehberdir. Üretim ortamında daha gelişmiş ve test edilmiş kütüphaneler (örneğin Dropbox'ın zxcvbn kütüphanesi) kullanmanız önerilir.

Regex kullanmak güvenli midir?

Regex, şifrenin içeriğini doğrulamak için güvenli bir yöntemdir. Ancak şifreleri asla açık metin olarak saklamayın veya konsola yazdırmayın.

Şifre çubuğu neden boş görünüyor?

Eğer şifre uzunluğu 0 ise score değeri 0 döner. CSS tarafında width: 0% ayarlandığından çubuk görünmez, bu beklenen bir davranıştır.

Daha fazla kriter ekleyebilir miyim?

Elbette, criteria nesnesine yeni fonksiyonlar ekleyerek şifre geçmişi kontrolü veya yasaklı kelime listesi gibi özellikler geliştirebilirsiniz.

Gelişmiş Güvenlik İçin Zxcvbn Kütüphanesi Entegrasyonu

Kendi yazdığınız regex kuralları temel bir güvenlik katmanı sağlasa da, profesyonel projelerde şifrelerin tahmin edilebilirliğini ölçmek için Dropbox tarafından geliştirilen zxcvbn kütüphanesi endüstri standardıdır. Bu kütüphane, şifreleri sadece karakter uzunluğuna göre değil, yaygın kullanılan sözlük kelimeleri, isimler ve klavye desenleri gibi karmaşık analizlere göre puanlar.

Projeye dahil etmek için CDN üzerinden script dosyasını ekleyebilir ve aşağıdaki gibi bir yapı kurabilirsiniz:

// zxcvbn kütüphanesini projeye dahil ettikten sonra kullanım:
const passwordInput = document.getElementById('password');
const strengthMeter = document.getElementById('strength-meter');

passwordInput.addEventListener('input', () => {
    const val = passwordInput.value;
    const result = zxcvbn(val);
    
    // result.score 0 ile 4 arasında bir değer döner
    const strengthLabels = ['Çok Zayıf', 'Zayıf', 'Orta', 'Güçlü', 'Çok Güçlü'];
    strengthMeter.innerText = strengthLabels[result.score];
    
    // Öneri metinlerini gösterme
    console.log(result.feedback.suggestions);
});

Performans Optimizasyonu ve Debounce Kullanımı

Kullanıcı her tuşa bastığında (keyup veya input olayı) karmaşık regex kontrolleri veya kütüphane analizleri çalıştırmak, özellikle düşük donanımlı mobil cihazlarda performans sorunlarına yol açabilir. Bu durumu engellemek için Debounce (gecikmeli çalıştırma) tekniğini kullanmalısınız.

Debounce, kullanıcının yazmayı bırakmasından sonra belirli bir milisaniye (örneğin 300ms) bekleyerek fonksiyonu tetikler. Bu, işlemci yükünü ciddi oranda azaltır.

function debounce(func, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

const checkPasswordStrength = debounce((e) => {
    // Şifre kontrol mantığınız burada çalışacak
    console.log("Kontrol ediliyor: ", e.target.value);
}, 300);

passwordInput.addEventListener('input', checkPasswordStrength);

Hata Ayıklama ve Test Senaryoları

Geliştirdiğiniz aracın doğruluğundan emin olmak için farklı senaryoları kapsayan bir test listesi oluşturmanız önemlidir. Aşağıdaki tablo, denetleyicinizin nasıl tepki vermesi gerektiğini belirleyen temel kriterleri özetler:

İpucu: Test aşamasında tarayıcı konsolunu (F12) kullanarak console.log() çıktılarını takip edin. Eğer şifre gücü beklenenden düşük çıkıyorsa, regex ifadelerinizdeki ^ (başlangıç) ve $ (bitiş) çapalarını (anchors) kontrol edin.

Sonuç

Bu makalede, JavaScript kullanarak adım adım bir şifre güçlülüğü denetleyicisi oluşturmayı öğrendiniz. Regex kullanımı, DOM manipülasyonu ve olay dinleyicileri (event listeners) ile kullanıcı etkileşimli bir araç geliştirmiş oldunuz. Bir sonraki adım olarak, bu projeyi geliştirerek şifre görünürlüğünü açıp kapatan bir "göz ikonu" ekleyebilir veya zxcvbn kütüphanesini projenize entegre ederek çok daha profesyonel bir güvenlik analizi yapabilirsiniz. Başarılar dileriz.

Kod güvenliği notu: Bu kod örneği eğitim amaçlıdır. Uygulamanızda kullanmadan önce güvenlik açıklarını (XSS, Injection vb.) göz önünde bulundurarak gerekli doğrulama işlemlerini sunucu tarafında mutlaka tekrarlayın.