جاوااسکریپت - منبع خارجی توسط AngularJs بارگذاری نمیشود

با استفاده از Angular و Phonegap، من در تلاش هستم یک ویدیو که روی سرور راه دور قرار دارد را بارگذاری کنم اما به یک مشکل برخورد کردم. در JSON من، URL به صورت یک URL ساده HTTP وارد شده است.

"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 اعمال شده است. این کار باعث میشود XSS سختتر شود زیرا جلوی یک هکر را از تماس گرفتن خارج (یعنی ارسال درخواست به یک URL خارجی که ممکن است شامل یک بار مخرب باشد) میگیرد.

برای دور زدن آن به درستی، شما نیاز دارید دامنههایی که میخواهید اجازه دهید را در فهرست سفید قرار دهید، مانند این:

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 متصل نخواهد شد. از مستندات Angular

'self' - رشته ویژه، 'self'، می تواند برای مطابقت با همه URL های همان دامنه به عنوان سند برنامه با استفاده از پروتکل یکسان استفاده شود.

با داشتن آن، اکنون قادر هستم به طور مستقیم به هر لینک یوتیوب متصل شوم.

واضح است که باید عبارت منظم را مطابق نیازهای خود سفارشی کنید. امیدوارم کمک کند!