며칠 전에 작성한 글에 이어 프로젝트에서 우회로 인해 JSONP와 CORS를 알아보았다.
프로젝트 작업을 하면 다른 도메인의 데이터를 필요로 하는 상황이 자주 발생하게 된다. 웹 브라우저는 보안 문제로 인해 동일 출처 정책(Same-Origin Policy)을 적용하고 있어 다른 도메인의 데이터를 직접 요청하는 것이 제한되어 있는데 이러한 문제를 해결하기 위해 주로 사용되는 기술에는 JSONP(JSON with Padding)와 CORS(Cross-Origin Resource Sharing)가 있다.
JSONP(JSON with Padding)
JSONP는 클라이언트가 서버에 데이터를 요청할 때 콜백 함수 이름을 함께 보내는 방법이다. 서버는 요청받은 콜백 함수 이름을 사용하여 데이터를 감싸서 응답하고, 클라이언트는 이 응답을 스크립트로 실행한다. 이때, 응답 내용이 콜백 함수를 호출하는 형태이므로 클라이언트에서 미리 정의한 콜백 함수가 실행되고 데이터가 전달된다.
예시
- 클라이언트 요청: http://example.com?callback=myFunction
- 서버 응답: myFunction({"key": "value"});
하지만, JSONP는 보안 문제를 가질 수 있다. JSONP를 사용하면 다른 사이트의 스크립트를 직접 실행하기 때문에 악의적인 스크립트에 의해 클라이언트가 피해를 입을 수 있다.
CORS(Cross-Origin Resource Sharing)
CORS는 보안 강화된 방법으로, 서버가 다른 도메인의 요청을 처리할 수 있도록 허용하는 HTTP 헤더를 설정하는 방식이다. 서버는 'Access-Control-Allow-Origin'과 같은 CORS 관련 헤더를 추가하여 어떤 출처의 클라이언트가 이 서버의 리소스를 공유할 수 있는지를 결정한다.
예시
- 서버 응답 헤더: Access-Control-Allow-Origin: *
클라이언트는 AJAX, Fetch API 등을 사용하여 서버에 데이터를 요청하고 응답을 받을 수 있다. 브라우저는 서버로부터 받은 응답 헤더를 확인하여 동일 출처 정책을 우회할 수 있는지를 판단한다.
결론
JSONP는 클라이언트가 콜백 함수를 미리 정의하고,
CORS는 서버가 허용하는 출처를 명시해야 하는 차이가 있다.
두 기술을 적절히 활용하여 웹에서 동일 출처 정책을 우회하고, 필요한 데이터를 안전하게 가져올 수 있다.
