웹 브라우저 보안 정책 SOP, CORS, JSONP 개념 정리

🛡️ Same Origin Policy (SOP)란?

SOP(동일 출처 정책)는 웹 브라우저에서 보안 강화를 위해 적용하는 정책으로, 다른 출처(Origin)에서 불러온 리소스가 현재 웹 페이지의 데이터에 접근하지 못하도록 제한하는 역할을 합니다.

🔹 Origin(출처) 정의

Origin은 다음 세 가지 요소가 완전히 일치해야 동일한 출처로 간주됩니다.

요소 예시

프로토콜 (Protocol / Scheme)	http:// vs. https://
호스트 (Host / Domain)	example.com vs. api.example.com
포트 (Port)	http://example.com:80 vs. http://example.com:8080

 

✅ 같은 Origin의 예시

https://www.example.com:443
https://www.example.com:443/somepage

 

✅ 다른 Origin의 예시

https://www.example.com:443 ❌ http://www.example.com:443  (프로토콜 다름)
https://www.example.com:443 ❌ https://api.example.com:443 (호스트 다름)
https://www.example.com:443 ❌ https://www.example.com:8080 (포트 다름)

---

🌍 SOP 예외: 영향을 받지 않는 요소

웹 페이지에서 외부 자원을 불러올 때 SOP가 적용되지 않는 경우도 있습니다.
<img>, <script>, <link>와 같은 태그들은 외부 출처의 리소스를 불러오는 것만 가능할 뿐, JS에서 직접 접근할 수는 없습니다.

→ 이런 리소스들은 브라우저가 직접 로드하기 때문에 SOP 제한 없이 동작합니다.

---

🔄 SOP 예외: Cross-Origin Resource Sharing (CORS)

웹 애플리케이션이 보안 정책을 완화해 다른 출처의 데이터를 허용해야 할 경우,
CORS (교차 출처 리소스 공유) 라는 메커니즘을 사용합니다.

🔹 CORS 작동 방식

1️⃣ 클라이언트(웹 브라우저) 가 https://api.example.com에 데이터를 요청함.
2️⃣ 서버(api.example.com) 가 특정 출처의 요청을 허용하면 응답 헤더에 Access-Control-Allow-Origin을 포함시킴.

Access-Control-Allow-Origin: https://www.example.com

3️⃣ 허용된 Origin에서 온 요청이라면, 브라우저가 데이터를 정상적으로 처리함.

 

✅ CORS 허용 예시

GET /data HTTP/1.1
Host: api.example.com
Origin: https://www.example.com
---
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com

---

⚠️ CORS Preflight (사전 요청)

POST, PUT, DELETE 등의 민감한 요청을 보내거나, 특정 헤더를 추가할 경우
브라우저는 OPTIONS 요청을 먼저 보내서 서버가 허용하는지 확인하는 과정(CORS Preflight)을 거칩니다.

✅ Preflight 요청 예시

OPTIONS /data HTTP/1.1
Origin: https://www.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type

✅ 서버 응답 예시

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: Content-Type

 

✔️ 서버가 POST 메소드와 Content-Type 헤더를 허용한다고 응답하면 브라우저는 본 요청을 진행함.

---

⚙️ JSONP (JSON with Padding)

💡 JSONP는 CORS가 없던 시절 사용되던 우회 방법으로, <script> 태그가 SOP의 영향을 받지 않는 점을 이용해 데이터를 불러오는 방식입니다.

✅ JSONP 요청 방식

<script src="https://other.com/data?callback=myCallback"></script>

• 서버가 callback에 해당하는 함수로 데이터를 감싸서 반환함. 즉, 서버에게 "myCallback이라는 함수로 데이터를 감싸서 보내달라" 라고 요청하는 것.

✅ 서버 응답 예시

myCallback({"name": "Alice", "age": 25});

• 일반적인 JSON 응답이 아니라, myCallback() 함수 호출 형태로 감싸져 있음

✅ 클라이언트에서 처리하는 코드

function myCallback(data) {
    console.log(data.name);  // "Alice"
}

 

✔️ 브라우저는 <script> 태그의 응답을 실행하면서 myCallback({name: "Alice"})을 실행함.
✔️ 결과적으로, myCallback 함수가 데이터를 받아서 처리할 수 있게 됨.

 

⛔ 하지만 JSONP는 보안 취약점(XSS 공격 등)이 있어 현재는 거의 사용되지 않으며, CORS가 대체하고 있음.

---

✅ 정리

SOP (Same Origin Policy)	브라우저가 다른 출처의 리소스에 대한 접근을 제한하는 보안 정책
CORS (Cross-Origin Resource Sharing)	서버에서 Access-Control-Allow-Origin 헤더를 추가하여 다른 출처의 요청을 허용
CORS Preflight 요청	OPTIONS 요청을 통해 서버가 허용하는 메소드와 헤더를 확인하는 과정
JSONP (JSON with Padding)	<script> 태그를 이용해 데이터를 받아오는 옛날 방식 (현재 거의 사용 안 함)

 

CORS는 서버 설정이 필요하고, JSONP는 보안 문제 때문에 거의 사용되지 않으므로
실제 개발에서는 CORS를 설정하여 교차 출처 요청을 처리하는 것이 일반적입니다.