Tarayıcı Su Baskısı ile Ekran Görüntüleri Nasıl Tanımlanır ve Kimin Sızdırdığını Bulun

Bir çalışan iç hesap tablosunun ekran görüntüsünü tedarikçisine gönderdiğinde, kimsenin kimin sızdırdığını kanıtlayamadığı bir senaryoyu düşünün. Bu durumda tarayıcı su baskısı devreye giriyor: her ekranın arka planına kullanıcının e-posta adresini ya da kimliğini ince bir şekilde yerleştirmek, olası bir sızdırma durumunda sorumluyu beş saniyede belirlemenizi sağlıyor.

Ancak basit bir HTML katmanıyla yapılan su baskısı, kullanıcılar F12 tuşuna basıp DevTools’la müdahale ettiğinde ya da CSS stillerini geçersiz kıldığında etkisini yitiriyor. Gerçekten de su baskısının temel amacı, dürüst kullanıcıları caydırmak değil, kasıtlı sızdırmaları tespit edebilmek. Bu nedenle, tarayıcı su baskısının ötesine geçerek sürekli kendini yenileyen, DevTools’a müdahale edenleri engelleyen ve her girişimi sunucuya kaydeden bir sistem gerekiyor.

Basit Su Baskısının Sınırları

En yaygın su baskısı yöntemi, sayfanın üzerine yerleştirilen bir HTML katmanıdır:

<div class="watermark">kullanici@sirket.com</div>

Bu yaklaşımın en büyük handikapı, kullanıcıların DevTools’a erişip su baskısını birkaç tıklamayla kaldırabilmesi ya da CSS özelliklerini değiştirerek görünmez hale getirebilmesidir. Dahası, su baskısı sayfa yüklenmeden önce ekran görüntüsü alınırsa hiçbir işe yaramaz. Kısacası, basit su baskıları yalnızca masum kullanıcıları caydırmakta etkili olur; kasıtlı sızdırmalara karşı ise neredeyse hiçbir koruma sağlamaz.

İdeal Su Baskı Kütüphanesinden Beklenenler

Etkili bir su baskı sistemi aşağıdaki özellikleri karşılamalıdır:

• Kullanıcı kimliğini (e-posta, kullanıcı kimliği vb.) sayfanın tümüne yayılmış şekilde yerleştirmek
• DOM’dan kaldırıldığında otomatik olarak yeniden oluşturmak
• CSS müdahalelerine karşı dirençli olmak
• DevTools açan kullanıcıları ilgili sayfaya yönlendirmek
• Sunucuya her girişimi kaydetmek; hatta tüm istemci tarafı savunmaları atlatsa bile loglamak

Son madde, çoğu ekibin gözden kaçırdığı ancak en kritik olanıdır. Sunucu tarafı kayıtları, en gelişmiş saldırganların bile aşamayacağı bir kanıt oluşturur.

Geliştirilen Çözüm: watermark-shield

watermark-shield, watermark-js-plus kütüphanesi üzerine inşa edilmiş, kullanıcı kimliklerini sayfanın tümüne yayılmış şekilde yerleştiren ve sürekli kendini yenileyen bir kütüphanedir. Temel özelliklerinin yanı sıra şunları da içerir:

• DOM değişikliklerini izleyen ve su baskısını otomatik olarak yeniden oluşturan MutationObserver
• CSS enjeksiyon girişimlerini tespit eden katman
• DevTools açıldığında kullanıcıyı engelleyen ve sunucuya bildirim gönderen koruma katmanı
• Her saldırı girişimini sunucuya loglayan denetim sistemi

Bu kütüphane, 6 KB sıkıştırılmış boyutuyla çalışır ve DevTools koruması etkinleştirilirse ek olarak 6 KB daha yüklenir. JavaScript tabanlı çekirdeğinin yanı sıra, Angular, React ve Vue 3 için özel bağlayıcılar sunar.

İki Satırlık Kurulum

npm install watermark-shield

import { WatermarkShield } from 'watermark-shield';

new WatermarkShield({
  content: user.id,
  protect: {
    devtool: true,
  },
}).create();

Bu basit kurulumla kullanıcının kimliğinin ekrana yerleştirilmesini, DevTools korumasını ve arka planda çalışan pasif korumaları etkinleştirmiş olursunuz.

Gerçekçi Üretim Senaryosu

new WatermarkShield({
  content: user.id,
  fontSize: '1.5vw',                  // Ekran boyutuna göre ölçeklendirme
  fontColor: { light: '#000', dark: '#fff' }, // Açık/koyu tema destekli renk
  globalAlpha: 0.18,                   // JPEG sıkıştırmasına dayanıklı saydamlık
  protect: {
    devtool: true,
    devtoolUrl: '
    onDevtoolOpen: (detectorType) => {
      // Kullanıcı yönlendirilmeden önce sunucuya bildirim gönder
      navigator.sendBeacon(
        '/api/audit/devtool',
        new Blob(
          [
            JSON.stringify({
              detectorType,
              url: location.href,
              ts: Date.now(),
            }),
          ],
          { type: 'application/json' }
        )
      );
    },
  },
}).create();

Bu yapılandırmada dikkat edilmesi gereken üç önemli nokta vardır:

Kimlik sunucuya ait olmalıdır. Denetim logunda userId bulunmaz; sunucu kullanıcının kimliğini oturum çerezi ya da JWT token’ından alır. Kullanıcı kimliğinin istemciden alınması, saldırganın logları sahteleyebilmesine yol açar.

Denetim logu asıl koruma aracıdır. En kararlı saldırganlar bile istemci tarafı savunmaları aşabilir (özel Chromium derlemesi, su baskısını kaldıran eklentiler vb.). Ancak beacon zaten saldırganın tarayıcısından sunucuya gönderildiği için, sunucu logu saldırının kaynağını tespit etmeyi sağlar.

Geliştirme ortamında `devtool: false` kullanın. Aksi takdirde geliştiricilerin kendi uygulamalarını debug etmeleri engellenir. Bu koruma, import.meta.env.PROD ya da environment.production gibi koşullarla devreye alınabilir.

Çerçeve Bağlayıcıları

// Angular
import { WatermarkShieldService } from 'watermark-shield/angular';

this.shield.create({
  content: user.id,
  protect: { devtool: true }
});

// React
import { useWatermarkShield } from 'watermark-shield/react';

useWatermarkShield({
  content: user.id,
  protect: { devtool: true }
});

// Vue 3
import { useWatermarkShield } from 'watermark-shield/vue';

useWatermarkShield({
  content: user.value.id,
  protect: { devtool: true }
});

Tüm çerçevelerde aynı yaşam döngüsü fonksiyonları (create, update, destroy) kullanılır. Bu sayede su baskısı sistemi projenize kolayca entegre edilebilir.

Sonuç: Su Baskısı Sızdırmaları Önlemez, Ama Tanımlar

Su baskısı sisteminin amacı, ekran görüntülerinin sızdırılmasını engellemek değil, hangi kullanıcının sorumlu olduğunu tespit etmek olmalıdır. Bu durum, potansiyel saldırganların "kimse beni yakalayamaz" düşüncesinden "kesinlikle yakalanırım" mantığına geçmelerini sağlar. Böylece, kurumsal verilerinizin güvenliği sadece teknik bir önlem değil, aynı zamanda caydırıcı bir faktör haline gelir.