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


214

我正在尝试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 );

}

我的问题似乎可以通过此方法解决,尽管我不太确定为什么。

Answers:


359

我怀疑看摘录的功能trustSrctrustSrc(currentProject.url)没有在控制器中定义。

您需要将$sce服务注入控制器及其trustAsResourceUrlurl

在控制器中:

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>

1
我按照您的建议使用$ sce进行了尝试。它导致错误消息消失,但是iframe的src属性仍然为空。
emersonthis

3
尝试使用trustAsResourceUrl
musicly_ut

9
...但是当我将其传递给ng-src属性时,此方法有效!谢谢。
emersonthis

2
@Emerson trustAsResourceUrl返回/ $sce.RESOURCE_URL所需的a ,而返回a 的保证较弱(根据文档,当前未使用)。iframeobjectstrustAsUrl$sce.URL
musicly_ut

1
除非我移除了双花括号(ng-src =“ currentProjectUrl”)
baacke 2015年

10

它是$sce阻止带有外部域的URL 的服务,它是向AngularJS提供严格的上下文转义服务,以防止诸如XSS,clickjacking等安全漏洞的服务。默认情况下,它在Angular 1.2中处于启用状态。

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

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

有关更多信息 https://docs.angularjs.org/api/ng/service/$sce


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);
        };
    }]);

2

请删除对trustSrc函数的调用,然后再试一次。{{trustSrc(currentProject.url)}}至{{currentProject.url}}。检查此链接http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview


但是根据Angular Js 1.2文档,您应该编写一个获取srcurl 的函数。看下面的代码。

之前:

Java脚本

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

HTML

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

但是出于安全原因,他们建议采用以下方法

Java脚本

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

HTML

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

文档提供此建议在情况下,一个被结合到一个以上的表达ng-srcsrc。角1.2起,一个可结合在仅一个表达srcng-src和建议是使用函数来检索代码的URL,如果需要的话。
musicly_ut

但是我认为您的代码中有一些错误。控制器应类似于此app.controller('AppCtrl',function($ scope){});
2013年

1
控制器也可以是全局可访问的功能
musicly_ut

好。检查此链接我用代码检查器检查了您的代码。plnkr.co/edit/caqS1jE9fpmMn5NofUve
Sajith

我注意到您的代码中有一个函数“ trustSrc”。请删除该功能,然后重试。{{trustSrc(currentProject.url)}}至{{currentProject.url}}
Sajith

0

选择模板;iframe控制器,ng模型更新

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


0

您还需要$sce.trustAsResourceUrl,否则它将无法在iframe中打开网站:

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>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.