如何从AngularJS中的变量设置iframe src属性

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: 我将$sce依赖项注入AppCtrl,$ sce.trustUrl()现在可以正常工作而不会抛出错误.然而,它返回TrustedValueHolderType我不知道如何使用插入实际的URL.无论我在属性中的插值括号内使用$ sce.trustUrl()src="{{trustUrl(currentProjectUrl))}}"还是在设置currentProjectUrl的值时在控制器内部执行它,都会返回相同的类型.我甚至试过两个.

更新2: 我想出了如何使用.toString()从trustedUrlHolder返回url,但是当我这样做时,它会在我尝试将其传递给src属性时抛出安全警告.

更新3: 如果我在控制器中使用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 );

}

我的问题似乎已经解决了,虽然我不太清楚为什么.

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>

Answer 2

它是$ sce服务阻止Urls与外部域,它是一个服务,为AngularJS提供严格的上下文转义服务,以防止安全漏洞,如XSS,点击劫持等,它在Angular 1.2中默认启用.

你可以完全禁用它,但不建议这样做

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>

这里 trustThisUrl 只是过滤器，

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