অ্যাঙ্গুলারজেএস-এ কোনও চলক থেকে কীভাবে আইফ্রেমে এসসিআর অ্যাট্রিবিউট সেট করা যায়

Question

আমি srcএকটি চলক থেকে একটি iframe এর বৈশিষ্ট্য সেট করার চেষ্টা করছি এবং আমি এটি কাজ করতে পারি না ...

মার্কআপ:

<div class="col-xs-12" ng-controller="AppCtrl">

    <ul class="">
        <li ng-repeat="project in projects">
            <a ng-click="setProject(project.id)" href="">{{project.url}}</a>
        </li>
    </ul>

    <iframe  ng-src="{{trustSrc(currentProject.url)}}">
        Something wrong...
    </iframe>
</div>

কন্ট্রোলার / app.js:

function AppCtrl ($scope) {

    $scope.projects = {

        1 : {
            "id" : 1,
            "name" : "Mela Sarkar",
            "url" : "http://blabla.com",
            "description" : "A professional portfolio site for McGill University professor Mela Sarkar."
        },

        2 : {
            "id" : 2,
            "name" : "Good Watching",
            "url" : "http://goodwatching.com",
            "description" : "Weekend experiment to help my mom decide what to watch."    
        }
    };

    $scope.setProject = function (id) {
        $scope.currentProject = $scope.projects[id];
        console.log( $scope.currentProject );

    }
}

এই কোড সহ, iframe এর srcগুণাবলী মধ্যে কিছুই .োকানো হয় । এটা ঠিক ফাঁকা।

আপডেট 1: আমি $sceAppCtrl এবং $ sce.trustUrl () এ এখন নির্ভরতা ইনজেকশনের ত্রুটি ছুঁড়ে না ফেলে কাজ করে। তবে এটি প্রত্যাবর্তন করে TrustedValueHolderTypeযা আসল ইউআরএল inোকানোর জন্য কীভাবে ব্যবহার করব তা আমি নিশ্চিত নই। একই বৈশিষ্ট্যটি আমি ফিরিয়ে আছি $ sce.trustUrl () ব্যবহার করে ইন্টারপুলেশন ব্রেসের ভিতরে অ্যাট্রিবিউটে src="{{trustUrl(currentProjectUrl))}}"বা যদি আমি কন্ট্রোলারের ভিতরে এটি করি যদি বর্তমানপ্রজেক্ট ইউরেলের মান নির্ধারণ করি। এমনকি আমি উভয় সঙ্গে এটি চেষ্টা করেছিলাম।

আপডেট 2: আমি .toString () ব্যবহার করে বিশ্বস্ত ইউআরএলহোল্ডার থেকে ইউআরএলটি কীভাবে ফিরিয়ে আনতে পারি তা বুঝতে পেরেছি, কিন্তু যখন আমি এটি করি, এটি সিসিআর বৈশিষ্ট্যটিতে পাস করার চেষ্টা করার পরে এটি সুরক্ষা সতর্কতা নিক্ষেপ করে।

আপডেট 3: এটি যদি আমি কন্ট্রোলারে বিশ্বাসের রিসোর্স ইউআরএল () ব্যবহার করি এবং এটি এনজি-এসসিআর অ্যাট্রিবিউটের অভ্যন্তরে ব্যবহৃত একটি ভেরিয়েবলের কাছে পৌঁছে দিই তবে এটি কাজ করে:

$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    console.log( $scope.currentProject );
    console.log( $scope.currentProjectUrl );

}

আমার সমস্যা এটির দ্বারা সমাধান হয়ে গেছে বলে মনে হচ্ছে, যদিও আমি কেন তা নিশ্চিত তা নয়।

Answer 1

আমি উদ্ধৃতাংশ দিকে তাকিয়ে সন্দেহ ফাংশন trustSrcথেকে trustSrc(currentProject.url)নিয়ামক সংজ্ঞায়িত করা হয় না।

আপনাকে নিয়ামক এবং সেখানে $sceপরিষেবা ইনজেক্ট trustAsResourceUrlকরতে urlহবে।

নিয়ামকটিতে:

function AppCtrl($scope, $sce) {
    // ...
    $scope.setProject = function (id) {
      $scope.currentProject = $scope.projects[id];
      $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    }
}

টেমপ্লেটে:

<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>

Comments

আপনার সুপারিশ অনুসারে আমি এটি চেষ্টা করেছি $ এটি ত্রুটির বার্তাটি দূরে সরিয়ে দেয়, তবে iframe এর src বৈশিষ্ট্যটি এখনও খালি রয়েছে।

— এমারসন্থিস

ব্যবহার করার চেষ্টা করুন trustAsResourceUrl।

— musically_ut

... তবে আমি এনজি-এসসিআর অ্যাট্রিবিউটে পাস করার পরে এটি কাজ করে! ধন্যবাদ।

— এমারসন্থিস

@ এমারসন trustAsResourceUrlএকটি $sce.RESOURCE_URLপ্রয়োজনীয় গ্যারান্টির (এবং বর্তমানে ডকুমেন্টেশন অনুসারে অব্যবহৃত ) গ্যারান্টির এক ধরণের যা ফেরত দেওয়ার জন্য iframe/ objectsযখন প্রয়োজনীয় প্রয়োজন তা trustAsUrlফেরত $sce.URLদেয় ।

— musically_ut

ডাবল কোঁকড়া ধনুর্বন্ধনী (এনজি-এসসিআর = "বর্তমানপ্রজেক্ট ইউআরএল") না সরিয়ে না থাকলে এনজি-এসআরসি আমার পক্ষে কাজ করে না

— বাঁচকে

Answer 2

এটি সেই $sceপরিষেবা যা বাহ্যিক ডোমেনগুলির সাথে ইউআরএলকে ব্লক করে, এটি এমন একটি পরিষেবা যা এক্সএসএস, ক্লিকজ্যাকিং ইত্যাদির মতো সুরক্ষিত দুর্বলতাগুলি রোধ করতে অ্যাঙ্গুলারজেএস-কে কঠোর প্রাসঙ্গিক এস্কেপিং পরিষেবাদি সরবরাহ করে এটি এঙ্গুলার ১.২ এ ডিফল্টরূপে সক্ষম করা হয়েছে।

আপনি এটি পুরোপুরি অক্ষম করতে পারেন, তবে এটি প্রস্তাবিত নয়

angular.module('myAppWithSceDisabledmyApp', [])
   .config(function($sceProvider) {
       $sceProvider.enabled(false);
   });

আরও তথ্যের জন্য https://docs.angularjs.org/api/ng/service/$sce

Answer 3

এইভাবে আমি অনুসরণ করি এবং এটি আমার জন্য কাজটি ভাল, এটি আপনার পক্ষে কাজ করে

<iframe class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{
                height: iframeHeight * 0.75 + 'px'
            }" style="width:100%"></iframe>

এখানে বিশ্বাস এটির ইউরালটি কেবল ফিল্টার,

angular.module("app").filter('trustThisUrl', ["$sce", function ($sce) {
        return function (val) {
            return $sce.trustAsResourceUrl(val);
        };
    }]);

Answer 4

দয়া করে কলটি trustSrcফাংশন থেকে সরিয়ে ফেলুন এবং এর মতো আবার চেষ্টা করুন। S S trustSrc (কারেন্টপ্রজেক্ট.ুরল)}} থেকে {{কারেন্টপ্রজেক্ট.ুরল}}} এই লিঙ্কটি দেখুন http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p= পূর্বরূপ

---

তবে কৌণিক জেএস ১.২ ডকুমেন্টেশন অনুসারে আপনার srcইউআরএল পাওয়ার জন্য একটি ফাংশন লিখতে হবে । নীচের কোডটি দেখুন।

আগে:

জাভাস্ক্রিপ্ট

scope.baseUrl = 'page';
scope.a = 1;
scope.b = 2;

এইচটিএমএল

<!-- Are a and b properly escaped here? Is baseUrl controlled by user? -->
<iframe src="{{baseUrl}}?a={{a}&b={{b}}"

তবে সুরক্ষার কারণে তারা নিম্নলিখিত পদ্ধতিটি সুপারিশ করছে

জাভাস্ক্রিপ্ট

var baseUrl = "page";
scope.getIframeSrc = function() {

  // One should think about their particular case and sanitize accordingly
  var qs = ["a", "b"].map(function(value, name) {
      return encodeURIComponent(name) + "=" +
             encodeURIComponent(value);
    }).join("&");

  // `baseUrl` isn't exposed to a user's control, so we don't have to worry about escaping it.
  return baseUrl + "?" + qs;
};

এইচটিএমএল

<iframe src="{{getIframeSrc()}}">

Comments

ডকুমেন্টেশন এই পরামর্শটি সরবরাহ করে যদি এক ng-srcবা একাধিক এক্সপ্রেশন বা এর মধ্যে একাধিক এক্সপ্রেশন বাধ্যতামূলক হয় src। কৌণিক ১.২ এর পরে, কেবল একটিতে কেবল একটি এক্সপ্রেশন বাঁধতে পারে srcএবং ng-srcপ্রয়োজন অনুসারে কোনও ফাংশন ব্যবহার করে কোড থেকে একটি url পুনরুদ্ধার করার পরামর্শ।

— musically_ut

তবে আমি মনে করি আপনার কোডটিতে কিছু ভুল আছে। কন্ট্রোলারটি এই অ্যাপকন্ট্রোলারের মতো হওয়া উচিত ('AppCtrl', ফাংশন ($ স্কোপ) {});

— সাজিত

কন্ট্রোলাররা বিশ্বব্যাপী অ্যাক্সেসযোগ্য ফাংশনও হতে পারে ।

— musically_ut

ঠিক আছে. এই লিঙ্কটি পরীক্ষা করে দেখুন আমি আপনার কোডটি প্লামকারের সাথে চেক করেছি। plnkr.co/edit/caqS1jE9fpmMn5NofUve

— সাজিত

আমি আপনার কোডে একটি "ফাংশন" ট্রাস্টএসসিআর "লক্ষ্য করেছি। দয়া করে সেই ফাংশনটি সরিয়ে দিন এবং এর মতো আবার চেষ্টা করুন। S S trustSrc (কারেন্টপ্রজেক্ট.ুরল)}} থেকে {{কারেন্টপ্রজেক্ট.ুর্ল}}

— সাজিত

Answer 5

টেম্পলেট নির্বাচন করুন; iframe নিয়ামক, মডেল আপডেট

index.html

angularapp.controller('FieldCtrl', function ($scope, $sce) {
        var iframeclass = '';
        $scope.loadTemplate = function() {
            if ($scope.template.length > 0) {
                // add iframe classs
                iframeclass = $scope.template.split('.')[0];
                iframe.classList.add(iframeclass);
                $scope.activeTemplate = $sce.trustAsResourceUrl($scope.template);
            } else {
                iframe.classList.remove(iframeclass);
            };
        };

    });
    // custom directive
    angularapp.directive('myChange', function() {
        return function(scope, element) {
            element.bind('input', function() {
                // the iframe function
                iframe.contentWindow.update({
                    name: element[0].name,
                    value: element[0].value
                });
            });
        };
    });

iframe.html

   window.update = function(data) {
        $scope.$apply(function() {
            $scope[data.name] = (data.value.length > 0) ? data.value: defaults[data.name];
        });
    };

এই লিঙ্কটি দেখুন: http://plnkr.co/edit/TGRj2o?p= পূর্বরূপ

Answer 6

আপনারও দরকার $sce.trustAsResourceUrlবা এটি আইফ্রেমে ওয়েবসাইট খুলবে না:

angular.module('myApp', [])
    .controller('dummy', ['$scope', '$sce', function ($scope, $sce) {

    $scope.url = $sce.trustAsResourceUrl('https://www.angularjs.org');

    $scope.changeIt = function () {
        $scope.url = $sce.trustAsResourceUrl('https://docs.angularjs.org/tutorial');
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="dummy">
    <iframe ng-src="{{url}}" width="300" height="200"></iframe>
    <br>
    <button ng-click="changeIt()">Change it</button>
</div>