본문 바로가기
📺 Front End/- HTTP

[HTTP-Header] HTTP Response Header :: 응답 헤더

by Wonit 2020. 10. 9.

https://docs.trafficserver.apache.org/

HTTP 응답 헤더는 요청에 따라 적절한 로직이 수행되고 결과로 응답할 HTTP 메시지의 헤더를 말 한다.

 

여기서 우리는 자주 사용하는유명한 헤더에 대해서만 알아볼 것이다.

 

헤더는 크롬의 개발자 도구의네트워크 탭에서 헤더들을 확인할 수 있다.

요청 헤더 Request Header

우리가 이번에 다뤄볼 응답 헤더는 다음과 같다.

  • Access-Control-Allow-Origin
  • Allow
  • Content-Disposition
  • Location
  • Content-Security-Policy

 

Access-Control-Allow-Origin

요청을 보내는 클라이언트의 주소와 요청을 받는 백엔드 주소가 다르면 CORS 에러가 발생한다고 지난 시간 이야기를 했었다.


이 때 Access-Control-Allow-Origin 헤더에 클라이언트의 주소를 적어야 에러가 발생하지 않는다.

만약

  1. 프로토콜
  2. 서브도메인
  3. 도메인
  4. 포트

중 하나라도 다르면 CORS 에러가 발생한다.

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: <origin>
Access-Control-Allow-Origin: null

// Access-Control-Allow-Origin: https://developer.mozilla.org

주소를 일일지 지정하기 싫다면 *로 모든 주소에 CORS 요청을 허용할 수 있지만 보안이 취약해지는 점이 있기 때문에 해당 헤더를 사용하는 것으로 하자.

 

이와 유사한 헤더로는

Access-Control-Request-Method
Access-Control-Request-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Headers

등이 있다.

 

Allow

Allow 헤더는 Access-Control-Allow-Mehtods랑 비슷하지만 CORS 요청 외에도 적용된다는 특징이 있다.


특정 메서드만 허용하겠다라는 것을 지정하는 헤더이다.

Allow: <http-methods>

// Allow: GET, POST, HEAD

 

Content-Disposition

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


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

Content-Disposition: inline
Content-Disposition: attachment
Content-Disposition: attachment; filename="filename.jpg"

// ex
POST /test.html HTTP/1.1
Host: example.org
Content-Type: multipart/form-data;boundary="boundary"

--boundary
Content-Disposition: form-data; name="field1"

value1
--boundary
Content-Disposition: form-data; name="field2"; filename="example.txt"

value2
--boundary--

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


보통 FTP 서버나 파일 전용 서버에서 많이 사용하게 된다.

 

Location

리다이렉트 헤더라고도 하며, 300번대 응답이나 201 Created 응답일 때 어느 페이지로 이동할지를 알려주는 헤더이다.

Location: <url>

// ex
HTTP/1.1 302 Found
Location: /

 

Content-Security-Policy

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


이 헤더를 이용한다면 XSS 공격과 같은 잠재적 공격 소스 파일을 차단할 수 있고, 잘 동작하는 소스 코드를 허용할 수 있게 된다.


만얀 이 값을 self라고 지정한다면 자신과 같은 도메인의 파일만 가져 올 수 있게 되는 것이다

Content-Security-Policy: <policy-directive>; <policy-directive>

// Content-Security-Policy: default-src https:

댓글0