[보안] SOP에 관하여

 

 

최근에 iframe을 통해 웹페에지 내에 다른 웹페이지를 삽입해야 하는 사항이 있었고, 그 과정에서 SOP(Same-Origin Policy)의 중요성을 깨닫게 되었다. 이를 정리한 내용을 공유해보려 한다. 

 

SOP 개념

Same-Origin Policy(SOP)는 웹 보안의 중요한 개념으로, 브라우저에서 실행되는 웹 애플리케이션 간 데이터를 보호하기 위해 설계된 규칙이다. SOP는 한 origin에서 로드된 문서나 스크립트가 다른 origin의 리소스와 상호작용하는 방법을 제한한다. 이를 통해 악의적인 접근을 방지하는 중요한 보안 메커니즘을 제공한다.

여기서 Origin이란?

웹 애플리케이션의 origin은 브라우저가 리소스를 로드한 출처를 나타낸다. 즉, 브라우저가 내가 접속한 서버(예:네이버)로부터 html document를 다운로드 받고 document를 해석해서 브라우저 윈도우에 뿌린다. 이때 브라우저는 document가 어디서 왔는지를 기록하는데 이게 바로 origin이다. document 내에서 외부리소스들과 상호작용 할 떄 리소스의 origin이 document의 origin과 다른 경우에 제한을 두겠다는 것이 바로 SOP인 것 !

 

같은 출처(Same Origin)의 기준

웹 페이지의 출처(origin)는 다음 3가지를 기준으로 정의된다.

1. 프로토콜(scheme) (예: http, https)
2. 호스트(host) (예: example.com, sub.example.com)
3. 포트(port) (예: :80, :443)

두 개의 웹 리소스가 동일한 출처인지 확인하려면, 위의 세 가지가 모두 일치해야 한다.

(예시) 
사이트: https://www.test.com

• https://www.test.com/path/3 → O (동일 출처)
• https://www.test.com:443/path/3 → O (동일 출처)
• http://www.test.com/path → X (다른 프로토콜)
• https://naver.test.com/path → X (다른 호스트)
• https://naver.test.com:8080/path → X (다른 호스트와 포트)

 

SOP가 하는 역할

SOP는 웹 페이지가 다른 출처의 리소스에 무단으로 접근하지 못하도록 방지한다. 이는 민감한 정보가 외부에서 훔쳐지거나 조작되는 것을 차단하여 사용자 데이터를 보호하는 데 핵심적인 역할을 하는 것이다.

(예시)

1. A 웹사이트 : https://example.com
2. B 웹사이트 : https://another.com

• A 웹사이트에서 JavaScript를 통해 B 웹사이트의 데이터를 읽으려 하면, SOP 때문에 차단된다. 

 

왜 필요할까?

SOP는 사용자 데이터를 보호하고 웹 사이트 간의 보안을 유지하는 핵심 원칙이다. 만약 SOP가 없다면, 악의적인 웹사이트가 사용자의 정보를 마음대로 가져가거나 변조할 수 있다.

예외: SOP를 완화하는 방법 (SOP + CORS)

• CORS (Cross-Origin Resource Sharing)
  • 서버가 명시적으로 허가하면, 다른 출처에서 데이터에 접근할 수 있다.
  • 예 : 특정 출처에서만 데이터를 읽을 수 있도록 허용.
    • 즉, SOP는 기본적으로 다른 출처에서 데이터를 접근하지 못하도록 차단하지만, CORS를 통해 특정 URL에 대한 접근을 명시적으로 허용할 수 있다.
• CORS (Cross-Origin Resource Sharing)
  • 서버가 명시적으로 허가하면, 다른 출처에서 데이터에 접근할 수 있다.
  • 예 : 특정 출처에서만 데이터를 읽을 수 있도록 허용.
    • 즉, SOP는 기본적으로 다른 출처에서 데이터를 접근하지 못하도록 차단하지만, CORS를 통해 특정 URL에 대한 접근을 명시적으로 허용할 수 있다.
• SOP + CORS의 동작 원리
  1. 기본 동작: SOP
     • 브라우저는 기본적으로 출처(origin)가 다르면 데이터를 차단합니다.
     • 예: https://example.com에서 https://api.other.com의 데이터를 요청 → SOP가 차단.
  2. CORS를 설정한 경우
     • 서버가 CORS 헤더(예: Access-Control-Allow-Origin)를 통해 특정 출처를 허용합니다.
     • 브라우저는 서버의 허가를 확인하고, 허용된 출처에서 온 요청만 데이터를 제공합니다.
     예를 들어
     • 허용된 출처: https://app.example.com
     • 허용되지 않은 출처: https://malicious.com
     • → https://app.example.com에서 온 요청은 허용되지만, https://malicious.com의 요청은 여전히 차단됩니다.