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

javascript angularjs html iframe angularjs-directive

2022-08-30 01:03:36

我正在尝试从变量设置iframe的属性，但我无法让它工作...src

标记：

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

控制器/应用程序.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：我将依赖性注入到 AppCtrl 中，$sce.trustUrl（）现在可以正常工作，而不会引发错误。但是，它返回我不确定如何使用它来插入实际的URL。无论我在属性的插值大括号内使用$sce.trustUrl（），还是在控制器内设置 currentProjectUrl 的值时执行此操作，都会返回相同的类型。我甚至尝试了两者。$sceTrustedValueHolderTypesrc="{{trustUrl(currentProjectUrl))}}"

更新 2：我想出了如何使用.toString（）从受信任的UrlHolder返回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 );

}

我的问题似乎通过这个解决了，尽管我不太确定为什么。

答案 1

我怀疑查看摘录，该函数未在控制器中定义。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>

答案 2

它是阻止具有外部域的URL的服务，它是向AngularJS提供严格上下文转义服务的服务，以防止XSS，点击劫持等安全漏洞。$sce

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

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