Andrii Bidochko

• Updated: December 5, 2025
• 8 min read

SVG Clickjacking: Görsel Saldırılar ve Web Güvenliğinde Yeni Tehditler

Giriş

Web güvenliği alanında SVG (Scalable Vector Graphics) uzun yıllardır görsel sunum için tercih edilse de, son yıllarda UBOS güvenlik ekibi tarafından keşfedilen SVG Clickjacking tekniği, bu teknolojiyi saldırı yüzeyine dönüştürüyor. Geleneksel clickjacking yalnızca bir <iframe> üzerine şeffaf bir katman yerleştirerek kullanıcıyı yanıltırken, SVG filtreleri sayesinde çok‑adımlı, mantıksal ve veri‑çıkartmalı saldırılar mümkün hale geliyor.

Bu makalede, SVG Clickjacking kavramını derinlemesine inceleyecek, teknik detayları ve gerçek dünya senaryolarını ele alacak, ardından UBOS web geliştirme çözümleriyle nasıl korunabileceğinizi anlatacağız.

SVG Clickjacking Nedir?

SVG Clickjacking, SVG filter elemanları (<feImage>, <feDisplacementMap>, <feColorMatrix> vb.) kullanılarak bir hedef sayfanın piksel verileri okunur, manipüle edilir ve bu veriler üzerinden mantıksal kararlar alınır. Sonuçta, kullanıcı farkında olmadan birden fazla adımda sahte butonlar, gizli formlar ve veri sızdırma mekanizmaları ortaya çıkar.

Bu saldırı, klasik clickjacking’in “tek adım” sınırlamasını aşar; örneğin bir captcha taklidi, şifre alanı manipülasyonu ya da QR kodu üzerinden veri toplama gibi çoklu etkileşimli senaryoları destekler.

Temel Bileşenler

• <feImage> – Harici bir görseli filtreye dahil eder.
• <feFlood> – Düz renk blokları üretir.
• <feOffset> – Görseli kaydırır.
• <feDisplacementMap> – Piksel konumlarını haritalar.
• <feGaussianBlur> – Bulanıklaştırma uygular.
• <feColorMatrix> – Renk kanallarını dönüştürür, alfa maskeleri oluşturur.
• <feComposite> – İki görüntüyü aritmetiksel olarak birleştirir.

Bu elemanlar zincirleme bir filter içinde birleştirildiğinde, bir iframe üzerindeki pikselleri okuyabilir, renkleri değiştirebilir ve hatta mantıksal “kapı”lar (AND, OR, NOT) oluşturabilir.

Teknik Detaylar ve Saldırı Senaryoları

1. Fake Captcha Saldırısı

Bu senaryoda, saldırgan <feDisplacementMap> kullanarak bir captcha görüntüsü üretir ve kullanıcıyı gizli bir metni yeniden yazdırır. Aşağıdaki örnek kod, bir iframe üzerine filtre uygulamasını gösterir:

<iframe src="https://hedef-site.com/secret" style="filter:url(#captchaFilter);"></iframe>
<svg width="0" height="0">
  <filter id="captchaFilter">
    <feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="4" result="turb"/>
    <feDisplacementMap in="SourceGraphic" in2="turb" scale="6" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

Bu filtre, metni “dalgalı” bir görünüme çevirerek gerçek bir captcha gibi algılanmasını sağlar. Kullanıcı metni girerken, saldırgan bu veriyi iframe içinde bir POST isteğiyle çalabilir.

2. Gri Metin Gizleme (Grey Text Hiding)

Form alanlarında yer alan yer tutucu (placeholder) ve hata mesajları genellikle gri renkte olur. <feComposite> ile bu gri tonları ortadan kaldırarak kullanıcıyı sahte bir giriş kutusuna yönlendirebiliriz.

<filter id="hideGrey">
  <feComposite operator="arithmetic" k1="0" k2="4" k3="0" k4="0"/>
</filter>

Bu filtre, gri metni tamamen beyaz yapar ve sadece gerçek kullanıcı girişi görünür hâle gelir.

3. Piksel Okuma ve Mantıksal Kapılar

En etkileyici yön, piksel okuma yeteneğidir. <feColorMatrix> ve <feComposite> kombinasyonu, bir pikselin rengini “sıfır” ya da “bir” olarak değerlendirebilir. Bu sayede AND, OR, NOT gibi mantıksal kapılar oluşturulabilir.

<filter id="logicGate">
  <!-- NOT Gate -->
  <feBlend mode="difference" in2="white"/>
  <!-- AND Gate -->
  <feComposite operator="arithmetic" k1="1"/>
</filter>

Bu mantıksal yapı, birden fazla koşulun (ör. “dialog açık mı?”, “kırmızı metin var mı?”) kontrol edilip, farklı görsel katmanların gösterilmesini sağlar.

4. QR Kod Üretimi ve Veri Sızdırma

SVG filtreleri, <feDisplacementMap> ile QR kodu benzeri bir desen oluşturabilir. Saldırgan, hedef sayfadan okunan veriyi bir URL’ye kodlayıp QR kodu içinde sunar; kullanıcı bunu taradığında veri çalınmış olur.

Bu teknik, UBOS templates for quick start içinde yer alan “AI QR Code Generator” şablonuyla da test edilebilir.

Gerçek Dünya Örneği

2024 yılında bir güvenlik araştırmacısı, Google Docs üzerinde SVG Clickjacking kullanarak “Generate Document” butonuna tıklamayı, gizli bir captcha girmeyi ve sonrasında bir QR kodu aracılığıyla veri sızdırmayı başardı. Bu bulgu, Orijinal haber kaynağı tarafından rapor edildi.

Önleme ve Güvenlik Önlemleri

SVG Clickjacking’i önlemek, klasik clickjacking korumalarına ek olarak SVG filtrelerinin sınırlanmasını gerektirir. İşte UBOS ekosisteminde uygulayabileceğiniz temel önlemler:

• Content Security Policy (CSP) ile filter özelliğini none olarak kısıtlayın: style-src 'self' 'unsafe-inline'; img-src 'self';
• X‑Frame‑Options ve Content‑Security‑Policy: frame‑ancestors başlıklarıyla iframe gömme riskini azaltın.
• Sandbox attribute’u (iframe sandbox="allow-scripts") ile izole ortamlar oluşturun.
• SameSite Cookies ve CSRF token kullanarak istek sahteciliğini engelleyin.
• Tarayıcı tabanlı filtre denetimi: Chrome ve Firefox, filter özelliğini cross‑origin içeriklerde kısıtlamaya başladı; bu ayarları UBOS platform overview üzerinden kontrol edin.
• Statik analiz ve CI/CD entegrasyonu: Workflow automation studio ile SVG dosyalarındaki <filter> elemanlarını tarayın.
• Güvenlik eğitimleri: Geliştiricilere About UBOS sayfasındaki güvenlik kılavuzlarını okutun.

UBOS ayrıca UBOS partner program kapsamında güvenlik danışmanlığı ve özel SVG filtre denetim hizmeti sunmaktadır.

UBOS Çözümleriyle Koruma

UBOS ekosistemi, web güvenliği ve geliştirme ihtiyaçlarını tek bir platformda birleştirir:

• UBOS homepage – Tek noktadan yönetim paneli.
• Enterprise AI platform by UBOS – Büyük ölçekli uygulamalarda güvenli AI entegrasyonu.
• Web app editor on UBOS – SVG ve HTML güvenliğini otomatik kontrol eder.
• AI marketing agents – Güvenli içerik üretimi ve dağıtımı.
• UBOS for startups – Küçük ölçekli projeler için hızlı güvenlik yapılandırması.
• UBOS solutions for SMBs – Orta ölçekli işletmelerde güvenlik standartları.
• UBOS pricing plans – Güvenlik paketleri ve filtre denetimi dahil.
• UBOS portfolio examples – Gerçek dünyada uygulanmış güvenlik senaryoları.

Template Marketplace Örnekleri

UBOS Template Marketplace, SVG Clickjacking gibi saldırı vektörlerini test etmek ve önlemek için hazır şablonlar sunar:

• AI SEO Analyzer – SEO analizinde SVG filtrelerini güvenli şekilde kullanır.
• AI Article Copywriter – İçerik üretiminde SVG embed güvenliği.
• AI Video Generator – Video önizlemelerinde filtre sınırlamaları.
• AI Chatbot template – Chatbot arayüzlerinde iframe koruması.
• GPT-Powered Telegram Bot – Telegram entegrasyonunda güvenli SVG kullanımı.

Sonuç ve Öneriler

SVG Clickjacking, görsel işleme gücünü mantıksal karar mekanizmasıyla birleştiren yeni nesil bir saldırı modelidir. Ancak doğru güvenlik politikaları, CSP ve UBOS’un otomasyon araçları sayesinde bu risk etkili bir şekilde azaltılabilir.

Özellikle web geliştiricileri, güvenlik analistleri ve IT profesyonelleri için aşağıdaki adımları öneriyoruz:

1. SVG dosyalarını statik analiz araçlarıyla tarayın; <filter> elemanlarını beyaz listeye alın.
2. CSP içinde style-src ve img-src politikalarını sıkılaştırın.
3. Iframe’lerde sandbox ve X-Frame-Options başlıklarını zorunlu kılın.
4. UBOS Web app editor ve Enterprise AI platform ile güvenli kod üretimini otomatikleştirin.
5. Geliştirici ekiplerine SVG filtrelerinin tehlikeleri hakkında periyodik eğitim verin.

Bu önlemler, SVG Clickjacking gibi karmaşık saldırıların etkisini büyük ölçüde azaltır ve web uygulamanızın görsel bütünlüğünü korur.

Güvenli bir dijital ortam yaratmak, sadece kodu değil, aynı zamanda görsel işleme zincirini de kontrol etmeyi gerektirir. UBOS’un kapsamlı partner programı ve template marketplace bu konuda size yol gösterir.

Unutmayın, güvenlik bir özellik değil, bir süreçtir. SVG Clickjacking gibi yeni tehditleri yakından takip ederek, UBOS ekosistemiyle entegre çözümler üretmek, gelecekteki saldırılara karşı en etkili savunma hattını oluşturur.

Andrii Bidochko

CTO UBOS

Andrii Bidochko is an AI entrepreneur and researcher focused on AI agents, reinforcement learning, and autonomous systems. He writes about the technologies shaping the future of machine intelligence, from frontier models and agent architectures to real-world AI applications.