iframe'in içinde AngularJS ng-src

Question

Bir iframe'in içinde ng-src kullanımıyla ilgili bir sorunum var. Bunu yapmanız gerekir:

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

SONUCU:

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

Sorun $ sce, XSS bir korumadır ve bağlantı beyaz listeye eklendi gerektiğini biliyoruz. .. Bunu yaptığımda çalışıyor.

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

Ve Kontrolörün içinde tanımlayın:

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

Ama ng tekrarı ile döngü ediyorum çünkü bunu böyle yapamaz, bu nedenle bağlantı dinamik olarak oluşturulur. Veritabanından okunabilir olmalı!

Onun yerine bir filtre kullanabilirsiniz

Answer 1

:

HTML:

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

'yourURL' iframe ve 'trustAsResourceUrl' URL'sidir filtre ve (bazı modülünde olarak tanımlanır

gibi . örn filtreler-modülü gibi):

JS:

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

Ve bu filt kullanabilirsiniz Uygulamanızdaki tüm iframe'ler ve diğer gömülü öğeler. Bu filtre, yalnızca filtreyi ekleyerek güvenmeniz gereken tüm URL'leri dikkate alacaktır.

Answer 2

Tamam ben sorunun ne olduğunu buldum .. şimdi çalışıyor :)

Yapmam gereken tek şey ng-src linki bu yaratmak olduğunu filtre için teşekkür ederiz:

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

Belki bu birine yardım eder! O

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

Answer 3

Eğer

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

olarak js

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

ve çıkış ih html Diğer bazı filtre filtre eklemek gerekir Ben sadece bir tane varsa çalışır. Ama ng-repeat içinde çalışmıyor:/ {{apiUrl}} {{document. dizin}}/{{document.name}}. {{document.type}} Bu gibi bir bağlantı oluşturuyorum ..