iframe 中的 AngularJS ng-src [英] AngularJS ng-src inside of iframe

问题描述

我在 iframe 中使用 ng-src 时遇到问题.我需要这样做:

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

结果:

<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的保护，并且需要将链接添加到白名单中......所以当我这样做时它可以工作.

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

我在控制器内部定义:

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

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

解决方案

您可以改用过滤器:

HTML:

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

其中 'yourURL' 是 iframe 的 URL，'trustAsResourceUrl' 是过滤器，在某些模块(例如过滤器模块)中定义为:

JS:

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

并且您可以在应用程序中的所有 iframe 和其他嵌入项目中使用此过滤器.只需添加过滤器，此过滤器就会处理您需要信任的所有网址.

I have a problem using ng-src inside of an iframe. I need to do this:

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

RESULT:

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

I know that the problem is $sce, which is a protection from XSS, and that the link needs to be added to the whitelist... So it is working when I do this.

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

And I define inside the controller:

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

But I can't do it like that because I'm looping with ng-repeat, so the link is generated dynamically. It need's to be readable from the database!

解决方案

You can use a filter instead:

HTML:

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

where 'yourURL' is the URL of the iframe and 'trustAsResourceUrl' is the filter and is defined as in some module(like eg. filters-module) as:

JS:

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

And you can use this filter in all the iframes and other embedded items in your application. This filter will take care of all the urls that you need to trust just by adding the filter.

这篇关于iframe 中的 AngularJS ng-src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！