常用 MIME 類型
伺服器與上傳表單依賴這些字串;類型寫錯會導致預覽失敗、下載異常或違反內容安全政策。
| 類別 | 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 表單 | multipart/form-data | — |
說明
- 瀏覽器可能會嗅探內容,伺服器仍應回傳正確的類型。
- JS 的正式類型為 text/javascript(application/javascript 已過時)。
MIME 類型實際控管的事項
MIME 類型是伺服器附加在回應上的標籤,用來告訴瀏覽器這些位元組代表什麼。text/html 會渲染網頁,application/pdf 會開啟閱讀器,image/svg+xml 能在頁面中內嵌繪製,而 application/octet-stream 則會觸發下載提示。兩個外表相同的檔案,僅憑這個標頭就能產生完全不同的行為。瀏覽器、上傳表單、郵件客戶端與內容安全規則都會讀取它,因此設錯是預覽失效、強制下載與腳本遭阻擋的常見原因。
今日 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 提供則遭瀏覽器阻擋。嚴格的内容安全政策會根據 MIME 類型判斷,因此樣式表如果類型錯誤會被直接拒絕。當預覽或下載出現異常時,檢查回應的 Content-Type 通常是最快的診斷方式。
字元集與內容嗅探
對於文字類型,需搭配 charset 使用——text/html; charset=utf-8 和 application/json; charset=utf-8 是多語言內容的安全預設值。舊版瀏覽器會使用內容嗅探(content sniffing)從檔案位元組猜測類型,攻擊者曾藉此進行攻擊;傳送 X-Content-Type-Options: nosniff 可讓瀏覽器改信任宣告的類型,而非自行猜測。務必傳送明確且正確的 Content-Type,不要依賴瀏覽器根本看不見的副檔名。
在伺服器與表單中設定類型
類型的來源很重要。靜態主機通常會自動將副檔名映射為對應類型,但網頁框架往往需要明確設定——在 Express 中以 res.type('json') 設定,在 Nginx 透過 types 區塊設定,在 Cloudflare Pages 則透過標頭或副檔名設定。HTML 表單使用 enctype 控制上傳編碼:檔案使用 multipart/form-data,純文字欄位使用 application/x-www-form-urlencoded,而預期 JSON 的 API 則傳送 application/json。傳錯 enctype 會悄悄造成 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。