在AngularJS中从受信任的源插入iframe

Question

试图使用ng-bind-htmlAngularJS将iframe插入页面，即使是最简单的形式，我也无法使其工作。

Java脚本

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

我的HTML：

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

Answer 1

您需要使用$
sce
服务来告诉angular在视图上呈现html内容

Angular Doc说

$ sce是一项为AngularJS 提供 严格的上下文转义
服务的服务。SCE通过以下方式帮助编写代码：（a）默认情况下是安全的，并且（b）使得对安全漏洞（例如XSS，clickjacking等）的审核变得更加容易。

在此之前，您需要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);
}]);

这是工作小提琴