동일 출처 정책 (Same-Origin Policy) & CORS

<Same-Origin Policy (SOP) 이란?>

동일 출처 정책(Same-Origin Policy)은 중요한 보안 메커니즘으로, 한 출처에서 로드된 문서나 스크립트가 다른 출처의 리소스와 상호작용하는 것을 제한합니다. 이는 동일한 도메인, 프로토콜, 포트 조합을 가진 리소스에만 접근을 허용하는 방식으로 동작합니다.

 

동일 출처 정책은 잠재적으로 악의적인 문서를 격리하여 공격 경로를 줄이는 데 도움을 줍니다. 예를 들어, 인터넷상의 악성 웹사이트가 브라우저에서 JavaScript를 실행해 타사 웹 메일 서비스의 데이터를 읽는 것을 방지합니다.

 

하단에 예시를 보겠습니다 :

출처(origin)는 URI 스킴, 도메인, 포트 번호로 구성됩니다.
예시 링크는 스킴 : http, 도메인 : normal-website.com, 포트 번호 : 80 으로 설정 했습니다.
http://normal-website.com/example/example.html 

URL 접근	접근 허용
http://normal-website.com/example/	가능 : 같은 스킴, 도메인, 포트
http://normal-website.com/example2/	가능 : 같은 스킴, 도메인, 포트
https://normal-website.com/example/	불가 : 다른 스킴과 포트
http://en.normal-website.com/example/	불가 : 다른 도메인
http://www.normal-website.com/example/	불가 : 다른 도메인
http://normal-website.com:8080/example/	불가 : 다른 포트

 

<Same-Origin Policy 왜 필요한가?>

동일 출처 정책(Same-Origin Policy)는 사용자 데이터를 보호하고 잠재적인 보안 위협을 방지하기 위해 필수적입니다. 동일 출처 정책이 필요한 이유는 다음과 같습니다:

브라우저가 한 출처에서 다른 출처로 HTTP 요청을 보낼 때, 해당 요청에 다른 도메인과 관련된 쿠키(인증 세션 쿠키 포함)가 함께 전송됩니다. 즉, 요청이 사용자의 세션 내에서 처리되어 사용자와 관련된 데이터가 포함된 응답이 반환될 수 있다는 뜻입니다.

이 경우 동일 출처 정책이 없다면, 악성 사이트가 사용자의 인증 정보를 도용해 다른 사이트의 사용자 데이터에 무단으로 접근할 가능성이 생깁니다.

 

<Same-Origin Policy는 어떻게 적용되는지>

브라우저에서 특정 리소스가 다른 출처에서 임베딩될 때 제한을 두어 보안성을 강화하는 방식으로 구현됩니다.

• JavaScript (<script src="..."></script>): 자바스크립트 파일을 외부에서 로드할 수 있지만, 문법 오류의 상세 정보는 동일 출처에서 로드된 스크립트에 대해서만 표시됩니다.
• CSS (<link rel="stylesheet" href="...">): CSS는 비교적 느슨한 문법 규칙을 가지기 때문에, 교차 출처의 CSS는 올바른 Content-Type 헤더가 필요합니다. 잘못된 MIME 타입이거나 유효한 CSS 구조로 시작하지 않으면 브라우저는 스타일시트 로드를 차단합니다.
• 이미지 (<img src="...">): <img> 태그를 통해 다른 출처의 이미지를 자유롭게 로드할 수 있습니다.
• 미디어 (<video> 및 <audio>): 비디오 및 오디오 태그를 사용해 교차 출처에서 미디어를 로드할 수 있습니다.
• 외부 리소스 (<object> 및 <embed>): 다른 출처에서 오브젝트나 임베드 리소스를 임베딩할 수 있습니다.
• 폰트 (@font-face): 일부 브라우저는 교차 출처 폰트를 허용하지만, 다른 브라우저는 동일 출처 정책을 요구합니다.
• 아이프레임 (<iframe src="...">): <iframe>을 통해 외부 리소스를 임베딩할 수 있으나, X-Frame-Options 헤더를 통해 특정 사이트가 다른 출처에서 프레임으로 임베딩되지 않도록 설정할 수 있습니다.

<SOP Origin 변경>

JavaScript에서 document.domain 속성을 설정하면 현재 도메인이나 해당 도메인의 상위 도메인 접근 할 수 있습니다. 이를 통해 상위 도메인으로 설정하면 짧아진 상위 도메인을 동일 출처 검사에 사용하게 됩니다.

 

예를들어 해당 사이트에 http://store.company.com/dir/other.html ->  document.domain = "company.com" 실행 할 경우  

http://company.com/dir/page.html 이 동일  출처로 간주되어  상호작용이 가능합니다.  단 상위 도메인이 아니기에 설정할 수 없습니다. 

 

<CORS (Cross-Origin Resource Sharing)>

교차 출처 리소스 공유(CORS)는 동일 출처 정책의 제한을 극복하기 위해 사용되는 메커니즘으로, 웹 브라우저가 다른 출처에서 오는 요청에 대해 리소스 접근을 허용할 수 있도록 제한을 완화하는 역할을 합니다. CORS는 HTTP 헤더 기반의 메커니즘으로, 서버가 적절한 CORS 헤더를 응답에 추가하여 특정 출처에서의 접근을 허용할지 여부를 결정합니다.

 

웹 브라우저가 다른 출처(도메인, 프로토콜, 포트)에 요청을 보낼 때, 브라우저는 해당 리소스에 접근 가능한지를 판단하기 위해 CORS 프로세스를 시작합니다. 이 과정에서 브라우저는 서버에 요청을 보내고, 서버가 적절한 CORS 헤더로 응답을 반환하면 브라우저는 요청한 리소스에 접근할 수 있도록 허용합니다.

서버는 HTTP 응답에 "Access-Control-Allow-Origin" 헤더를 포함하여 CORS 요청에 대한 접근 권한을 설정합니다.
예를 들어, example.com 웹사이트에서 api.example.org에 요청을 보내려면, API 서버의 응답에 다음과 같은 헤더를 추가해야 합니다

 

 

 

참고 자료 :
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Same-origin policy - Security on the web | MDN

https://portswigger.net/web-security/cors/same-origin-policy

Same-origin policy (SOP) | Web Security Academy

https://web.dev/articles/same-origin-policy

동일 출처 정책  |  Articles  |  web.dev

https://dev.to/burakboduroglu/understanding-cors-and-same-origin-policy-in-web-security-54hm

Understanding CORS and Same Origin Policy in Web Security🚨