جاوااسکریپت - چگونه میتوان یک ویژگی src برای iframe از یک متغیر در AngularJS تنظیم کرد

من دارم سعی میکنم ویژگی 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 );

    }
}

با این کد، هیچ چیزی در ویژگی src آیفریم وارد نمیشود. فقط خالی است.

بهروزرسانی 1: من وابستگی $sce را در AppCtrl تزریق کردم و حالا $sce.trustUrl() بدون ایجاد خطا کار میکند. با این حال، این تابع TrustedValueHolderType برمیگرداند که مطمئن نیستم چگونه باید از آن برای وارد کردن یک URL واقعی استفاده کنم. همان نوع بازگردانده میشود چه از $sce.trustUrl() داخل آکولادهای مابین در ویژگی src="{{trustUrl(currentProjectUrl)}}" استفاده کنم یا اگر آن را داخل کنترلر هنگام تعیین مقدار currentProjectUrl انجام دهم. حتی سعی کردم با هر دو روش امتحان کنم.

بهروزرسانی ۲: من فهمیدم چگونه میتوان url را از trustedUrlHolder با استفاده از .toString() برگرداندم، اما وقتی این کار را انجام میدهم، هشدار امنیتی نمایش داده میشود وقتی که سعی میکنم آن را به ویژگی src منتقل کنم.

بهروزرسانی ۳: این کار میکند اگر من از trustAsResourceUrl() در کنترلر استفاده کنم و آن را به یک متغیر که داخل ویژگی ng-src استفاده میشود، منتقل کنم:

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

}

به نظر میرسد مشکل من با این حل شده است، اگرچه کاملاً مطمئن نیستم چرا.

پاسخ شماره ۱

من با نگاه کردن به بخش کوتاه متن شک دارم که تابع trustSrc از trustSrc(currentProject.url) در کنترلر تعریف نشده باشد.

شما باید سرویس $sce را در کنترلر تزریق کرده و url را در آنجا با trustAsResourceUrl مورد اعتماد قرار دهید.

در کنترلر:

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>

پاسخ شماره ۲

این سرویس $sce است که URL های دارای دامنه های خارجی را مسدود می کند. این سرویسی است که سرویسcهای Strict Contextual Ecaping (SCE) را به AngularJS برای جلوگیری از آسیبcپذیریcهای امنیتی مانند XSS، clickjacking و غیره ارائه میcکند. این سرویس به طور پیش فرض در Angular 1.2 فعال است.

شما میتوانید آن را به طور کامل غیرفعال کنید، اما توصیه نمیشود

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

برای اطلاعات بیشتر https://docs.angularjs.org/api/ng/service/$sce