[AngularJS] ng-include cross domain

ng-include 라는 지시자는 HTML 안에 다른 HTML 을 부분 포함할때 사용하는 것으로, 마치 HTML 의 iframe, PHP 의 include 의 기능을 한다. 사용방법은 다음과 같다.

<div ng-include src="'header.html'"></div> //또는
<div ng-include="'footer.html'"></div>

주의해야할 점은 ng-include src 속성은 홀따옴표(')로 파일명을 감싸줘야하는데 이유는 디렉티브가 스코프내에서 파일명을 찾게되므로 문자열로 지정할수있도록 홀따옴표를 사용한다고 한다.

그런데,
외부 도메인을 쓰고있는 HTML을 가져오다가 Cross Domain 문제가 생겼다.
이럴땐, resourceUrlWhitelist 를 사용해서 접속 하고자하는 도메인을 접속 가능한 도메인으로 지정을 해줘야한다.
방법은 다음과 같다.

HTML

<div ng-include="'https://tryit.w3schools.com/angular_include.php'"></div>

AngularJS

var app = angular.module('myApp', [])

app.config(['$sceDelegateProvider'], ($sceDelegateProvider) => {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://tryit.w3schools.com/**',
    //'/^(http|https)?:\/\/(.*\.)?shaking.com\/\?(.*)/'
  ]);
});

바로 run 가능한 URL : https://www.w3schools.com/angular/tryit.asp?filename=try_ng_include_crossdomain

이처럼 https 나 외부 도메인을 사용하는 HTML 을 불러와야할 경우 resourceUrlWhitelist 을 사용하면된다.
추가로 http, https 상관없이 지정 도메인에 대한 모든 HTML 을 접근할 수 있도록 하는 정규식(위 소스엔 주석처리 해놨다)은 다음과 같다.

/^(http|https)?:\/\/(.*\.)?shaking.com\/\?(.*)/