iframe中的AngularJS ng-src

Question

我在iframe中使用ng-src时遇到了问题。我需要这样做：

<div class="tab-content">
        <ul class="nav nav-tabs" ng-repeat="document in issues.Document">
            <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
                <iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%"></iframe>                    
            </div>
        </ul>
    </div>

结果：

<iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%" src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}"></iframe>

我知道问题出在$sce，这是一种对XSS的保护，链接需要添加到白名单中……所以当我这样做的时候，它是起作用的。

<ul class="nav nav-tabs" ng-repeat="document in issues.Document">
    <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
         <iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>                    
     </div>
</ul>

我在控制器内部定义：

$rootScope.someUrl = $sce.trustAsResourceUrl('http://192.168.223.110/cat/files/incoming/12345_3232ASD_pero.pdf');

但我不能这样做，因为我使用ng-repeat循环，所以链接是动态生成的。它需要能够从数据库中读取！

Answer 1

您可以改用筛选器：

HTML：

<iframe src="{{yourURL | trustAsResourceUrl}}"></iframe>

其中'yourURL‘是iframe的URL，'trustAsResourceUrl’是过滤器，在某些模块中定义(例如，filters-module)作为：

JS：

angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])

您可以在应用程序中的所有iframe和其他嵌入式项中使用此过滤器。此筛选器只需添加筛选器即可处理您需要信任的所有urls。

Answer 2

好了，我找到问题所在了。感谢您的过滤器，它现在可以工作了:)

我所需要做的就是创建ng-src链接：

<iframe ng-src="{{apiUrl+document.directory + '/' + document.name + '.'+ document.type   | trustAsResourceUrl}}"
        height="100%" width="100%">
</iframe>

也许这对某些人有帮助！:)

Answer 3

正如Kop4lyf所说，您需要在js中添加过滤器

//Create a filter for trust url
    app.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

并将ih html输出为

ng-src="{{x.title.rendered | trustAsResourceUrl}}"

其他一些过滤器：

//Create a filter for trust html
    app.filter('trustAsHtml', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
}]);