[javascript] AngularJS의 변수에서 iframe src 속성을 설정하는 방법

JAVASCRIPT / 글쓴이

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 :$sce 의존성을 AppCtrl에
주입했으며 $ 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 );

}

왜 그런지는 모르겠지만 내 문제는 이것으로 해결 된 것 같습니다.

답변

나는 기능을하는 발췌보고이 의심 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>

답변

그것은이다 $sce외부 도메인과 URL을 차단, 그것은 등 XSS, 클릭 재킹 등의 보안 취약점이 각도 1.2에서 기본적으로 활성화되어을 방지하기 위해, AngularJS와에 엄격한 상황 이스케이프 서비스를 제공하는 서비스입니다 서비스를 제공합니다.

완전히 비활성화 할 수 있지만 권장하지 않습니다

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

자세한 내용은
https://docs.angularjs.org/api/ng/service/$sce

답변

이런 식으로 내가 따라와 그 작품은 잘 작동합니다.

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

답변

trustSrc함수 호출을 제거하고 다음과 같이 다시 시도하십시오. {{trustSrc (currentProject.url)}}에서 {{currentProject.url}}까지 이 링크를 확인하십시오 http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview

그러나 Angular Js 1.2 Documentation에 따르면 srcURL 을 가져 오는 함수를 작성해야합니다 . 다음 코드를 살펴보십시오.

전에:

자바 스크립트

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

그러나 보안상의 이유로 다음 방법을 권장합니다.

자바 스크립트

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()}}">

답변

템플릿 선택; iframe 컨트롤러, 모델 업데이트

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

답변

또한 필요 $sce.trustAsResourceUrl하거나 iframe 내부의 웹 사이트를 열지 않습니다.

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>

스 니펫 확장

답변