iframe内的AngularJS ng-src

一尘不染

iframe内的AngularJS ng-src

angularjs

我在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循环，所以链接是动态生成的。必须从数据库中读取它！

阅读 259

2020-07-04

共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和其他嵌入式项目中使用此过滤器。仅添加过滤器，此过滤器便会处理您需要信任的所有URL。

2020-07-04