Same-Origin Policy동일 출처 정책

출처 = 프로토콜 + 호스트 + 포트

https://example.com:443/path?q=1#hash
└── 출처: https://example.com:443

비교 예시 (기준: https://example.com):
  https://example.com/other     → 동일 출처 (경로 무관)
  http://example.com            → 다른 출처 (프로토콜 다름)
  https://sub.example.com       → 다른 출처 (호스트 다름)
  https://example.com:8080      → 다른 출처 (포트 다름)
  https://other.com             → 다른 출처

// === 제한됨 (다른 출처) ===

// 1. XHR/fetch 응답 읽기 (CORS 없으면)
fetch('https://other.com/api/data')  // 요청은 가지만 응답 못 읽음

// 2. iframe 내 다른 출처 DOM 접근
const iframe = document.querySelector('iframe');
iframe.contentDocument.body;  // DOMException: 블로킹

// 3. 다른 출처 localStorage/IndexedDB 접근 불가

// === 허용됨 ===
// 이미지, CSS, 스크립트 로드 (읽기는 불가)
// <img src="https://other.com/img.png">  → 렌더링은 됨
// <link rel="stylesheet" href="...">    → 적용은 됨
// <script src="...">                    → 실행은 됨

// postMessage: 명시적 크로스 오리진 통신
window.parent.postMessage({ type: 'ready' }, 'https://parent.com');

window.addEventListener('message', (e) => {
  if (e.origin !== 'https://trusted.com') return;  // 검증 필수!
  console.log(e.data);
});

# 서버에서 크로스 오리진 허용

# 단순 요청 응답
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Credentials: true  # 쿠키 포함 시

# Preflight (OPTIONS) 응답
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400  # Preflight 캐시 24시간