ชนิด 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 | 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 จะถูกเบราว์เซอร์ปิดกั้น กฎ Content-Security-Policy ที่เข้มงวดขึ้นกับชนิด MIME ดังนั้นสไตล์ชีตที่ส่งด้วยชนิดผิดอาจถูกปฏิเสธ outright เมื่อตัวอย่างก่อนดูหรือการดาวน์โหลดทำงานผิดปกติ การตรวจสอบ Content-Type ในคำตอบสนองมักเป็นการวินิจฉัยที่รวดเร็วที่สุด
ชุดอักขระและการดักฟังเนื้อหา
สำหรับประเภทข้อความ ให้จับคู่ชนิด MIME กับชุดอักขระ — text/html; charset=utf-8 และ application/json; charset=utf-8 เป็นค่าเริ่มต้นที่ปลอดภัยสำหรับเนื้อหาพหุภาษา เว็บเบราว์เซอร์รุ่นเก่าใช้การดักฟังเนื้อหาเพื่อคาดเดาชนิดจากข้อมูลดิบของไฟล์ ซึ่งผู้โจมตีสามารถนำไปใช้ได้ การส่ง X-Content-Type-Options: nosniff บอกให้เบราว์เซอร์ไว้วางใจชนิดที่ประกาศไว้เสมอ ส่ง Content-Type ที่ชัดเจนและถูกต้องแทนที่จะพึ่งพาส่วนต่อขยายของไฟล์ ซึ่งเบราว์เซอร์ไม่ได้เห็น
การกำหนดชนิดบนเซิร์ฟเวอร์และในแบบฟอร์ม
ที่มาของชนิด mattered Host แบบสแตติกจับคู่ส่วนต่อขยายอัตโนมัติ แต่เว็บเฟรมเวิร์กมักต้องกำหนดอย่างชัดแจ้ง — ใน Express ด้วย res.type('json'), ใน Nginx ผ่านบล็อก types และบน Cloudflare Pages ผ่านส่วนหัวหรือส่วนต่อขยายของไฟล์ ฟอร์ม HTML ใช้ enctype ควบคุมการเข้ารหัสการอัปโหลด: multipart/form-data สำหรับไฟล์และ application/x-www-form-urlencoded สำหรับฟิลด์ข้อความธรรมดา ในขณะที่ API ที่คาดหวัง JSON จะส่ง 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 type แบบไหน?
- ไฟล์ JSON และ response ของ API ควรใช้ application/json ซึ่งเป็นชนิดมาตรฐาน และควรส่งด้วย UTF-8 ถ้าทำได้
- ไฟล์ .js ใช้ MIME type อะไร?
- ชนิดอย่างเป็นทางการของ JavaScript คือ text/javascript ส่วน application/javascript แบบเก่าเลิกใช้แล้ว
- รูปภาพ SVG ใช้ MIME type อะไร?
- ไฟล์ SVG ใช้ image/svg+xml ต้องส่งด้วยชนิดนี้เบราว์เซอร์จึงจะแสดง SVG แบบ inline ได้