📖SOP과 CORS
🏷️SOP이란
SOP은 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻한다.
출처는 프로토콜, 호스트, 포트의 조합으로 되어있으며 이 중 하나라도 다르면 동일한 출처로 보지 않는다.
SOP의 필요성
동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줍니다.
🏷️CORS이란
CORS는 Cross-Origin Resource Sharing의 줄임말로 교차 출처 리소스 공유를 뜻한다. 즉 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
CORS의 필요성
다른 출처의 리소스를 가져오고 했지만 SOP로 접급이 불가능한경우 CORS설정을 통해서 접근 권한을 얻을 수 있다.
📖CORS 동작 방식
🏷️프리플라이트 요청 (Preflight Request)
프리플라이트 요청이란 실제 용청을 보내기전에 OPTIONS 메서드로 사전 요청을 보내 해당 리소스에 접근 권한이 있는지 확인하는 것을 말한다.
만약 접근 권한이 있다면 응답 헤더의 Access-Control-Allow-Origin으로 요청을 보낸 출처가 돌아오면 그후 실제 요청을 보내게 된다.
접근 권한이 없다면 브라우저에서 CORS 에러를 띄우고, 실제 요청은 전달되지 않는다.
🏷️프리플라이트 요청의 필요성
- 미리 권한을 확인 하는것이 처음부터 전체를 보내는 것보다 리소스 측면에서 효율적이다.
- CORS에 대비가 되어있지 않은 서버를 보호할 수 있다. 다른 출처에서 들어오는 요청에 대한 대비가 되어 있지 않은 서버의 경우 바로 사전요청없이 바로 요청을 보내게되면 응답을 보내기 전 먼저 요청을 처리하게 되고 브라우저가 권한이 없다는 응답을 받을 후에는 이미 요청이 수행된 상태가 된다. 이를 방지하기 위해서 프리플라이트 요청이 필요하다.
🏷️단순 요청 (Simple Request)
아래의 조건을 모두 만족하면 프리플라이트 요청을 생략하고 요청을 보내는 것을 말한다.
GET,HEAD,POST요청 중 하나여야 합니다.- 자동으로 설정되는 헤더 외에,
Accept,Accept-Language,Content-Language,Content-Type헤더의 값만 수동으로 설정할 수 있습니다. Content-Type헤더에는application/x-www-form-urlencoded,multipart/form-data,text/plain값만 허용됩니다.
🏷️인증정보를 포함한 요청 (Credentialed Request)
요청 헤더에 인증 정보를 담아 보내는 요청이다. 출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키를 보낼 수 없다. 민감한 정보이기 때문이다. 이 경우에는 프론트, 서버 양측 모두 CORS 설정이 필요하다.
- 프론트의 경우: 요청 헤더에
withCredentials : true - 서버의 경우: 응답 헤더에
Access-Control-Allow-Credentials : true
마치며..
와 과제하는데 하나도 모르겠고 HTTP 트랜잭션 해부도 이해가 잘 가지 않는다 다시 한번 천천히 읽고 의사코드 정리라도 실시간수업 전에 정리해봐야지
