자주 쓰는 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은 다운로드 창을 트리거합니다. 완전히 동일해 보이는 두 파일도 이 헤더 하나에 따라 완전히 다른 동작을 할 수 있습니다. 브라우저, 업로드 양식, 이메일 클라이언트, 콘텐츠 보안 정책 모두 이 값을 참조하므로, 잘못 설정하는 것은 미리보기 오류, 강제 다운로드, 스크립트 차단 등의 원인이 됩니다.
오늘날 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을 보내야 합니다.
서버와 양식에서 타입 설정하기
타입의 출처가 중요합니다. 정적 호스팅은 확장자를 자동으로 매핑하지만, 웹 프레임워크는 종종 명시적으로 설정해야 합니다. 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를 인라인으로 렌더링합니다.