190928 browser security model — cors
CORS
=cross -origin resource sharing
처음 전송 리소스의 도메인과 다른 도메인으로부터 리소스 요청될 시(위 경우에서는 canvas w/image의 경우)
, cors http에 의해 요청됨
사용자를 보호하기 위한 브라우저의 자발적 보안 조치.
CORS standard는 새로운 http header를 추가를 통해 작동한다.
해당 헤더정보는 서버가 서술하는데, 내용은 웹브라우저에서 어떠한 origin이 해당 정보에 대한 조회권한을 갖고 있는지이다.
를 제외한 서버에 부작용을 발생시킬 수 있는 http request의 경우
specification 은 브라우저가 요청을 “preflight”(사전 전달)하도록 강제하는데, 이는 HTTP OPTIONS 요청 메서드를 이용해 서버로부터
지원 중인 메서드들을 내려 받은 뒤,
preflight request에 대해 서버에서 "approval"(승인) 시에
실제 HTTP 요청 메서드를 이용해 실제 요청을 전송하는 것을 말한다.
서버들은 또한 클라이언트에게 (Cookie와 HTTP Authentication 데이터를 포함하는)
"credentials"가 요청과 함께 전송되어야 하는지를 알려줄 수도 있다.
CORS 실패는 에러의 원인이 되지만,
보안상의 이유로, 자바스크립트 코드에서 어떤 문제가 있었는지
상세히는 알 수 없다.
코드가 아는 것은 에러가 일어났다는 것뿐.
무엇이 정확하게 잘못되었는지 아는 유일한 방법은
브라우저의 콘솔에 있는 세부사항을 보는 것이다.
예외적으로 CORS가 수동적으로 설정될 수 있는 경우
AcceptAccept-LanguageContent-LanguageContent-Type(but note the additional requirements below)
content-type header 중에cors 허가되는 값들 =
application/x-www-form-urlencoded
multipart/form-data
text/plain
이벤트리스너 절대 불가능
만약 허가된 방식으로 CORS를 요청할 경우,
http response에는 해당 정보가 포함됨.
Access-Control-Allow-Origin: *
// 리소스가 cross-site 방식 내에서 모든 도메인으로부터 접근 가능하다Access-Control-Allow-Origin: http://foo.example
// 리소스가 http://foo.example 도메인에서만의 접근이 가능하다.
간단한 요청과 다르게, “preflighted”(사전 전달) 요청은 먼저,
실제 요청이 전송하기에 안전한지 아닌지를 결정하기 위해,
다른 도메인에 있는 리소스에 OPTIONS 메서드로 HTTP 요청을 전송한다.
다음의 메서드 중 하나를 사용하는 경우가 해당된다.
이 외에도 다양한 경우가 포함되니, 글 하단에 있는 MDN문서에서 해당 항목을 통해 확인할 수 있다.
browser(client)는 처음에
첫줄에 options가 포함된 request(preflight request)를 먼저 보낸다.
마지막 부분에는 main request에 대한 정보를 담아 보낸다.
OPTIONS /resources/post-here/ HTTP/1.1
.
.
.
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
그 응답으로 server에서 보내는 preflight response의 내용의 일부이다.
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 864001,2,3번 라인은 허가내용에 대한 정보가 담기고,
max-age는 해당 요청이 서버에서 캐시되었던 시간을 나타낸다.
서버는 max-age를 통해 최대값을 기준으로 선입선처리한다.
preflight 방식외에,
Certification(인증)을 이용한 방식이 있다.
HTTP 쿠키와
HTTP Authentication 정보를 알아차리는
“credentialed”(인증된) 요청을 만들어내는 방식이다.
cookie를 주고받는 경우에 cors 이슈 발생.
따로 처리가 필요함.
출처 :
