बाह्य संसाधन AngularJs द्वारा लोड नहीं किया जा रहा है

Question

कोणीय और फोनगैप का उपयोग करते हुए, मैं एक वीडियो को लोड करने की कोशिश कर रहा हूं जो एक दूरस्थ सर्वर पर है, लेकिन एक मुद्दे पर आया है। मेरे 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):/);

मैंने इस पोस्ट को क्रॉस डोमेन इश्यू s के बारे में देखा लेकिन मुझे यकीन नहीं है कि इसे कैसे हल किया जाए या मुझे किस दिशा में जाना चाहिए। कोई भी विचार? किसी भी मदद की सराहना की है

Comments

क्या आप अपनी कोरोडा की config.xmlफाइल भी पोस्ट कर सकते हैं ?

— एंड्रयू Shustariov

अभी मैं अभी भी ब्राउज़र में परीक्षण कर रहा हूँ, इसलिए मैंने अपना फ़ोनगैप डीबग करना भी शुरू नहीं किया है।

— शार्टिंगटन

Answer 1

यह एकमात्र समाधान है जिसने मेरे लिए काम किया:

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

Comments

क्या यह एक iFrame के बिना संभव है? मुझे एक वीडियो एम्बेड करने की आवश्यकता है जहां सत्र की जानकारी निर्धारित करती है कि उपभोक्ता को वीडियो देखने की अनुमति है या नहीं। सत्र की जानकारी iFrame के माध्यम से नहीं की जाती है।

— ब्लेक

अच्छा, अगर आप iframe का उपयोग कर सकते हैं

— रिंगो

Answer 2

फ़िल्टर बनाने के लिए एक और सरल उपाय है:

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>

Comments

निश्चित रूप से सबसे सुरुचिपूर्ण और कोणीय समाधान।

— स्कूटीडीडी

मेरे लिए काम किया है, और वास्तव में यह एक iframe का उपयोग करने की तुलना में अच्छा है।

— थॉमस अमर

सबसे अच्छा जवाब, अधिक कोणीय भावना और यह काम किया जहां अन्य समाधान कुछ कारणों से नहीं हुए। आपका बहुत बहुत धन्यवाद!

— फ्लोरीबॉन

Answer 3

$ SceDelegateProvider के साथ संसाधन को श्वेतसूची

यह कोणीय 1.2 में एक नई सुरक्षा नीति के कारण होता है। यह एक हैकर को डायल करने से रोककर एक्सएसएस को कठिन बना देता है (यानी विदेशी यूआरएल के लिए अनुरोध करना, संभावित रूप से पेलोड युक्त)।

इसे ठीक से प्राप्त करने के लिए आपको उन डोमेन को व्हाइटलाइन करने की आवश्यकता है जिन्हें आप इस तरह से अनुमति देना चाहते हैं:

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(['**']);
});

Comments

नोट: यदि resourceUrlWhitelistकिसी तरह से आपके लिए काम नहीं करता है, तो जांच लें कि क्या आपके पास डोमेन नाम के बाद डबल स्लैश नहीं है (इसके लिए आसान तब होता है जब चर से सामान

— समेटना

यह इस मुद्दे के चारों ओर जाने के लिए एक क्लीनर, वैश्विक और सुरक्षित तरीका है।

— डीजे।

"डायलिंग आउट" इस मुद्दे को समझने की कोशिश करने वाले किसी व्यक्ति के लिए उपयोग करने के लिए एक महान शब्द नहीं है।

— रिंगो

धन्यवाद @Ringo - मैंने स्पष्ट करने के लिए एक टिप्पणी जोड़ी है।

— ११:०६

Answer 4

यहाँ भी यही मुद्दा था। मुझे Youtube लिंक से जुड़ने की आवश्यकता है। एक वैश्विक समाधान के रूप में मेरे लिए जो काम किया गया था, वह यह था कि मुझे अपने विन्यास में जोड़ना था:

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

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

}]);

वहाँ 'सेल्फ' जोड़ना महत्वपूर्ण है - अन्यथा किसी भी URL पर बाँधने में विफल रहेगा। से कोणीय डॉक्स

'सेल्फ' - विशेष स्ट्रिंग, 'सेल्फ' का उपयोग एक ही डोमेन के सभी यूआरएल के साथ मैच करने के लिए किया जा सकता है, एक ही प्रोटोकॉल का उपयोग करके एप्लिकेशन डॉक्यूमेंट में।

उस जगह के साथ, मैं अब किसी भी Youtube लिंक से सीधे जुड़ सकता हूं।

आपको स्पष्ट रूप से अपनी आवश्यकताओं के लिए रेगेक्स को अनुकूलित करना होगा। आशा करता हूँ की ये काम करेगा!

Answer 5

इस समस्या को हल करने के लिए सबसे अच्छा और आसान समाधान नियंत्रक में इस फ़ंक्शन से आपका डेटा है।

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

Answer 6

मैं Videogular का उपयोग कर एक ही समस्या में भाग गया। एनजी- 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>

Answer 7

यदि कोई टाइपस्क्रिप्ट समाधान की तलाश में है:

.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);

एचटीएमएल:

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

Answer 8

त्रुटि संदेश के आधार पर, आपकी समस्या इंटरपोलेशन (आमतौर पर आपकी अभिव्यक्ति {{}}) से संबंधित लगती है , न कि क्रॉस-डोमेन समस्या से। मूल रूप से ng-src="{{object.src}}"बेकार है।

ng-srcimgIMO को ध्यान में रखकर बनाया गया था । यह उपयुक्त नहीं हो सकता है <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

Comments

बस src और हार्ड कोडिंग का उपयोग करते हुए url, सब कुछ जैसा मैं चाहता हूं काम करता है। जैसे ही मैं {{object.src}} का उपयोग करता हूं, हालांकि src विशेषता को सोचा भी नहीं गया है। मैं आगे बढ़ गया और यहां तक ​​कि स्रोत टैग को हटा दिया और वीडियो टैग के साथ src इनलाइन डाल दिया, लेकिन अभी भी कुछ भी नहीं

— मैर्टिंगटन

मेरा मतलब है कि आपको यकीन है कि {{object.src}} का मान है? यह अपरिभाषित लौट सकता है।

— रोलां

{{object.src}} मान लौटा रहा है। <P> </ p> और एक <a> </a> का उपयोग करके इसका परीक्षण किया गया

— mhartington

शायद करने जा रहे हैं, पहले से ही यह पाया और यह बहुत अच्छा लग रहा है। videogular.com/# । मदद के लिए धन्यवाद

— मैन्टिंगटन

इसका ng-srcटूटने से कोई लेना-देना नहीं है (यह टूटा नहीं है)। यह AngularJS की सुरक्षा नीति के साथ करना है: docs.angularjs.org/api/ng/service/$sce

— Pauan

Answer 9

मुझे परीक्षणों में यह त्रुटि थी , निर्देश templateUrlपर भरोसा नहीं किया गया था, लेकिन केवल कल्पना के लिए, इसलिए मैंने टेम्पलेट निर्देशिका जोड़ी:

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

मेरी मुख्य निर्देशिका है app।