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




cordova (6)

$ SceDelegateProvider के साथ संसाधन whitelist

यह कोणीय 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(['**']);
});

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

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


अगर कोई टाइपस्क्रिप्ट समाधान ढूंढ रहा है:

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

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

ng-src आईएमओ दिमाग में img टैग के साथ डिजाइन किया गया था। यह <source> लिए उपयुक्त नहीं हो सकता है। http://docs.angularjs.org/api/ng.directive:ngSrc देखें

यदि आप <source src="somesite.com/myvideo.mp4"; type="video/mp4"/> घोषित करते हैं <source src="somesite.com/myvideo.mp4"; type="video/mp4"/> <source src="somesite.com/myvideo.mp4"; type="video/mp4"/> , यह काम करेगा, है ना? (ध्यान दें कि मैं ng-src के पक्ष में ng-src को हटाता हूं) यदि नहीं, तो इसे पहले ठीक किया जाना चाहिए।

फिर सुनिश्चित करें कि {{object.src}} अपेक्षित मान देता है ( <video> बाहर ):

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

यदि यह अपेक्षित मूल्य देता है, तो निम्न कथन काम करना चाहिए:

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

फिल्टर बनाने के लिए एक और आसान समाधान है:

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>

मैं वीडियोगुलर का उपयोग कर एक ही समस्या में भाग गया। एनजी-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);
  }
};
});

एचटीएमएल:

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

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

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







cordova