ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [web] 그놈의 CORS와 SOP 란
    Web 2022. 12. 17. 02:23

    개요

    https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues

    최근 여러 프로젝트를 진행하다 CORS 오류를 자주 마주치게 되었다. 사실 CORS가 문제가 아니라 SOP이 문제라는 것도 레퍼런스들을 찾아보다 알게 되었다.

     

    CORS는 Cross Origin Resource Sharing의 약자이다. Cross Origin 간의 Resource를 공유할 수 있도록 한다는 것인데 Cross Origin은 뭘까?

     


     

     

     

    Cross Origin?

    여기서 origin은 출처 즉, URL에서 protocol, hostname, port를 말한다.

     

    그럼 Cross Origin은 protocol, hostname, port가 서로 다른 origin을 말한다.

    근데 서로 다른 origin끼리 resource를 공유하는 것이 뭐 어쨋다는 말이지??

    사실 문제는 SOP 때문이다.

     

     


     

     

     

     

    SOP (Same Origin Policy)?

    SOP은 동일 출처 정책이라고도 하며 같은 출처에서만 리소스를 공유할 수 있다는 규칙의 정책이다.

    따라서 응답의 출처가 protocol, host, port 중 하나라도 다르면 SOP 오류가 뜨는 것이다.

     

    In computing, the same-origin policy (SOP) is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI schemehost name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.

    출처: https://en.wikipedia.org/wiki/Same-origin_policy

     

    SOP는 웹 애플리케이션 보안 모델에서 중요한 개념이다.

    이 정책 하에 웹 브라우저는 어떤 한 웹 페이지에 포함된 스크립트가 다른 페이지에 있는 데이터를 접근하려할 때, 두 페이지의 출처(origin)이 같을 때만 접근을 허용한다. 

    따라서 이 정책은 어떤 한 웹 페이지에 있는 악성 스크립트가 다른 웹페이지에 있는 민감 정보를 DOM(Document Object Model)을 통해 접근하는 것을 막을 수 있다.

     

    예시

    SOP는 인증 정보 세션들이 다른 origin에서 사용되는 것을 막는다.

     

    만약 SOP 가 없다면??

    한 유저가 은행 업무 사이트에 로그인하고 로그아웃을 안했다고 해보자. 그리고 그 유저가 은행 사이트에 요청을 보내는 악성 스크립트가 있는 사이트를 방문했다고 하자. 유저가 아직 은행 사이트에 로그인 되어있기 때문에 악성 스크립트는 은행 사이트에서 인출, 예금 등 모든 작업을 할 수 있다. 

    은행 사이트 관리자는 일반적인 웹 브라우저가 악성 스크립트가 은행 관련 세션 쿠키나 플랫폼 수준의 권한에 접근하는 것을 원치 않을 것이다. 자바스크립트가 은행 관련 세션 쿠키에 직접적으로 접근 권한이 없다고 하지만, 은행 사이트에 은행 세션 쿠키를 가지고 요청을 보내거나 받을 수 있는 것은 사실이다.

    따라서 SOP는 브라우저가 다른 출처에서 온 응답들이 읽기 권한을 얻는 것을 막는다.

     


     

     

     

    CORS (Cross Origin Resource Sharing)

    SOP을 완화(relaxing)시키는 방법 중 하나로,

    CORS는 교차 출처 리소스 공유라고도 하며 SOP에 의한 접근 제한의 예외 조항으로, 사전 설정을 통해 리소스에 선택적으로 접근할 수 있도록 브라우저에 알려주는 정책이다. 즉, 브라우저는 SOP에 따라 기본적으로 다른 출처의 리소스 공유를 막지만, CORS를 통해 접근 권한을 얻을 수 있게 되는 것이다.

     

    이는 Origin 요청 헤더와 Access-Control-Allow-Origin 응답 헤더를 통해 가능하다. 서버가 이 header를 사용해 데이터에 접근할 수 있는 Origin을 명시할 수 있도록 한다.

     

     

    어떻게 CORS를 가능하게 할까?

    여러 방법 중 하나로 서버에서 특정 도메인에 대해서만 접근을 허용하면 된다.

    https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

     

    단순 요청 (Simple Request)

    단순 요청은 서버에 바로 본 요청을 보내는 방식이다.

    브라우저가 예비 요청(preflight)을 보내지 않고, 즉시 실제 HTTP 요청(GET, POST, HEAD 중 하나)을 전송한다.

    서버는 응답 헤더에 Access-Control-Allow-Origin을 포함해 응답하며, 브라우저는 이를 보고 CORS 허용 여부를 결정한다.

    단순 요청이 되려면 아래 조건을 모두 만족해야 한다.

    • 요청 메서드가 GET, POST, HEAD 중 하나일 것
    • 요청 헤더가 Accept, Accept-Language, Content-Language, Content-Type(특정 값만 허용), 등 제한된 헤더일 것
    • Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나여야 함

     

    사전 요청 (Preflight Request)

     

    사전 요청은 실제 요청을 보내기 전에 브라우저가 먼저 서버에 OPTIONS 메서드로 예비 요청을 보내는 방식이다.

    서버가 해당 실제 요청이 안전한지, 허가된 메서드인지 확인한 뒤 승인 응답을 하면 본 요청을 보낸다.

    이 과정은 교차 출처 요청이 사용자 데이터에 영향을 줄 가능성이 있을 때 자동으로 발생한다.

    사전 요청에 포함된 주요 헤더는 아래와 같다.

    • Origin: 요청이 발생한 출처
    • Access-Control-Request-Method: 실제 요청에서 사용할 HTTP 메서드
    • Access-Control-Request-Headers: 실제 요청에 포함될 헤더 목록

    서버는 응답 헤더로 Access-Control-Allow-OriginAccess-Control-Allow-MethodsAccess-Control-Allow-HeadersAccess-Control-Max-Age 등을 보내 허용 범위를 알린다.

    사전 요청을 통해 서버는 실제 요청 전 안전성 및 CORS 정책 준수 여부를 브라우저에게 알리게 된다.

     

     

     

    참고 및 출처:

    https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy 

     

    Same-origin policy - Web security | MDN

    The same-origin policy is a critical security mechanism that restricts how a document or script loaded by one origin can interact with a resource from another origin.

    developer.mozilla.org

    https://en.wikipedia.org/wiki/Same-origin_policy 

     

    Same-origin policy - Wikipedia

    From Wikipedia, the free encyclopedia Jump to navigation Jump to search Security measure for client-side scripting In computing, the same-origin policy (SOP) is an important concept in the web application security model. Under the policy, a web browser per

    en.wikipedia.org

    https://en.wikipedia.org/wiki/Cross-origin_resource_sharing 

     

    Cross-origin resource sharing - Wikipedia

    From Wikipedia, the free encyclopedia Jump to navigation Jump to search Mechanism to request restricted resources on a web page from another domain Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be req

    en.wikipedia.org

    https://www.geeksforgeeks.org/what-is-same-origin-policy-sop/

     

    What is Same Origin Policy (SOP)? - GeeksforGeeks

    A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

    www.geeksforgeeks.org

     

JackCokebb dev blog