[Javascript] Как установить атрибут iframe src из переменной в AngularJS


Answers

Это служба $ sce, которая блокирует Urls с внешними доменами, это служба, предоставляющая услуги Strict Contextual Escaping для AngularJS, для предотвращения уязвимостей безопасности, таких как XSS, clickjacking и т. Д., По умолчанию она включена в Angular 1.2.

вы можете полностью отключить его, но это не рекомендуется

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

для получения дополнительной информации https://docs.angularjs.org/api/ng/service/ $ sce

Question

Я пытаюсь установить атрибут 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>

Контроллеры / 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 );

    }
}

С помощью этого кода ничто не будет вставлено в атрибут src iframe. Это просто пусто.

Обновление 1: я ввел зависимость $sce в AppCtrl, а $ sce.trustUrl () теперь работает без ошибок. Однако он возвращает TrustedValueHolderType который я не уверен, как использовать для вставки фактического URL. Тот же тип возвращается, если я использую $ sce.trustUrl () внутри привязок интерполяции в атрибуте src="{{trustUrl(currentProjectUrl))}}" или если я делаю это внутри контроллера при установке значения currentProjectUrl. Я даже попробовал это с обоими.

Обновление 2: я понял, как вернуть URL-адрес из trustedUrlHolder, используя .toString (), но когда я это делаю, он выдает предупреждение о безопасности, когда я пытаюсь передать его в атрибут 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 );

}

Моя проблема, похоже, решена этим, хотя я не совсем понимаю, почему.




таким образом я следую, и его работа для меня прекрасна, может это сработает для вас,

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



Links