HTML5 비디오 소스를 신뢰 가능한 리소스로 지정하는 가장 효율적인 방법

AngularJS에서 HTML5 비디오 소스를 신뢰 목록에 추가하는 방법

AngularJS는 보안상의 이유로 기본적으로 외부 도메인의 리소스 로딩을 차단합니다. 따라서 HTML5 비디오 태그에 외부 미디어 URL을 사용하려면 해당 URL을 명시적으로 신뢰할 수 있는 리소스로 등록해야 합니다.

이때 가장 효율적인 방법은 $sceDelegateProvider의 resourceUrlWhitelist에 허용할 도메인을 한 번만 설정하는 것입니다. 이렇게 하면 개별 비디오마다 일일이 신뢰 처리를 반복할 필요가 없습니다.

설정 코드 예시

애플리케이션의 config 단계에서 아래와 같이 화이트리스트를 구성하면 됩니다:

app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([

    // 동일 출처(same origin)의 리소스 로딩 허용
    'self',

    // 자산(assets) 도메인에서의 로딩 허용
    'https://media.w3.org/**']);
});

코드 설명

'self'는 현재 애플리케이션과 같은 출처(origin)의 모든 리소스를 허용하는 특수 키워드입니다. 대부분의 경우 이 항목을 유지하는 것이 안전합니다.

'https://media.w3.org/**'처럼 와일드카드(**)를 사용하면 해당 도메인 하위의 모든 경로를 한 번에 허용할 수 있습니다. 예를 들어 비디오 파일이 여러 디렉터리에 분산되어 있어도 매번 URL을 추가할 필요 없이 도메인 전체를 신뢰 처리할 수 있습니다.

주의 사항

화이트리스트 범위가 넓을수록 편리하지만, 보안 위험도 함께 커질 수 있습니다. 가능하면 실제로 사용하는 도메인과 경로 패턴만 최소한으로 등록하고, HTTPS 프로토콜을 사용하는 것이 좋습니다. 또한 AngularJS 1.x 버전에서 제공되는 기능이므로, 최신 프레임워크 환경이라면 각 빌드 도구나 CSP(Content Security Policy) 설정을 활용하는 방안도 검토해 보시기 바랍니다.