CSS dosyasını açıyorsunuz ve tarayıcı render etmek yerine bir indirme penceresi gösteriyor. Ya da daha kötüsü: .svg dosyası yüklediniz ve Chrome onu HTML olarak çalıştırıyor. Bu iki belirti aynı şeyi gösterir: sunucunun gönderdiği Content-Type başlığı dosyanın gerçek içeriğiyle uyuşmuyor. Sorun sizin kodunuzda değil, MIME türünde.
MIME türü tam olarak neyi belirler
Tarayıcı her kaynak aldığında, sunucu yanıtta şuna benzer bir başlık gönderir:
Content-Type: text/css; charset=UTF-8İlk bölüm MIME türüdür, ikinci bölüm charset parametresidir. Tarayıcı bu dizeye göre dosyayı render etmeye, çalıştırmaya veya indirmeye karar verir. Başlık yoksa veya yanlışsa, tarayıcı varsayılan davranışa döner ve bu davranış neredeyse her zaman istediğiniz şey değildir.
MIME türü iki bölümden oluşur: type/subtype. Örneğin text/html, image/webp, application/json. Referans standardı IANA'dır ve resmi liste düzenli olarak güncellenir, ancak tarayıcılar pratikte bunun bir alt kümesini tanır.
Gerçekten karşılaştığınız yaygın türler
| Uzantı | Doğru MIME türü | Yanlış olursa ne olur |
|---|---|---|
| .css | text/css | Render yerine indirme; site stilsiz |
| .js | application/javascript | Konsolda MIME hatası, betik çalışmaz |
| .svg | image/svg+xml | SVG'nin HTML olarak çalıştırılması; XSS riski |
| .woff2 | font/woff2 | Yazı tipi yüklenmez, metin varsayılan yazı tipiyle gelir |
| .json | application/json | JavaScript'te fetch hata verir |
| .webp | image/webp | Görsel görüntülenmez |
Chrome konsolundaki Refused to execute script because its MIME type ('text/html') is not executable hatası, sunucunun JS dosyası yerine bir HTML sayfası döndürdüğü anlamına gelir. Bu neredeyse her zaman dosya yolunun 404 olduğu ve sunucunun HTML hata sayfasını 200 koduyla gönderdiği anlamına gelir. Sorun MIME türünde değil, yoldadır.
Apache'de özel tür ekleme
Apache'nin tanımadığı bir uzantınız varsa iki yolunuz var. Birincisi .htaccess içinden:
AddType application/wasm .wasm
AddType font/woff2 .woff2
AddType image/avif .avifBu satırları alan adının kök dizinine koyun. Dosyaları CDN'den veya bir alt dizinden sunuyorsanız, .htaccess yalnızca kökte değil, dosyanın sunulduğu aynı yolda olmalıdır.
İkinci yol, sunucu düzeyindedir. Apache'nin mime.types dosyasında veya Nginx'in http bloğunda:
types {
application/wasm wasm;
font/woff2 woff2;
}Önemli fark: .htaccess sunucu yeniden başlatılmadan uygulanır ve paylaşımlı hosting'de de çalışır. mime.types değişikliği root erişimi ve yeniden başlatma gerektirir, ancak sunucudaki tüm alan adlarını etkiler. Yalnızca bir siteniz varsa, .htaccess yeterlidir.
Burada hata yapıyorlar
En sık gördüğüm hata şudur: biri .woff2 yazı tipini yükler, yazı tipi yüklenmez ve CSS'e, @font-face'e ve yükleme sırasına yönelir. Oysa tarayıcının Network sekmesinde yazı tipi yanıtı 200 kodundadır ve başlığı Content-Type: application/octet-stream'tir. Tarayıcı yazı tipini tanımaz ve sessizce yok sayar. Konsolda hiçbir hata görmezsiniz. Sadece metin varsayılan yazı tipiyle gelir ve siz saatlerce CSS hatası ararsınız.
İşareti şudur: Network sekmesinde Type sütununa bakın. Yazı tipi için octet-stream yazıyorsa, sorun CSS'te değil MIME türündedir.
Yanlış tür nasıl istenmeyen indirme oluşturur
Sunucu application/octet-stream gönderdiğinde, tarayıcının render etmek için hiçbir yolu yoktur ve dosyayı indirir. Bu davranış bilinmeyen dosyalar için güvenlidir, ancak CSS, JS ve yazı tipleri için felakettir.
Daha tehlikeli durum bunun tersidir: indirilmesi gereken bir dosyanın HTML olarak sunulması. Kullanıcının yüklediği dosyayı Content-Type: text/html ile döndürürseniz, tarayıcı onu sizin alan adınızda çalıştırır. Bu, depolanmış XSS anlamına gelir. Bu nedenle doğru yapılandırmada yükleme dizini ya sınırlı MIME türüne sahip olmalı ya da Content-Disposition: attachment ile sunulmalıdır.
Hangi katmanın türü belirlediğini nasıl teşhis edersiniz
Önce tarayıcının önbellekle gösterdiği değil, gerçek başlığı curl ile görün:
curl -I https://example.com/assets/style.cssÇıktı Content-Type'ı gösterir. Doğruysa ama tarayıcı hâlâ sorun yaşıyorsa, sorun önbellektir. Yanlışsa, onu belirleyen katmana gidin:
- Apache veya Nginx:
.htaccessvemime.types - PHP: dosyayı sunan betikteki
header()fonksiyonu - CDN: bazı CDN'ler türü kaynaktan kopyalar, bazıları kendileri belirler
- Tarayıcı: sunucudaki değil, sizin sisteminizdeki dosya uzantısı
Dosyayı PHP ile sunuyorsanız ve header('Content-Type: ...')'i unuttuysanız, PHP varsayılan olarak text/html gönderir. Bu, el yapımı yükleme betiklerinde PDF ve görsel dosyalarının indirilmesinin en sık nedenlerinden biridir.
MIME türü ve tarayıcı önbelleği
Az söylenen bir nokta: tarayıcı MIME türünü önbellekte de saklar. Başlığı düzelttiyseniz ve kullanıcı hâlâ eski dosyayı yanlış türle alıyorsa, sorun önbellektir. Statik dosyalar için dosya adında sürümleme (style.a3f9.css) bu sorunu tamamen çözer ve kullanıcının önbelleğini temizlemesine gerek kalmaz.
X-Content-Type-Options: nosniff başlığını da ciddiye alın. Bu başlık tarayıcıya bildirilen türe güvenmesini ve kendi kendine tahmin etmemesini söyler. O olmadan, bazı tarayıcılar bir dosyanın içeriğini okur ve türü içerikten tahmin eder, bunun sonucu öngörülemezdir.
Bu ayarları nereye uygulamalısınız
Paylaşımlı hosting'de sunucunun mime.types dosyasına erişiminiz kapalıdır ve tek aracınız .htaccess'tir. WordPress siteniz varsa ve bir eklenti .webp veya .avif dosyaları üretiyorsa, önce bunların MIME türünün doğru bildirildiğinden emin olun, sonra optimizasyona geçin. Başlıkları ve DNS kayıtlarını hızlıca kontrol etmek için ücretsiz web yöneticisi araçlarını kullanın ve gerekirse alan adı durumunu DNS ve ağ sorgulaması ile kontrol edin.
Statik dosya ve alan adı sayısı arttıysa ve sürekli .htaccess'i kurcalamanız gerekiyorsa, web sunucusu yapılandırması üzerinde tam kontrole sahip olma zamanı gelmiştir. Özel sunucu, mime.types'ı bir kez doğru ayarlayıp tüm sitelere uygulama imkânı verir. Daha küçük siteler için, .htaccess erişimi olan Linux hosting bu durumların çoğu için yeterlidir.
Herhangi bir değişiklikten önce yapılandırma dosyasının yedeğini alın. .htaccess'te yanlış bir satır tüm siteyi 500 hatasıyla erişilemez hale getirir ve önceki sürüme sahip değilseniz sıfırdan yazmanız gerekir.
Sık sorulan sorular
CSS dosyam neden indiriliyor ve tarayıcıda açılmıyor?
Çünkü sunucu onun için yanlış MIME türü gönderiyor, genellikle application/octet-stream veya text/plain. Tarayıcı bu dosyanın render edilmesi gerektiğini bilmez ve onu indirir. curl -I ile Content-Type başlığına bakın ve yanlışsa .htaccess'e AddType text/css .css satırını ekleyin.
MIME türü ile dosya uzantısı arasındaki fark nedir?
Dosya uzantısı yalnızca dosya adının bir parçasıdır ve sunucu onu yok sayabilir. MIME türü, sunucunun Content-Type başlığında bildirdiği şeydir ve tarayıcı buna göre karar verir. .jpg uzantılı bir dosya text/html MIME türüne sahip olabilir ve tarayıcı onu HTML olarak çalıştırır.
Sunucudaki bir dosyanın MIME türünü nasıl kontrol ederim?
En basit yol, yanıt başlıklarını gösteren curl -I https://example.com/file.ext'tir. Tarayıcıda da Network sekmesi ve Type sütunu aynı bilgiyi verir, ancak önbellek etkinse eski değeri görebilirsiniz. Emin olmak için ?v=123 gibi rastgele bir parametreyle istek yaparak önbelleği atlayın.
MIME türünün SEO'ya etkisi var mı?
Doğrudan hayır, ancak dolaylı olarak evet. CSS veya JS dosyası yanlış türle sunulursa, sayfa eksik render edilir ve Core Web Vitals bozulur. Bir görsel yanlış türle sunulursa, Google onu dizine eklemeyebilir ve görsel sonuçlarında görünmez. Bunlar sıralamayı etkiler, ancak Content-Type başlığının kendisi bir sıralama faktörü değildir.