Popularne typy MIME
Serwery i formularze wysyłania opierają się na tych ciągach; zły typ może zepsuć podgląd, pobieranie lub CSP.
| Rodzaj | Typ MIME | Typowe rozszerzenie |
|---|---|---|
| HTML | text/html | .html |
| CSS | text/css | .css |
| JavaScript | text/javascript | .js |
| JSON | application/json | .json |
| XML | application/xml | .xml |
| Zwykły tekst | text/plain | .txt |
| CSV | text/csv | .csv |
| application/pdf | ||
| ZIP | application/zip | .zip |
| PNG | image/png | .png |
| JPEG | image/jpeg | .jpg |
| GIF | image/gif | .gif |
| WebP | image/webp | .webp |
| SVG | image/svg+xml | .svg |
| ICO | image/x-icon | .ico |
| MP3 | audio/mpeg | .mp3 |
| WAV | audio/wav | .wav |
| MP4 | video/mp4 | .mp4 |
| WebM | video/webm | .webm |
| WOFF2 | font/woff2 | .woff2 |
| Formular zakodowany w URL | application/x-www-form-urlencoded | — |
| Formularz multipart | multipart/form-data | — |
Uwagi
- Niektóre przeglądarki zgadują typ treści; mimo to serwer powinien wysyłać poprawny typ.
- Oficjalny typ JS to text/javascript (application/javascript jest przestarzały).
Co tak naprawdę kontroluje typ MIME
Typ MIME to etykieta, jaką serwer dołącza do odpowiedzi, informująca przeglądarkę, czym są bajty. text/html renderuje stronę, application/pdf otwiera czytnik, image/svg+xml można rysować inline, a application/octet-stream wyzwala prośbę o pobranie. Dwa pliki wyglądające identycznie mogą zachowywać się zupełnie inaczej w zależności od tego jednego nagłówka. Przeglądarki, formularze przesyłania, klienci poczty elektronicznej i reguły Content Security Policy go odczytują, dlatego błędny typ to częsta przyczyna zepsutych podglądów, wymuszonych pobrań i zablokowanych skryptów.
Gdzie dzisiaj stosuje się text/ i application/
Starsze wskazówki mówiły, że JavaScript to application/javascript; obecny standard to text/javascript, a application/javascript jest przestarzałe. CSS to text/css, HTML to text/html, zwykły tekst to text/plain, a CSV to text/csv — wszystkie z rodziny text/*, ponieważ zaprojektowano je jako czytelne dla człowieka. formaty strukturalne to application/*: application/json, application/xml, application/pdf, application/zip. Wyjątkiem jest SVG, który jest XML-em, lecz musi być serwowany jako image/svg+xml, żeby przeglądarka go renderowała, a nie pobierała.
Błędne typy psują przesyłanie i bezpieczeństwo
Źle oznaczony plik do przesłania to klasyczne źródło błędów: plik JSON serwowany jako text/plain może zostać odrzucony przez klienta API, obraz zwrócony jako octet-stream pobierze się zamiast wyświetlić, a skrypt serwowany jako text/html zostanie zablokowany przez przeglądarkę. Rygorystyczne reguły Content-Security-Policy opierają się na typie MIME, więc arkusz stylów podany z błędnym typem może zostać całkowicie odrzucony. Kiedy podgląd lub pobieranie zachowuje się dziwnie, sprawdzenie Content-Type w odpowiedzi zwykle daje najszybszą diagnozę.
Charset i content sniffing
Dla typów tekstowych należy połączyć typ MIME z charsetem — text/html; charset=utf-8 i application/json; charset=utf-8 to bezpieczne domyślne wartości dla wszystkiego wielojęzycznego. Starsze przeglądarki używały content sniffingu, czyli zgadywania typu na podstawie bajtów pliku, co atakujący wykorzystywali; wysłanie X-Content-Type-Options: nosniff mówi przeglądarce, żebyufała deklarowanemu typowi zamiast zgadywać. Zawsze wysyłaj wyraźny, poprawny Content-Type, a nie polegaj na rozszerzeniu pliku, którego przeglądarka i tak nie widzi.
Ustawianie typów na serwerze i w formularzach
To, skąd pochodzi typ, ma znaczenie. Statyczne hosty mapują rozszerzenia automatycznie, ale frameworki webowe często wymagają jawnego ustawienia — w Express przez res.type('json'), w Nginx poprzez blok types, a na Cloudflare Pages za pomocą nagłówków lub rozszerzenia pliku. Formularze HTML używają enctype do kontrolowania kodowania przesyłania: multipart/form-data dla plików i application/x-www-form-urlencoded dla zwykłych pól, podczas gdy API oczekujące JSON wysyła application/json. Wysłanie niewłaściwego typu to ciche źródło odpowiedzi 415 Unsupported Media Type i 400, które wyglądają tajemniczo, dopóki nie sprawdzisz nagłówka żądania.
Inne rodziny, które warto znać
Poza powszechnymi formatami webowymi warto znać kilka rodzin. czcionki używają font/woff2 i font/ttf. obrazy dzielą się według formatu — image/jpeg, image/png, image/webp, image/avif, image/gif — podczas gdy audio i wideo używają audio/mpeg, audio/ogg, video/mp4 i video/webm. archiwa i pliki binarne to application/zip, application/gzip i application/octet-stream. Gdy API zwraca plik, którego nie potrafi zidentyfikować, octet-stream to uczciwa odpowiedź: wymusza na kliencie pobranie zamiast zgadywania, co jest właśnie tym zachowaniem, jakiego chcesz, gdy zawartość jest nieznana.
Częste pytania
- Jakiego typu MIME użyć dla pliku .json?
- Dla plików JSON i odpowiedzi API używaj application/json. To standardowy typ, najlepiej serwowany w UTF-8.
- Jaki jest typ MIME plików .js?
- Oficjalnym typem JavaScriptu jest text/javascript. Stary application/javascript jest przestarzały i nie należy go już używać.
- Jaki jest typ MIME obrazka SVG?
- Pliki SVG używają image/svg+xml. Tylko z tym typem przeglądarki renderują SVG w treści strony.