よく使う MIME タイプ
サーバーやアップロードフォームはこれらの文字列に依存します。誤ったタイプはプレビューやダウンロード、CSP の不具合につながります。
| 種類 | MIME タイプ | 主な拡張子 |
|---|---|---|
| HTML | text/html | .html |
| CSS | text/css | .css |
| JavaScript | text/javascript | .js |
| JSON | application/json | .json |
| XML | application/xml | .xml |
| プレーンテキスト | 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 |
| URL エンコードされたフォーム | application/x-www-form-urlencoded | — |
| マルチパートフォーム | multipart/form-data | — |
注記
- ブラウザーがコンテンツを推測することもありますが、サーバーは正しいタイプを返すべきです。
- JS の正式なタイプは text/javascript です（application/javascript は廃止予定）。
MIMEタイプが実際に制御するもの
MIMEタイプとは、サーバーがレスポンスに付与するラベルであり、ブラウザに対してそのバイト列が何を表すかを教えるものです。text/html はページをレンダリングし、application/pdf はリーダーを開き、image/svg+xml はインラインで描画でき、application/octet-stream はダウンロードのプロンプトをトリガーします。まったく同じ見た目をした2つのファイルでも、このヘッダー1つによって動作が完全に異なります。ブラウザ、アップロードフォーム、メールクライアント、コンテンツセキュリティのルールはみなこれを読み取るので、誤りがあるとプレビューの失敗、強制ダウンロード、スクリプトのブロックが起きる一般的な原因となります。
現在のtext/とapplication/の使い分け
古い指示ではJavaScriptは application/javascript だとされていましたが、現在の標準は text/javascript であり、application/javascript は廃止されました。CSS は text/css、HTML は text/html、プレーンテキストは text/plain、CSV は text/csv — いずれも人間が読みやすいように設計されているため text/* です。構造化されたフォーマットは application/* の側に入ります：application/json、application/xml、application/pdf、application/zip。注目に値する例外がSVGで、XMLですがブラウザがダウンロードではなく描画できるように image/svg+xml として提供しなければなりません。
誤ったタイプがアップロードとセキュリティを壊す
誤ってラベル付けされたアップロードはバグの经典の種です。JSON ファイルが text/plain として提供されると API クライアントに拒否され、画像が octet-stream として返されると表示ではなくダウンロードになり、スクリプトが text/html として提供されるとブラウザによってブロックされます。厳格な Content-Security-Policy ルールは MIME タイプをキーにするので、間違ったタイプでスタイルシートが提供されるとそのまま拒否されます。プレビューやダウンロードが不自然に振る舞う場合、レスポンスの Content-Type を確認するのが最も早い診断です。
文字セットとコンテンツのスニフィング
テキスト系タイプでは、MIME タイプに文字セットをペアにします — text/html; charset=utf-8 および application/json; charset=utf-8 は多言語対応の安全なデフォルトです。古いブラウザはコンテンツのスニフィングを使ってファイルのバイトからタイプを推測していましたが、攻撃者がこれを利用しました。X-Content-Type-Options: nosniff を送信すると、ブラウザに宣言されたタイプを信頼するように指示できます。常に明示的で正しい Content-Type を送信し、ブラウザが見ることすらないファイルの拡張子に頼ってはいけません。
サーバーとフォームでのタイプ設定
タイプがどこから来るかは重要です。静的ホストは拡張子を自動的にマッピングしますが、Web フレームワークでは明示的に設定することがよくあります — Express では res.type('json')、Nginx では types ブロック経由、Cloudflare Pages ではヘッダーまたはファイルの拡張子で設定します。HTML フォームは enctype でアップロードのエンコーディングを制御します：ファイルは multipart/form-data、プレーンなフィールドは application/x-www-form-urlencoded、JSON を期待する API に送信する場合は application/json を使用します。間違ったものを送信すると、要求ヘッダーを確認するまで謎に思える 415 Unsupported Media Type や 400 レスポンスが発生します。
覚えておくと良いその他のファミリー
日常的なウェブフォーマット以外にも、いくつかのファミリーがあります。フォントは font/woff2 と font/ttf を使い、画像はフォーマットごとに分割されます — image/jpeg、image/png、image/webp、image/avif、image/gif。オーディオとビデオは audio/mpeg、audio/ogg、video/mp4、video/webm を使います。アーカイブやバイナリデータは application/zip、application/gzip、application/octet-stream です。API が識別できないファイルを返す場合、octet-stream は誠実な回答です — クライアントに推測させるのではなくダウンロードを強制し、中身が未知の場合に望ましい動作となります。
よくある質問
- .json ファイルにはどの MIME タイプを使えばいいですか？
- JSON ファイルや API レスポンスには application/json を使います。標準のタイプで、可能なら UTF-8 で返します。
- .js ファイルの MIME タイプは何ですか？
- JavaScript の正式な MIME タイプは text/javascript です。古い application/javascript は廃止予定のため使わないでください。
- SVG 画像の MIME タイプは何ですか？
- SVG ファイルは image/svg+xml を使います。このタイプで返さないと、ブラウザーが SVG をインライン表示しません。