CORS, X-Frame-Options, iFrame, WebView, Same-Origin 개념 정리
웹 개발을 하다 보면 CORS, X-Frame-Options, iFrame, WebView, Same-Origin Policy(SOP) 같은 개념들이 자주 등장합니다. 하지만 이 개념들이 서로 연관되어 있어 헷갈리는 경우가 많습니다. 이번 포스팅에서는 각각의 개념을 명확하게 정리하고 비교해 보겠습니다.
1. Same-Origin Policy (SOP, 동일 출처 정책)
Same-Origin Policy란?
Same-Origin Policy(SOP)는 웹 보안을 위해 같은 출처(Origin)의 리소스만 접근할 수 있도록 제한하는 보안 정책입니다.
즉, JavaScript, fetch(), XMLHttpRequest 같은 API를 사용할 때, 다른 사이트의 데이터를 무단으로 가져오지 못하도록 차단하는 역할을 합니다.
Same-Origin 여부 판단 기준
Origin = 프로토콜 + 도메인 + 포트
예를 들어, 아래 사이트들이 있다고 가정해 보겠습니다.
http://example.com:80 ✅ 동일 출처
https://example.com:443 ❌ (프로토콜 다름)
http://sub.example.com ❌ (서브 도메인 다름)
http://example.com:8080 ❌ (포트 다름)
같은 Origin이면 JavaScript로 데이터를 가져오거나 조작할 수 있습니다.
다른 Origin이면 SOP 정책에 의해 API 요청이 차단됩니다.
2. CORS (Cross-Origin Resource Sharing)
CORS란?
CORS(Cross-Origin Resource Sharing)는 서버가 SOP를 우회해서 다른 Origin에서의 요청을 허용하는 방법입니다.
즉, JavaScript에서 다른 도메인의 API를 호출하려면, 해당 서버가 CORS를 허용해야 합니다.
CORS를 허용하는 방법 (서버 응답 헤더 설정)
서버가 CORS를 허용하도록 설정하면, 브라우저에서 다른 Origin의 요청도 정상적으로 처리할 수 있습니다.
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Authorization
Access-Control-Allow-Origin: * → 모든 Origin에서의 요청 허용 (보안상 위험)
서버에서 CORS를 설정하지 않으면, 다른 Origin에서의 API 요청이 차단됩니다.
3. iFrame (HTML 요소)
iFrame이란?
iFrame은 웹 페이지 내부에 또 다른 웹 페이지를 삽입하는 HTML 요소입니다.
하지만 보안적인 이유로 Same-Origin이 아니면 JavaScript가 iFrame 내부의 document에 접근할 수 없습니다.
iFrame 예제
<iframe src="https://example.com"></iframe>Same-Origin이면 JavaScript로 iframe.contentWindow.document에 접근할 수 있습니다.
Cross-Origin이면 SOP 정책에 의해 document에 접근이 차단됩니다.
iFrame이 보안적으로 위험한 이유
- Clickjacking(클릭 가로채기 공격) → 사용자가 iFrame을 통해 가짜 버튼을 클릭하게 유도 가능
- 피싱 & 악성 콘텐츠 → iFrame을 이용해 가짜 로그인 페이지를 만들어 계정 정보를 탈취 가능
- Cross-Origin 제한 → 다른 사이트의 iFrame 내부 document 접근 불가
4. X-Frame-Options (iFrame 보안 설정)
X-Frame-Options란?
X-Frame-Options는 웹사이트가 iFrame에 삽입되는 것을 방지하는 HTTP 보안 헤더입니다.
Clickjacking 공격을 막기 위해 iFrame을 허용할지 차단할지를 설정할 수 있습니다.
X-Frame-Options 설정 방법 (서버 응답 헤더)
X-Frame-Options: DENY # iFrame 삽입 차단
X-Frame-Options: SAMEORIGIN # 같은 Origin에서만 iFrame 허용
X-Frame-Options: ALLOW-FROM https://example.com # 특정 사이트에서만 iFrame 허용✔ DENY: 모든 iFrame 삽입 차단
✔ SAMEORIGIN: 같은 도메인에서만 iFrame 허용
✔ ALLOW-FROM 특정 사이트: 특정 사이트에서만 iFrame 허용 (일부 브라우저 미지원)
5. WebView (모바일 앱에서 웹페이지 렌더링)
WebView란?
WebView는 모바일 앱(Android, iOS)에서 웹 페이지를 표시하는 내장 브라우저입니다.
즉, iFrame은 웹 브라우저에서만 동작하지만, WebView는 모바일 앱 내에서 웹 콘텐츠를 로드할 수 있습니다.
WebView 예제 (Android)
WebView webView = findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true); // JavaScript 활성화 (보안상 주의)
webView.loadUrl("https://example.com");WebView가 보안적으로 위험한 이유
- JavaScript 인터페이스 취약점 → addJavascriptInterface()를 통해 악성 코드 실행 가능
- XSS & 데이터 탈취 → WebView에서 악성 JavaScript가 실행될 가능성
- 악성 페이지 로드 가능 → 신뢰할 수 없는 사이트를 로드하면 위험
보안 대책
- setJavaScriptEnabled(false) → JavaScript 사용 제한
- shouldOverrideUrlLoading() → 신뢰할 수 있는 URL만 로드하도록 제한
한눈에 보는 개념 비교 정리
| Same-Origin Policy (SOP) | 같은 Origin에서만 데이터 접근 허용 | 다른 Origin의 fetch(), XHR 요청, iframe.document 접근 | CORS 설정 필요 |
| CORS | 다른 Origin에서 API 요청 허용 | SOP로 인해 AJAX 요청 차단 | Access-Control-Allow-Origin 헤더 추가 |
| iFrame | 웹페이지 안에 다른 웹페이지 삽입 | 다른 Origin의 document 접근 불가 | postMessage() API 사용 |
| X-Frame-Options | 웹사이트가 iFrame에 삽입되는 것 제한 | Clickjacking 공격 차단 | X-Frame-Options: DENY 설정 |
| WebView | 모바일 앱에서 웹페이지 렌더링 | JavaScript로 앱 조작 가능 | shouldOverrideUrlLoading()로 제한 |
결론
- Same-Origin Policy(SOP) → 웹 보안의 기본 원칙 (다른 Origin 접근 차단)
- CORS → API 요청을 허용하는 서버 측 설정
- iFrame → 웹 페이지 안에 다른 사이트를 삽입하는 HTML 요소
- X-Frame-Options → iFrame 삽입을 허용/차단하는 보안 설정
- WebView → 모바일 앱에서 웹 페이지를 띄우는 내장 브라우저
➡ 즉, SOP는 기본적으로 보안을 강화하지만, 필요하면 CORS를 설정해서 우회할 수 있습니다.
➡ iFrame과 WebView는 유사하지만, WebView는 네이티브 코드 실행이 가능해서 더 위험할 수 있습니다!