알아두면 좋은 HTTP 응답 헤더

이번 포스팅에서는 HTTP 응답 헤더에 대해 알아보자. 

 

(지난 HTTP 공통 헤더, 요청 헤더 포스팅과 이어집니다.)

2021.05.27 - [CS/네트워크] - [네트워크] 알아두면 좋은 HTTP 공통 헤더와 요청 헤더

[네트워크] 알아두면 좋은 HTTP 공통 헤더와 요청 헤더

 

 

응답 헤더 

Access-Control-Allow-Origin

프론트엔드 개발자들이라면 많이 보았을 헤더이다. 프론트 주소와 백엔드 주소가 다르면 CORS 에러가 발생하는데,

이때 서버에서 응답 메시지 Access-Control-Allow-Origin 헤더에 프론트 주소를 적어줘야 에러가 나지 않는다. 

 

Access-Control-Allow-Origin

 

프로토콜, 서브도메인, 도메인, 포트 중 하나만 달라도 CORS 에러가 난다. 

만약, 주소를 일일이 지정하기 싫다면 위처럼 *으로 모든 주소에 CORS 요청을 허용하면 된다.

단, 그만큼 보안이 취약해진다. 

 

유사한 헤더로 Access-Control-Request-Method, Access-Control-Request-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등이 있다. 

 

CORS 요청 시에는 미리 OPTIONS 주소로 서버가 CORS를 허용하는지 물어본다.

이때, Access-Control-Request-Method로 실제로 보내고자 하는 메서드를 알리고, 

Access-Control-Request-Headers로 실제로 보내고자 하는 헤더들을 알린다. 

 

Allow들은 Request에 대응되는 것으로, 서버가 허용하는 메서드와 헤더를 응답하는데 사용된다.

Request와 Allow가 일치하면 CORS 요청이 이루어지는 것이다. 

 

Allow

Allow 헤더는 Access-Control-Allow-Methods와 비슷하지만, CORS 요청 외에도 적용된다는 것에 차이가 있다.

 

즉, GET은 되고, POST는 허용하지 않는 경우, 405 Method Not Allowed 에러를 응답하면서 헤더로 아래와 같이 보내면 된다. GET 요청만 받겠다는 뜻이다. 

 

Allow: GET

 

Content-Disposition

응답 본문을 브라우저가 어떻게 표시해야 할지 알려주는 헤더이다. 

inline인 경우 웹페이지 화면에 표시되고, attachment인 경우 다운로드된다. 

 

Content-Disposition: inline
Content-Disposition: attachment; filename='filename.csv'

 

 

다운로드되길 원하는 파일은 attachment로 값을 설정하고, filename 옵션으로 파일명까지 지정해줄 수 있다. 

 

Location

300번대 응답이나 201 Created 응답일 때 어느 페이지로 이동할지를 알려주는 헤더이다. 

 

HTTP/1.1 302 Found
Location: /

 

위와 같은 응답이 왔다면, 브라우저는 / 주소로 리다이렉트한다. 

 

Content-Security-Policy

다른 외부 파일들을 불러오는 경우, 차단할 소스와 불러올 소스를 여기에 명시할 수 있다. 

 

하나의 웹 페이지는 다양한 외부 소스들을 불러온다. 이미지도 불러오고, script 태그로 자바스크립트 파일들도 불러온다. 폰트나 스타일, 아이프레임도 불러온다. 

 

하지만 해커들에 의해 원하지 않는 파일을 불러오게 될 수도 있다. 

악성코드가 담겨있는 파일이라면 문제가 발생할 것이다. XSS 공격 같은 것이 하나의 예시이다. 

 

이럴 때, Content-Security-Policy로 허용할 외부 소스만 지정할 수 있다. 

 

Content-Security-Policy: default-src 'self'
Content-Security-Policy: default-src https:
Content-Security-Policy: default-src 'none'

 

self로 지정하면 자기 도메인의 파일들만 가져올 수 있다. www.abc.com에서는 www.abc.com/logo.jpg를 가져올 수 있지만, www.def.com/logo.jpg는 가져올 수 없다.  

 

https://로 지정하면 https를 통해서만 파일을 가져올 수 있게 된다. 

 

'none'으로 지정하면 가져올 수 없다. 

 

default-src는 모든 외부 소스에 대해 적용된다. 각각 따로 지정할 수도 있다. 두 개나 세 개로만 추려서 지정할 수도 있다. 

 

Content-Security-Policy: font-src 'self'; script-src https://www.zerocho.com 'unsafe-inline'; 
img-src 'self'; style-src 'self' 'unsafe-inline'; object-src 'none'

 

font-src, script-src, img-src, style-src, object-src 등이 있고, 소스 옵션으로는 도메인이나, https://, 'unsafe-inline'(인라인 태그 허용), 'unsafe-eval'(eval 함수 허용) 등이 있다. 

 

옵션은 매우 다양하므로 아래 링크를 참고해보자. 

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

 

이 외에도 다양한 응답 헤더들이 있다. 오늘은 유명한 응답 헤더들만 정리해보았다. 

 

 

다음 포스팅에서는 쿠키와 캐시 헤더에 대해 알아보도록 하자. 

 

2021.05.28 - [CS/네트워크] - [네트워크] 알아두면 좋은 HTTP 쿠키, 캐시 헤더

[네트워크] 알아두면 좋은 HTTP 쿠키, 캐시 헤더

 

 

 

이 포스팅은 아래 링크를 참고했습니다. 

https://www.zerocho.com/category/HTTP/post/5b4c4e3efc5052001b4f519b