본문 바로가기

C#&Blazor&IIS

원격사이트에서 컨텐츠를 가져갈 수 있도록 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.kr" allowed="true" allowCredentials="true" maxAge="3600"/>


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



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


속성

설명 

origin

CORS를 요청한 원격 요청 호스트를 지칭합니다.

"*"는 모든 원격 요청 헤더를 말합니다.

"http://", "https://" 처럼 프로토콜만으로도 원격 요청 도메인 범위를 지정할 수 있습니다.

"https://*.apost.kr" 처럼 서브 도메인 전체를 허용하는 식으로 버위를 지정할 수 있습니다.

allowed

CORS 요청 호스트를 허용할 지를 정합니다. "true"면 허용 "false"면 차단입니다.

기본값은 "true" 입니다.

allowCredentials

"true", "false"로 값을 지정합니다.

응답 헤더에 Access-Control-Allow-Credentials: true/false 를 표시하게 됩니다.

응답을 프론트엔드 자바스크립트에 노출할 것인지를 브라우저에게 알려줍니다.

기본값은 false 입니다. 

maxAge

정수값으로 초단위 값을 표시합니다.

원격으로 CORS 를 요청할 경우, 요청전에 해당 메써드의 요청을 실행할 권한이 있는지 확인(Preflight Request Check) 을 하는데, 한번 확인 후 최대 얼마의 시간까지 확인이 유지되도록 할 것인지를 정하는 것입니다. Access-Control-Max-Age 응답 헤더의 최대 시간 값을 설정하는 것과 같은 항목입니다. 

미 설정시 기본값은 -1 이며, 이 경우 CORS 응답의 Access-Control-Max-Age  는 설정되지 않습니다.

3600으로 설정하면 3600초 = 1시간동안 권한 확인한 결과가 캐시되며, 다음번 메써드 실행 권한 여부 확인(Preflight Request Check)은 1시간 뒤가 됩니다.



닫기