반응형
iframe 내부 AngularJs ng-src
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>
XSS로부터의 보호인 $sce가 문제이며 링크를 화이트리스트에 추가해야 합니다.그래서 이렇게 하면 되는구나.
<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으로 루프하고 있기 때문에 그렇게 할 수 없기 때문에 그렇게 할 수 없습니다.데이터베이스에서 읽을 수 있어야 해요!
대신 필터를 사용할 수 있습니다.
HTML:
<iframe src="{{yourURL | trustAsResourceUrl}}"></iframe>
어디 갔지?URL'은 iframe의 URL이고 'trustAsResourceUrl'은 필터이며 일부 모듈(filters-module 등)에서는 다음과 같이 정의됩니다.
JS:
angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}])
또한 이 필터는 응용 프로그램의 모든 iframe 및 기타 임베디드 항목에서 사용할 수 있습니다.이 필터는 필터를 추가하는 것만으로 신뢰할 수 있는 모든 URL을 처리합니다.
그래, 뭐가 문제인지 알아냈어..필터 감사합니다.현재 동작하고 있습니다:)
ng-src 링크를 작성하기만 하면 됩니다.
<iframe ng-src="{{apiUrl+document.directory + '/' + document.name + '.'+ document.type | trustAsResourceUrl}}"
height="100%" width="100%">
</iframe>
이게 누군가에게 도움이 될지도 몰라! :)
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);
};
}]);
언급URL : https://stackoverflow.com/questions/24163152/angularjs-ng-src-inside-of-iframe
반응형
'source' 카테고리의 다른 글
$_POST에서 읽을 수 없는 Axios 게시 매개 변수 (0) | 2023.04.04 |
---|---|
표준 Scala 클래스를 사용하여 Scala에서 JSON을 해석하려면 어떻게 해야 합니까? (0) | 2023.04.04 |
스프링 부트 컨트롤러 엔드포인트 유닛테스트 작성 방법 (0) | 2023.04.04 |
Cross-Origin Resource Sharing(CORS) 사후 요청을 처리하는 방법 (0) | 2023.04.04 |
스프링 부트 1.4테스트: 구성 오류: @Bootstrap 선언이 여러 개 발견되었습니다.와 함께 (0) | 2023.04.04 |