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 반복에 반복 해요 때문에 나는 그런 식으로 그것을 할 수 없기 때문에 링크는 동적으로 생성됩니다. 그것은 데이터베이스에서 읽을 수 있어야합니다!

당신은 대신 필터를 사용할 수 있습니다

Answer 1

:

HTML :

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

'yourURL'는 IFRAME과 'trustAsResourceUrl'의 URL 필터이며 (일부 모듈로 정의된다

같은 . 예를 들어, 필터 모듈 등) :

JS :

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

그리고 당신이 여과 및 분리를 사용할 수 있습니다 어플 리케이션의 모든 iframe 및 기타 포함 된 항목에서 이 필터는 필터를 추가하여 신뢰해야하는 모든 URL을 처리합니다.

Answer 2

가 좋아 나는 문제가 무엇인지 발견 .. 가 지금 노력하고 있습니다 :)

내가 할 필요가 모든 NG-SRC 링크이 만드는 것이었다 해당 필터 주셔서 감사합니다 :

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

을 아마 이것은 누군가에게 도움이 될 것입니다! 그

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

Answer 3

는 당신은

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

로 JS

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

및 출력 IH의 HTML에서 다른 어떤 필터를 필터를 추가 할 필요가 하나만있는 경우 작동하지만 .. ng-repeat 내부에서 작동하지 않습니다./ {{apiUrl}} {{document. 디렉토리}}/{{document.name}}. {{document.type}} 나는 이와 같은 링크를 만들고 있습니다 ..