원격사이트에서 컨텐츠를 가져갈 수 있도록 IIS 에 CORS 모듈 설정하기

얼마전부터 웹브라우저들이 보안 정책을 강화하면서 원격 사이트에서 컨텐츠를 가져다 아이프레임을 파서 보여주거나, 자바스크립트로 다른 사이트의 컨텐츠를 가져다 보여주는 방식에 문제가 생기고 있습니다. 

웹브라우저들이 버전업 되면서 보안 정책 강화 및 CORS(Cross-Origin Resource Sharing)룰이 강화되고 있고, 허용하지 않은 컨텐츠를 임의로 끌어다 보여주는 것이 더 이상 어렵게 되었습니다.

예를 들어 전에는 택배사 사이트에서 원격으로 배송 정보를 가져와 보여주는 것에 별다른 제약이 없었는데, 웹브라우저가 버전되면서 일부 택배사 사이트의 CORS 설정이 제대로 적용되면서 내 웹사이트 안에 배송 정보를 아이프레임이나 AJAX로 가져와 보여주는 것이 더이상 허용되지 않는다거나 하는 경우가 생기게 되었습니다.

이제는 자신이 만든 웹사이트들 사이에서도 컨텐츠를 주고으려면 CORS 설정을 통해 별도로 허용을 해야만 컨텐츠를 끌어다 보여줄 수 있습니다.

CORS 모듈 설치하기

IIS 7.5 버전부터는 CORS 모듈이 도입되면서 CORS 룰을 설정할 수 있게 되었고, 개별 웹사이트별로 CORS 설정을 할 수 있게 되었습니다.

아래 URL에서 윈도우/윈도우서버 버전(x86, x64)에 맞는 CORS 모듈을 다운로드 받아 설치합니다.

https://www.iis.net/downloads/microsoft/iis-cors-module

설치 후 IIS를 재시작 합니다.

CORS 설정하기

CORS 설정은 각 개별 사이트별로 설정합니다.

CORS를 적용할 웹사이트 루트의 web.config 파일을 텍스트 편집기에서 열어 다음과 같은 부분을 추가합니다.

없을 경우 새 파일을 추가해야 합니다.

<configuration>    <system.webServer>        <cors enabled="true">            <add origin="*" />        </cors>    </system.webServer></configuration>

<cors> 태그로 CORS 사용 관련 설정을 합니다.

enabled="true" 는 CORS를 사용한다. 

"false"로 변경하면 원격 사이트로부터의 요청을 거부합니다.

<add origin="*" /> 는 모든 곳으로부터의 요청을 허용합니다.

오리진 설정은 항목들을 추가해 순서대로 하나씩 실행하는 구조로 처리됩니다.

예를 들어

<add origin="*" />

밑에

<add origin="http://*" allowed="false" />

오리진 정책을 추가하면 http://로 하는 모든 원격 요청은 거부합니다. 

즉, 모든 원격 요청 연결을 허용하지만 "http://" 연결은 거부한다로 정책이 정해집니다.

또는

<add origin="https://*.apost.dev" allowed="true" allowCredentials="true" maxAge="3600"/>

이렇게 하면 apost.dev 및 하위 모든 도메인으로부터의 CORS 요청을 허용하고, 결과를 프론트엔드 자바스크립트로 노출하는 것을 허용합니다.

오리진 규칙 추가에 사용가능한 속성은 다음과 같습니다.