HTTP 응답 헤더는 요청에 따라 적절한 로직이 수행되고 결과로 응답할 HTTP 메시지의 헤더를 말 한다.
여기서 우리는 자주 사용하는유명한 헤더에 대해서만 알아볼 것이다.
헤더는 크롬의 개발자 도구의네트워크 탭에서 헤더들을 확인할 수 있다.
요청 헤더 Request Header
우리가 이번에 다뤄볼 응답 헤더는 다음과 같다.
- Access-Control-Allow-Origin
- Allow
- Content-Disposition
- Location
- Content-Security-Policy
Access-Control-Allow-Origin
요청을 보내는 클라이언트의 주소와 요청을 받는 백엔드 주소가 다르면 CORS 에러가 발생한다고 지난 시간 이야기를 했었다.
이 때 Access-Control-Allow-Origin 헤더에 클라이언트의 주소를 적어야 에러가 발생하지 않는다.
만약
- 프로토콜
- 서브도메인
- 도메인
- 포트
중 하나라도 다르면 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:
'📺 Front End > - HTTP' 카테고리의 다른 글
[HTTP] OPTIONS 헤더와 Preflight 그리고 CORS (0) | 2021.08.14 |
---|---|
HATEOAS를 모르면 당신이 알고 있는 REST API는 REST API가 아니라고 장담할게요. (8) | 2021.03.24 |
[HTTP-Header] HTTP Request Header :: 요청 헤더 (0) | 2020.10.09 |
[HTTP-Header] HTTP General Header & Entity Header:: 공통 헤더와 엔티티 헤더 (0) | 2020.10.09 |
[HTTP-Header] HTTP 헤더란? 그리고 Header의 종류 (0) | 2020.10.09 |
댓글0