Content-type & Azure CDN 규칙 엔진

1. 개요 

Header 정보 중 Content-type에 대해서 알아보고 Azure CDN에서 어떻게 Content-type을 관리할 수 있는지에 대해서 설명합니다.

 

 2. Content-type 

HTTP를 통해 데이터를 전송할때 Header와 Payload로 구성되어 있는 패킷이 전송됩니다.

그 중, Header에 속한 정보 중 하나로 Content-type이 있습니다.  

HTTP 통신에서 전송되는 데이터의 타입을 나타내는 Header 정보 중 하나입니다.

 

Content-type에 따라 데이터를 받는 측에서 어떻게 처리해야할 지 판단합니다. 

"데이터를 받는 측"은 대표적으로 브라우저(Request)와 웹서버(Response)가 있습니다.

데이터를 받는 측에서는 Content-type을 확인 후 데이터를 어떻게 분석, 파싱할지 정하고 처리합니다. 

 

 2-1) MIME (Multipurpose Internet Mail Extensions)

Content-type 유형을 알기 전 MIME(마임)에 대해서 먼저 살펴봐야합니다. 

 

1. MIME 개념

- 원래는 전자메일의 데이터 형식을 정의하기 위해 개발됐습니다. 

- 현재는 HTTP 등 인터넷에서 다양한 형식의 파일을 전송하때 사용 됩니다.

  > 데이터 이진 파일들은 MIME 포맷으로 변환되어 SMTP를 통해 전송됩니다.  

- 파일의 형식을 식별하는 표준 방식을 제공합니다. 

 

2. MIME 구조 

type/subtype으로 구성되어 있습니다.

- type : 데이터의 대분류 (예: text,image,application 등)

- subtype : 구체적인 형식  (예: plain,html,png,pdf,octet-stream 등)

 

3. 주요 MIME 타입 예시

텍스트 파일:
- text/plain: 일반 텍스트
- text/html: HTML 문서
- text/css: CSS 파일
- text/javascript: JavaScript 파일

이미지 파일:
- image/jpeg: JPEG 이미지
- image/png: PNG 이미지
- image/gif: GIF 이미지
- image/svg+xml: SVG 이미지

문서 파일:
- application/pdf: PDF 문서
- application/msword: MS Word 문서

기타:
- application/json: JSON 데이터
- application/xml: XML 데이터
- application/octet-stream: 이진 데이터

 

4. MIME과 Content-type 연관성

앞서 말했듯 Content-type은 Header 정보 중 하나입니다.

한마디로 정리하자면, Content-type HTTP Header는 MIME 타입을 사용하여 리소스의 미디어 타입을 명시합니다.

Content-Type: text/html; charset=UTF-8
Content-Type: image/png
Content-Type: application/json

 

5. application/octet-stream

application/octet-stream에 대해서만 잠깐 이야기하려고합니다.

- 가장 일반적인 이진 파일 타입입니다.

- 특정 타입으로 지정되지 않은 이진 데이터를 나타냅니다.

- 브라우저에서 HTTP를 통해 application/octet-stream 타입을 받으면 다운로드를 시도합니다. 

 

 

3. 이슈 및 해결

3-1) 이슈 

웹 브라우저에서 HTTP를 통해 Azure Blob으로 이미지 파일 요청을 했을경우 웹 브라우저에 표시되지 않고 다운로드 되는 현상이 있습니다. 다운로드 되지 않고 웹 브라우저에 이미지가 표시되기를 원합니다. 

 

3-2) 이슈 파악 

1. 환경 구성 

Browser -> Azure CDN -> Azure Blob 순서로 이루어져있으며, CDN 원본 Blob에서 이미지를 웹 브라우저에 표시해야합니다. 

아래 명령어를 입력했을때 응답 content-type이 application/octet-stream으로 나타납니다. 

curl -l http://[CDNURL]/[BLOBCONTAINER]/[FOLDER]/image.png

 

위에서 말했듯이, Content-type이 application/octet-stream이면 웹 브라우저에서는 이진데이터로 인식하여 정보를 다운로드합니다. 그렇기 때문에 Content-type 변경이 필요할 것으로 보입니다. 

 

2. 도식화 

이슈 사항에 대해서 도식화하면 다음과 같습니다. 

 

3-3) 해결

1. 해결 방법 

웹 브라우저에서 HTTP GET으로 .png 확장자 파일을 요청했을 경우, Azure CDN에서 Content-type을 변경하여 Blob으로 데이터를 요청할 수 있습니다. 

 

Azure CDN 규칙 엔진에서는 웹브라우저에서 .png 확장 파일로 데이터를 요청했을 경우 application/octet-stream과 같이 타입을 인식하지 못하도록 하지 않고 명시적으로 image/png로 Content-type 변경이 가능합니다. 

 

그렇게되면 "데이터를 받는 측(Blob)" 에서는 image/png로 받게되고 웹 브라우저에 image/png로 받으라고 응답이 가능하게 됩니다. 그러면 웹 브라우저에 image.png가 표시될 것 입니다. 

 

2. 도식화 

해결 과정에 대해서 어떤식으로 동작하는지 도식화하면 아래 이미지와 같습니다. 

 

3. Azure CDN 규칙 엔진 

참고 URL : https://learn.microsoft.com/en-us/azure/cdn/cdn-standard-rules-engine-reference

Standard rules engine reference for Azure Content Delivery Network