C'est la seule solution qui a fonctionné pour moi:

 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"}; }); 

Ensuite, dans un iframe:

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

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

Une autre solution simple est de créer un filtre:

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

Ensuite, spécifiez le filtre dans ng-src :

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

Liste blanche de la ressource avec $ sceDelegateProvider

Ceci est causé par une nouvelle politique de sécurité mise en place dans Angular 1.2. Cela rend XSS plus difficile en empêchant un pirate de composer (c.-à-d. Faire une requête vers une URL étrangère, contenant potentiellement une charge utile).

Pour le contourner correctement, vous devez rechercher les domaines que vous souhaitez autoriser, comme ceci:

 angular.module('myApp', []).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**' ]); }); 

Cet exemple est levé de la documentation que vous pouvez lire ici:

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

Désactivation de la fonctionnalité

Si vous souhaitez désactiver cette fonctionnalité utile, et vous êtes sûr que vos données sont sécurisées, vous pouvez simplement autoriser **, de la manière suivante:

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

A eu le même problème ici. Je devais me lier aux liens de Youtube. Ce qui a fonctionné pour moi, en tant que solution globale , était d'ajouter ce qui suit à ma configuration:

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

L'ajout de «soi» est important – sinon, vous ne pourrez lier aucune URL. Des documents angulaires

'Self' – La chaîne spéciale, 'self', peut être utilisée pour correspondre à toutes les URL du même domaine que le document d'application utilisant le même protocole.

Avec cela, je peux maintenant me lier directement à n'importe quel lien Youtube.

Vous aurez évidemment à personnaliser le regex à vos besoins. J'espère que cela aide!

J'ai rencontré le même problème en utilisant Videogulaire. J'avais ce qui suit lors de l'utilisation de ng-src:

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

J'ai réglé le problème en écrivant une directive de base:

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

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

La meilleure et la plus simple solution pour résoudre ce problème est de transmettre vos données à partir de cette fonction dans le contrôleur.

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

En page html

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

Sur la base du message d'erreur, votre problème semble être lié à l' interpolation (généralement votre expression {{}} ), et non à un problème entre domaines. Fondamentalement ng-src="{{object.src}}" suce.

ng-src été conçu avec img tag à l'esprit IMO. Il pourrait ne pas être approprié pour <source> . Voir http://docs.angularjs.org/api/ng.directive:ngSrc

Si vous déclarez <source src="somesite.com/myvideo.mp4"; type="video/mp4"/> <source src="somesite.com/myvideo.mp4"; type="video/mp4"/> , ça fonctionnera, n'est-ce pas? (Notez que je supprime ng-src en faveur de src ) Sinon, il faut d'abord le résoudre.

Ensuite, assurez-vous que {{object.src}} renvoie la valeur attendue (en dehors de <video> ):

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

Si elle renvoie la valeur attendue, la déclaration suivante devrait fonctionner:

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

Si quelqu'un cherche une solution TypeScript:

Fichier .ts (modifiez les variables le cas échéant):

 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>