AngularJs에서 외부 리소스를 로드하지 않습니다.

AngularJs에서 외부 리소스를 로드하지 않습니다.

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):/);

크로스 도메인 문제에 대한 이 게시물을 보았지만 어떻게 해결해야 할지, 어떤 방향으로 가야 할지 잘 모르겠습니다.좋은 생각 있어요?어떤 도움이라도 감사합니다.

또 다른 간단한 해결책은 필터를 작성하는 것입니다.

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>

이 솔루션만이 유효했습니다.

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

$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과 일치시킬 수 있습니다.

이것으로, Youtube 링크에 직접 접속할 수 있게 되었습니다.

당신은 분명히 당신의 필요에 따라 정규식을 커스터마이즈해야 할 것입니다.도움이 됐으면 좋겠다!

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

$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>

나도 비디오걸러에서 같은 문제에 부딪혔어.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>

에러 메시지에 근거해, 문제는 보간(일반적으로 표현식)에 관련하고 있는 것 같습니다.{{}}도메인 간 문제가 아닙니다.기본적으로ng-src="{{object.src}}"빤다.

ng-src로 설계되어 있습니다.imgIMO를 염두에 두고 태그를 붙입니다.<source>http://docs.angularjs.org/api/ng.directive:ngSrc 를 참조해 주세요.

선언하면<source src="somesite.com/myvideo.mp4"; type="video/mp4"/>잘 될 것 같죠?(삭제하는 것에 주의해 주세요.ng-src에 찬성하여src그렇지 않은 경우 먼저 수정해야 합니다.

그리고 다음 사항을 확인합니다.{{object.src}}예상되는 값을 반환합니다(예상치).<video>):

<span>{{object.src}}</span>
<video>...</video>

예기된 값을 반환할 경우 다음 문이 작동합니다.

<source src="{{object.src}}"; type="video/mp4"/> //src instead of ng-src

테스트에서 이런 오류가 있었는데templateUrl신뢰할 수 없는 사양에 대해서만 템플릿 디렉토리를 추가했습니다.

beforeEach(angular.mock.module('app.templates'));

메인 디렉토리는app.

언급URL : https://stackoverflow.com/questions/21292114/external-resource-not-being-loaded-by-angularjs