동일 출처 정책 (Same-Origin Policy)에 대한 이해

동일 출처 정책(Same-Origin Policy)은 웹 보안의 핵심 원칙 중 하나입니다.

이 정책은 한 출처에서 로드된 문서나 스크립트가 다른 출처의 자원을 함부로 가져오지 못하도록 제한하는 보안 메커니즘입니다.

여기서 출처(origin)는 프로토콜(예: http, https), 호스트(도메인 예:example.com), 포트(예: 3000)를 모두 포함한 구성요소를 의미합니다.

1. 동일 출처 정책의 목적

동일 출처 정책의 주된 목적은 사용자의 데이터를 보호하는 것입니다.

만약 이 정책이 없다면 악의적인 웹 사이트가 사용자의 세션을 도용하거나, 다른 사이트에 대한 사용자의 행위를 무단으로 조작할 수 있습니다.

이렇게 되면 사용자의 개인정보와 데이터 보안이 크게 위협받을 수 있습니다.

2. 동일 출처 정책의 규칙

동일 출처 정책에 따르면, 웹 페이지에서 실행되는 스크립트는 다음 조건을 만족할 때만 다른 출처의 리소스와 상호작용할 수 있습니다:

• 프로토콜이 동일합니다.
• 호스트(도메인)가 동일합니다.
• 포트 번호가 동일합니다.

예시

예시를 통해 보면 매우 쉽게 이해할 수 있습니다.

이 표에서 볼 수 있듯이, 동일 출처 정책은 매우 엄격하여, 웹 애플리케이션의 보안을 강화합니다.

3. 예외 상황 및 해결책

물론, 실제 웹 개발에서는 다른 출처의 리소스를 안전하게 사용해야 할 필요성이 있습니다.

이때 사용할 수 있는 몇 가지 예외 상황 및 해결책이 있습니다.

• CORS (Cross-Origin Resource Sharing): 서버에서 특정 출처에 대한 접근을 허용하도록 설정할 수 있습니다.

• JSONP (JSON with Padding): 스크립트 태그는 동일 출처 정책의 제약을 받지 않으므로, JSONP를 이용하여 서버로부터 데이터를 받아올 수 있습니다.

표와 예시를 통해 알기 쉽게 설명하겠습니다.

CORS의 서버에서의 사용 예시

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 모든 출처에서의 접근 허용
  next();
});