[네트워크] 동일 출처 정책과 허용 방안을 알아보자.

🤔 동일 출처 정책 (Same-Origin Policy), 왜 등장하게 된 걸까?

기존에 웹 브라우저는 하나의 서버에게 요청하고, 서버는 HTML 파일을 반환해주게 되고 추가 요청을 한다 해도 어디까지나 같은 도메인에서 이루어지는 일이었다. 당연시 여겨지는 일이었기 때문에 다른 도메인에서 접근하는 것은 악성 접근이나 악의적인 행동으로 간주될 수밖에 없었고, 같은 도메인이 아니면 요청 자체를 막는 선택을 하게 되었다. 이러한 정책은 '동일 출처 정책'이라 한다. 즉, 웹 보안을 위해 프로토콜, 호스트, 포트번호가 일치하는 서버로만 요청을 보낼 수 있게 하는 정책이다.

😟 하지만!

오늘날, 웹 사이트가 애플리케이션 수준으로 성장하게 되고, 단순히 문서 제공만 하는 것이 아니라 다양한 편의정보들을 제공하게 된다. 사용자에게 날씨나 최신 기사를 제공하는 등 추가적인 데이터를 가져와야 했고, 기존의 동일 출처 정책 때문에 불편한 점들이 생겨나기 시작했다. 

 

이러한 정책을 피해 외부 데이터를 가져오기 위한 방법들이 등장하게 되었고 JSONP (JSON-Padding)가 대표적이다.

🧐 JSONP ( JSON-Padding )

HTML 스크립트(script) 태그에서는 다른 도메인의 파일을 불러오는 것이 가능했다. 일반적으로 스크립트를 불러오는 데 사용하는 기능을 자원을 가져오는 데 우회적으로 사용하는 방식이다. 

 

스크립트 태그의 src에?callback=콜백 함수명 을 불여 요청하면 요청의 결과가 콜백 함수의 인자에 객체로 전달되어 데이터를 가공할 수 있게 한다.

🧐 CORS (Cross-Origin-Resource-Sharing)

동일 출처 정책을 무력화시킨 JSONP의 수요는 점점 증가하게 되고, 결국 이러한 우회 방법을 지속적으로 사용하는 것을 방지하기 위해 공식적인 방법을 제공하게 되는데 이를 CORS ( Cross-Origin-Resource-Sharing )이라 한다. 

 

서로 다른 도메인에서 자원을 주고받기 위해서 서버와 클라이언트에서 몇 가지 작업을 해주어야 한다.

클라이언트

요청을 보낼 때 요청 해더에 CORS 관련 속성을 추가하여 전달해야 한다. 이때 사용되는 필드는 Origin을 통해 요청을 보내는 출처를 함께 보낸다. 

서버

서버는 요청의 응답으로, 응답 해더의 Access-Control-Allow-Origin를 통해 이 자원에 접근 가능한 출처를 보내준다. 이러한 응답을 전달받은 클라이언트는 자신이 보냈던 요청 해더의 Origin과 비교하여 유효한지를 파악하게 된다.

 

어찌 보면 간단하지만, 사실 CORS 요청을 보낼 때 서버로 요청을 한 번만 보내는 것이 아니라, HTTP 메서드인 OPTION을 통해 예비 요청을 우선적으로 전달한다. 이러한 예비 요청을 프리플라이트(preflight)라 하며, 브라우저 스스로 이 요청을 보내는 것이 안전한 지를 판단할 수 있게 된다. 클라이언트가 요청 해더에 Origin 필드를 담아 예비 요청을 보내게 되면, 서버는 예비 요청의 응답으로 어떤 것을 허용하고 금지하는지에 대한 정보를 응답 해더에 담아 보내게 된다.