বাহ্যিক সংস্থান 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):/);

আমি ক্রস ডোমেন ইস্যু সম্পর্কে এই পোস্টটি দেখেছি তবে আমি কীভাবে এটি সমাধান করব বা আমার কোন দিকে যেতে হবে তা নিশ্চিত নই। কোনও ধারণা? কোন সাহায্য প্রশংসা করা হয়

Comments

আপনি কি নিজের কর্পডা config.xmlফাইল পোস্ট করতে পারেন ?

— অ্যান্ড্রু শুস্তারিভ

এই মুহুর্তে আমি এখনও ব্রাউজারে পরীক্ষা করছি যাতে আমি আমার ফোনগ্যাপ ডিবাগিংও শুরু করি নি।

— মার্চিংটন

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 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 ব্যবহার করতে পারেন

— রিঙ্গো

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

অবশ্যই সবচেয়ে মার্জিত এবং কৌণিক সমাধান।

— Sc0ত্তিD

আমার জন্য কাজ করেছেন এবং সত্যই এটি আইফ্রেমে ব্যবহার করার চেয়ে ভাল n

— থমাস আমার

সর্বোত্তম উত্তর, আরও কৌণিক স্পিরিট এবং এটি কাজ করেছে যেখানে অন্যেরা কোনও কারণে সমাধান না করে। অনেক ধন্যবাদ!

— ফ্লোরিবন

Answer 3

$ SceDelegateProvider সহ রিসোর্সটি শ্বেত তালিকাভুক্ত করুন

এটি কৌণিক 1.2 তে স্থাপন করা একটি নতুন সুরক্ষা নীতি দ্বারা ঘটে is এটি হ্যাকারকে ডায়াল আউট করা থেকে বিরত রেখে এক্সএসএসকে আরও শক্ত করে তোলে (অর্থাত্ কোনও বিদেশী ইউআরএলকে অনুরোধ করা, সম্ভাব্য পে-লোড সহ)।

এটিকে যথাযথভাবে পাওয়ার জন্য আপনার যে ডোমেনগুলি মঞ্জুর করতে চান সেগুলি হাইটলিস্ট করা দরকার, এর মতো:

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

এই কাজটি করার জন্য আপনার অ্যাপ্লিকেশনে এনজিএসিটাইজ অন্তর্ভুক্ত করার বিষয়ে নিশ্চিত হন।

বৈশিষ্ট্যটি অক্ষম করা হচ্ছে

আপনি যদি এই দরকারী বৈশিষ্ট্যটি বন্ধ করতে চান এবং আপনি নিশ্চিত যে আপনার ডেটা সুরক্ষিত রয়েছে, আপনি কেবল ** এর মতো অনুমতি দিতে পারবেন:

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

Comments

দ্রষ্টব্য: যদি resourceUrlWhitelistকোনওভাবে আপনার পক্ষে কাজ না করে তবে আপনার ডোমেন নামের পরে ডাবল স্ল্যাশ নেই কিনা তা পরীক্ষা করুন (ভেরিয়েবল থেকে

— স্টাটকে কনটেনেট করার সময় এটির

এই সমস্যাটি ঘুরে দেখার এটি একটি ক্লিনার, গ্লোবাল এবং সুরক্ষিত উপায়।

— ডিজে।

"ডায়াল আউট" কোনও সমস্যাটি বোঝার চেষ্টা করছে এমন ব্যক্তির পক্ষে ব্যবহার করা দুর্দান্ত শব্দ নয়।

— রিঙ্গো

ধন্যবাদ @ রিঙ্গো - আমি স্পষ্ট করে একটি মন্তব্য যুক্ত করেছি।

— সুপারলুমিনি

Answer 4

এখানে একই সমস্যা ছিল। আমার ইউটিউব লিঙ্কগুলিতে আবদ্ধ হওয়া দরকার। বিশ্বব্যাপী সমাধান হিসাবে আমার পক্ষে যা কাজ করেছে তা হ'ল আমার কনফিগারেশনে নিম্নলিখিতগুলি যুক্ত করা:

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

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

}]);

সেখানে 'স্ব' যুক্ত করা গুরুত্বপূর্ণ - অন্যথায় কোনও ইউআরএল বাঁধতে ব্যর্থ হবে। থেকে কৌণিক ডক্স

'স্ব' - বিশেষ স্ট্রিং, 'স্ব', একই প্রোটোকল ব্যবহার করে অ্যাপ্লিকেশন ডকুমেন্টের মতো একই ডোমেনের সমস্ত ইউআরএলগুলির সাথে মেলে।

সেই জায়গায়, আমি এখন যে কোনও ইউটিউব লিঙ্কে সরাসরি বাঁধতে সক্ষম।

আপনাকে অবশ্যই আপনার প্রয়োজন অনুসারে রেজেক্সটি কাস্টমাইজ করতে হবে। আশা করি এটা সাহায্য করবে!

Answer 5

এই সমস্যাটি সমাধানের জন্য সর্বোত্তম এবং সহজ সমাধান হ'ল এই ফাংশন থেকে আপনার ডেটাটি নিয়ামককে পাস করা।

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

এইচটিএমএল পৃষ্ঠায়

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

Answer 6

আমি ভিডিয়োগুলার ব্যবহার করে একই সমস্যায় পড়েছি। এনজি-এসসিআর ব্যবহার করার সময় আমি নিম্নলিখিতগুলি পেয়েছিলাম:

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>

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-srcimgআইএমও মাথায় রেখে ডিজাইন করা হয়েছিল । এটি উপযুক্ত নাও হতে পারে <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

স্রেফ এসসিআর এবং হার্ড কোডিং ইউআরএল ব্যবহার করে সমস্ত কিছু আমার ইচ্ছামতো কাজ করে। যত তাড়াতাড়ি আমি {{অবজেক্ট.সিআরসি} use ব্যবহার করি তবুও এসসিআর অ্যাট্রিবিউটটি চিন্তাভাবনাও পাস করে নি। আমি এগিয়ে গিয়েছিলাম এমনকি সোর্স

— ট্যাগটিও সরিয়েছি

আমি বলতে চাইছি আপনি কি নিশ্চিত যে {{object.src}? একটি মান ফেরত দেয়? এটি অপরিশোধিত ফিরে আসতে পারে।

— রোল্যান্ড

returning {object.src} একটি মান ফিরিয়ে দিচ্ছে। এটি একটি <p> </p> এবং একটি <a> </a> ব্যবহার করে পরীক্ষিত হয়েছে

— 22-25

সম্ভবত করতে হবে, ইতিমধ্যে এটি খুঁজে পেয়েছে এবং এটি বেশ ভাল দেখাচ্ছে। ভিডিওগুলার . com/# । সহায়তার জন্য ধন্যবাদ

— 21-28

এটি ng-srcভেঙে যাওয়ার সাথে কিছুই করার নেই (এটি ভাঙ্গা নয়)। এটি অ্যাংুলারজেএস

— এন

Answer 9

পরীক্ষাগুলিতে আমার এই ত্রুটি ছিল , নির্দেশটি templateUrlবিশ্বাসযোগ্য ছিল না, তবে কেবল অনুমানের জন্য, তাই আমি টেম্পলেট ডিরেক্টরিটি যুক্ত করেছি:

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

আমার প্রধান ডিরেক্টরি হয় app।