Görsel Optimizasyonu: Yüklemeden Sunuma Kadar Doğru Hat

Ortalama bir web sayfasının ağırlığının yarısından fazlası görsellerden gelir. Aynı zamanda görsel yükleme, en sık gözden kaçan güvenlik yüzeylerinden biridir.

Yükleme: uzantıya asla güvenmeyin

Bir dosyanın .jpg uzantısı taşıması içeriğinin görsel olduğunu göstermez. Aynı şekilde tarayıcının bildirdiği MIME türü de istemci tarafından belirlenir ve değiştirilebilir.

Tek güvenilir yöntem, dosyanın ilk baytlarına (magic bytes) bakmaktır:

// JPEG: FF D8 FF
// PNG:  89 50 4E 47 0D 0A 1A 0A
// WebP: "RIFF" .... "WEBP"

Bildirilen tür ile tespit edilen tür uyuşmuyorsa yükleme reddedilmelidir. Bu, polyglot dosya saldırılarının büyük kısmını kapatır.

Yeniden kodlama: gelen dosyayı olduğu gibi kaydetmeyin

En etkili güvenlik önlemi, yüklenen dosyayı diske hiç yazmadan yeniden kodlamaktır. Görsel bir işleme kütüphanesinden geçirildiğinde:

• Gömülü betik veya metadata içindeki yük tamamen kaybolur
• EXIF verisi (konum bilgisi dahil) düşer
• Çıktı formatı tek tipe iner, sunum tarafı basitleşir

EXIF'in düşmesi ayrıca bir gizlilik kazancıdır: telefonla çekilmiş bir fotoğraf, çekildiği yerin GPS koordinatlarını taşıyabilir.

Dikkat: EXIF düştüğü için görüntü yönü bilgisi de kaybolur. Bu yüzden yeniden kodlamadan önce yön bilgisinin piksellere uygulanması gerekir; aksi hâlde dikey çekilmiş fotoğraflar yan döner.

Sıkıştırma bombalarına karşı sınır koyun

Birkaç kilobaytlık bir PNG, açıldığında gigabaytlarca bellek tüketebilir. İşleme kütüphanesine piksel sınırı vermek ve kenar uzunluğu üst sınırı koymak bu riski kapatır.

Türev boyutlar üretin

Tek bir 2400 piksel genişliğindeki görseli 400 piksellik bir karta göndermek, bandwidth israfıdır. Yükleme sırasında birkaç boyutta türev üretip srcset ile sunmak, mobil kullanıcılarda ciddi kazanç sağlar.

Bizim varsayılan hattımız şöyle: ana görsel en fazla 2400 piksel, ardından 1600, 800 ve 400 piksellik türevler. Küçültme yönünde üretim yapılır; küçük bir görsel asla büyütülmez.

Dosya adını siz belirleyin

Kullanıcının verdiği dosya adını filesystem'e taşımak gereksiz bir risktir: yol geçişi, birim adı çakışması, karakter kodlaması sorunları. UUID tabanlı bir ad üretip orijinal adı yalnızca metadata olarak saklamak hem güvenli hem yeterlidir.

Sunum: doğru başlıklarla servis edin

Görselleri servis ederken üç başlık önemli:

• Content-Type — tespit edilen gerçek türe göre, tahmine göre değil
• X-Content-Type-Options: nosniff — tarayıcının tür tahmini yapmasını engeller
• Cache-Control — içerik değişmez olduğu için uzun süreli önbellek verilebilir

Dosya adları UUID tabanlı olduğu için içerik hiçbir zaman değişmez; bu da bir yıllık immutable önbellek vermeyi güvenli kılar.