web-dev-qa-db-ja.com

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>

問題は$ 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でループしているため、そのようにはできません。そのため、リンクは動的に生成されます。データベースから読み取り可能である必要があります！

javascriptangularjsiframe
30
Tindtrelle

代わりにフィルターを使用できます。

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を処理します。

79
Kop4lyf

[OK]を私は問題が何であるかを見つけた..それが今働いているそのフィルターをありがとう:)

私がする必要があるのは、ng-srcリンクを作成することだけです：

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

たぶんこれは誰かに役立ちます！ :)

4
Tindtrelle

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);
    };
}]);
1
Abdelhadi Abdo