Вставка iframe из надежного источника в AngularJS

Question

Пытаясь использовать ng-bind-html вставить iframe на страницу с AngularJS, и я не могу заставить его работать даже в самой простой форме.

Javascript

function Ctrl($scope) {
   $scope.showIt = '<iframe src="http://www.anything.com"></iframe>';
}

Мой HTML:

<div ng-bind-html="showIt"></div>

Answer 1

Вам нужно использовать сервис $ sce, чтобы сообщить angular для рендеринга html-контента на виде

Угловой Док говорит

$ sce - это сервис, который предоставляет сервисы Strict Contextual Escape для AngularJS. SCE помогает в написании кода таким образом, что (а) по умолчанию является безопасным и (б) значительно упрощает аудит на наличие уязвимостей безопасности, таких как XSS, перехват кликов и т. Д.

Прежде чем сделать это, вам нужно ввести ngSanitize зависимость внутри вашего приложения

Вы можете сделать это двумя способами, используя filter или же controller

HTML

<div ng-app="app" ng-controller="mainCtrl">
    Using Filter
    <div ng-bind-html="showIt | toTrusted"></div>
    Using Controller
    <div ng-bind-html="htmlSafe(showIt)"></div>
</div>

Код JavaScript

var app = angular.module('app', ['ngSanitize']).
controller('mainCtrl', function ($scope, $sce) {
    $scope.showIt = '<iframe src="http://www.anything.com"></iframe>';
    $scope.htmlSafe = function (data) {
        return $sce.trustAsHtml(data);
    }
}).
filter('toTrusted', function ($sce) {
    return function (value) {
        return $sce.trustAsHtml(value);
    };
});

Начиная с версии Angular 1.2 и выше функция $ sce включена для следующей версии, вы должны включить / отключить ее в фазе конфигурации angular.

app.config(['$sceProvider', function($sceProvider) {
    $sceProvider.enabled(true);
}]);

Вот рабочая скрипка