AngularJSの変数からiframe src属性を設定する方法


214

src変数からiframe の属性を設定しようとしていますが、機能させることができません...

マークアップ:

<div class="col-xs-12" ng-controller="AppCtrl">

    <ul class="">
        <li ng-repeat="project in projects">
            <a ng-click="setProject(project.id)" href="">{{project.url}}</a>
        </li>
    </ul>

    <iframe  ng-src="{{trustSrc(currentProject.url)}}">
        Something wrong...
    </iframe>
</div>

controllers / app.js:

function AppCtrl ($scope) {

    $scope.projects = {

        1 : {
            "id" : 1,
            "name" : "Mela Sarkar",
            "url" : "http://blabla.com",
            "description" : "A professional portfolio site for McGill University professor Mela Sarkar."
        },

        2 : {
            "id" : 2,
            "name" : "Good Watching",
            "url" : "http://goodwatching.com",
            "description" : "Weekend experiment to help my mom decide what to watch."    
        }
    };

    $scope.setProject = function (id) {
        $scope.currentProject = $scope.projects[id];
        console.log( $scope.currentProject );

    }
}

このコードでは、iframeのsrc属性には何も挿入されません。空白です。

アップデート1: 私は注射し$sceAppCtrlと$ sce.trustUrl(に依存)は、現在のエラーをスローせずに動作します。ただしTrustedValueHolderType、実際のURLを挿入するために使用する方法がわからないものを返します。属性の補間ブレース内で$ sce.trustUrl()を使用したsrc="{{trustUrl(currentProjectUrl))}}"場合でも、currentProjectUrlの値を設定するときにコントローラー内で使用した場合でも、同じタイプが返されます。両方で試してみました。

更新2: .toString()を使用してtrustedUrlHolderからURLを返す方法を理解しましたが、その場合、src属性に渡そうとするとセキュリティ警告がスローされます。

更新3: コントローラーでtrustAsResourceUrl()を使用し、それをng-src属性内で使用される変数に渡すと機能します。

$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    console.log( $scope.currentProject );
    console.log( $scope.currentProjectUrl );

}

私の問題はこれで解決したようですが、理由はよくわかりません。

回答:


359

trustSrcからの関数trustSrc(currentProject.url)がコントローラーで定義されていないという抜粋を調べていると思います。

あなたは、注入する必要がある$sceサービスをコントローラーとであり。trustAsResourceUrlurl

コントローラで:

function AppCtrl($scope, $sce) {
    // ...
    $scope.setProject = function (id) {
      $scope.currentProject = $scope.projects[id];
      $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
    }
}

テンプレート内:

<iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe>

1
$ sceで試してみました。エラーメッセージが表示されなくなりますが、iframeのsrc属性はまだ空です。
emersonthis 2013年

3
を使用してみてくださいtrustAsResourceUrl
musically_ut

9
...しかし、これはng-src属性に渡したときに機能します!ありがとう。
emersonthis 2013年

2
@Emerson trustAsResourceUrlは/に$sce.RESOURCE_URL必要なa を返しますが、これは弱い保証であるa を返します(ドキュメントでは現在未使用です)。iframeobjectstrustAsUrl$sce.URL
musically_ut

1
二重中括弧(ng-src = "currentProjectUrl")を削除しない限り、ng-srcは機能しませんでした
baacke

10

これは$sce外部ドメインでURLをブロックするサービスであり、XSSやクリックジャッキングなどのセキュリティの脆弱性を防止するために、AngularJSに厳格なコンテキストエスケープサービスを提供するサービスです。Angular1.2ではデフォルトで有効になっています。

完全に無効にすることができますが、お勧めしません

angular.module('myAppWithSceDisabledmyApp', [])
   .config(function($sceProvider) {
       $sceProvider.enabled(false);
   });

詳細については https://docs.angularjs.org/api/ng/service/$sce


3

このように私は従い、その仕事は私にとってうまくいきます。

<iframe class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{
                height: iframeHeight * 0.75 + 'px'
            }" style="width:100%"></iframe>

ここでtrustThisUrlは単なるフィルターです。

angular.module("app").filter('trustThisUrl', ["$sce", function ($sce) {
        return function (val) {
            return $sce.trustAsResourceUrl(val);
        };
    }]);

2

trustSrc関数の呼び出しを削除して、このように再試行してください。{{trustSrc(currentProject.url)}}から{{currentProject.url}}へ。このリンクを確認してくださいhttp://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview


しかし、Angular Js 1.2 Documentationによれば、srcURL を取得するための関数を書く必要があります。次のコードを見てください。

前:

Javascript

scope.baseUrl = 'page';
scope.a = 1;
scope.b = 2;

HTML

<!-- Are a and b properly escaped here? Is baseUrl controlled by user? -->
<iframe src="{{baseUrl}}?a={{a}&b={{b}}"

ただし、セキュリティ上の理由から、次の方法を推奨しています。

Javascript

var baseUrl = "page";
scope.getIframeSrc = function() {

  // One should think about their particular case and sanitize accordingly
  var qs = ["a", "b"].map(function(value, name) {
      return encodeURIComponent(name) + "=" +
             encodeURIComponent(value);
    }).join("&");

  // `baseUrl` isn't exposed to a user's control, so we don't have to worry about escaping it.
  return baseUrl + "?" + qs;
};

HTML

<iframe src="{{getIframeSrc()}}">

ドキュメントでは、ng-srcまたはで複数の式にバインドしている場合にこのアドバイスを提供していますsrc。アンギュラ1.2以降、1は中に一つだけの式に結合することができ、srcかつng-src、必要に応じてアドバイスは、機能を使用してコードからURLを取得することです。
musically_ut

しかし、私はあなたのコードにいくつかの間違いがあると思います。コントローラは、このapp.controller( 'AppCtrl'、function($ scope){});のようにする必要があります。
Sajith 2013年

1
コントローラは、グローバルにアクセス可能な機能にすることもできます。
musically_ut

OK。このリンクをチェックしてください私はあなたのコードをplunkerでチェックしました。plnkr.co/edit/caqS1jE9fpmMn5NofUve
Sajith、

コードに「trustSrc」という関数があることに気づきました。その関数を削除して、このように再試行してください。{{trustSrc(currentProject.url)}}から{{currentProject.url}}へ
Sajith、2013年

0

テンプレートを選択します。iframeコントローラー、ngモデルの更新

index.html

angularapp.controller('FieldCtrl', function ($scope, $sce) {
        var iframeclass = '';
        $scope.loadTemplate = function() {
            if ($scope.template.length > 0) {
                // add iframe classs
                iframeclass = $scope.template.split('.')[0];
                iframe.classList.add(iframeclass);
                $scope.activeTemplate = $sce.trustAsResourceUrl($scope.template);
            } else {
                iframe.classList.remove(iframeclass);
            };
        };

    });
    // custom directive
    angularapp.directive('myChange', function() {
        return function(scope, element) {
            element.bind('input', function() {
                // the iframe function
                iframe.contentWindow.update({
                    name: element[0].name,
                    value: element[0].value
                });
            });
        };
    });

iframe.html

   window.update = function(data) {
        $scope.$apply(function() {
            $scope[data.name] = (data.value.length > 0) ? data.value: defaults[data.name];
        });
    };

このリンクを確認してください:http : //plnkr.co/edit/TGRj2o?p=preview


0

また$sce.trustAsResourceUrl、iframe内でWebサイトが開かない場合も必要です。

angular.module('myApp', [])
    .controller('dummy', ['$scope', '$sce', function ($scope, $sce) {

    $scope.url = $sce.trustAsResourceUrl('https://www.angularjs.org');

    $scope.changeIt = function () {
        $scope.url = $sce.trustAsResourceUrl('https://docs.angularjs.org/tutorial');
    }
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="dummy">
    <iframe ng-src="{{url}}" width="300" height="200"></iframe>
    <br>
    <button ng-click="changeIt()">Change it</button>
</div>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.