[javascript] AngularJ가 외부 리소스를로드하지 않음

Program / 글쓴이

Angular와 Phonegap을 사용하여 원격 서버에 있지만 문제가 발생한 비디오를로드하려고합니다. 내 JSON에서 URL은 일반 HTTP URL로 입력됩니다.

"src" : "http://www.somesite.com/myvideo.mp4"

내 비디오 템플릿

 <video controls poster="img/poster.png">
       <source ng-src="{{object.src}}" type="video/mp4"/>
 </video>

다른 모든 데이터가로드되지만 콘솔을 볼 때이 오류가 발생합니다.

Error: [$interpolate:interr] Can't interpolate: {{object.src}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL

$compileProvider구성 설정 을 추가하려고 시도했지만 문제가 해결되지 않았습니다.

$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);

교차 도메인 문제에 대한이 게시물을 보았지만 이 문제 를 해결하는 방법 또는 어떤 방향으로 들어가야할지 모르겠습니다. 어떤 아이디어가 있습니까? 어떤 도움을 주셔서 감사합니다

답변

이것은 나를 위해 일한 유일한 솔루션입니다.

var app = angular.module('plunker', ['ngSanitize']);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }

  $scope.movie = {src:"http://www.youtube.com/embed/Lx7ycjC8qjE", title:"Egghead.io AngularJS Binding"};
});

그런 다음 iframe에서 :

<iframe class="youtube-player" type="text/html" width="640" height="385"
        ng-src="{{trustSrc(movie.src)}}" allowfullscreen frameborder="0">
</iframe>

http://plnkr.co/edit/tYq22VjwB10WmytQO9Pb?p=preview

답변

또 다른 간단한 해결책은 필터를 만드는 것입니다.

app.filter('trusted', ['$sce', function ($sce) {
    return function(url) {
        return $sce.trustAsResourceUrl(url);
    };
}]);

그런 다음 필터를 다음에 지정하십시오 ng-src.

<video controls poster="img/poster.png">
       <source ng-src="{{object.src | trusted}}" type="video/mp4"/>
</video>

답변

$ sceDelegateProvider로 리소스를 허용

이는 Angular 1.2에 적용된 새로운 보안 정책으로 인해 발생합니다. 해커가 전화를 걸지 못하도록하여 (예 : 페이로드가 포함 된 외부 URL에 요청) XSS를 더욱 어렵게 만듭니다.

올바르게 해결하려면 다음과 같이 허용하려는 도메인을 허용 목록에 추가해야합니다.

angular.module('myApp',['ngSanitize']).config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from our assets domain.  Notice the difference between * and **.
    'http://srv*.assets.example.com/**'
  ]);

  // The blacklist overrides the whitelist so the open redirect here is blocked.
  $sceDelegateProvider.resourceUrlBlacklist([
    'http://myapp.example.com/clickThru**'
  ]);
});

이 예제는 여기에서 읽을 수있는 설명서에서 발췌 한 것입니다.

https://docs.angularjs.org/api/ng/provider/$sceDelegateProvider

이 작업을 수행하려면 앱에 ngSanitize를 포함시켜야합니다.

기능 비활성화

이 유용한 기능을 끄고 데이터가 안전하다고 확신하는 경우 다음과 같이 **를 허용하면됩니다.

angular.module('app').config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist(['**']);
});

답변

여기에서도 같은 문제가있었습니다. 유튜브 링크에 바인딩해야했습니다. 글로벌 솔루션 으로 저에게 도움 이 된 것은 구성에 다음을 추가하는 것이 었습니다.

.config(['$routeProvider', '$sceDelegateProvider',
        function ($routeProvider, $sceDelegateProvider) {

    $sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);

}]);

거기에 ‘self’ 를 추가하는 것이 중요합니다. 그렇지 않으면 URL에 바인딩하지 못합니다. 로부터 각 문서

‘self’-특수 문자열 ‘self’는 동일한 프로토콜을 사용하여 애플리케이션 문서와 동일한 도메인의 모든 URL과 일치시키는 데 사용될 수 있습니다.

이를 통해 이제 모든 유튜브 링크에 직접 바인딩 할 수 있습니다.

정규식을 필요에 맞게 사용자 정의해야합니다. 그것이 도움이되기를 바랍니다!

답변

이 문제를 해결하기위한 가장 쉽고 쉬운 해결책은 컨트롤러에서이 기능의 데이터를 전달하는 것입니다.

$scope.trustSrcurl = function(data)
{
    return $sce.trustAsResourceUrl(data);
}

HTML 페이지에서 

<iframe class="youtube-player" type="text/html" width="640" height="385" ng-src="{{trustSrcurl(video.src)}}" allowfullscreen frameborder="0"></iframe>

답변

Videogular를 사용하여 동일한 문제가 발생했습니다. ng-src를 사용할 때 다음을 얻었습니다.

Error: [$interpolate:interr] Can't interpolate: {{url}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy

기본 지시문을 작성하여 문제를 해결했습니다.

angular.module('app').directive('dynamicUrl', function () {
return {
  restrict: 'A',
  link: function postLink(scope, element, attrs) {
    element.attr('src', scope.content.fullUrl);
  }
};
});

HTML :

 <div videogular vg-width="200" vg-height="300" vg-theme="config.theme">
    <video class='videoPlayer' controls preload='none'>
          <source dynamic-url src='' type='{{ content.mimeType }}'>
    </video>
 </div>

답변

누구든지 TypeScript 솔루션을 찾고 있다면 :

.ts 파일 (해당되는 경우 변수 변경) :

module App.Filters {

    export class trustedResource {

        static $inject:string[] = ['$sce'];

        static filter($sce:ng.ISCEService) {
            return (value) => {
                return $sce.trustAsResourceUrl(value)
            };
        }
    }
}
filters.filter('trustedResource', App.Filters.trusted.filter);

HTML :

<video controls ng-if="HeaderVideoUrl != null">
  <source ng-src="{{HeaderVideoUrl | trustedResource}}" type="video/mp4"/>
</video>