在 AngularJS 中插入来自可信源的 iframe

Question

尝试使用ng-bind-html将iframe插入到AngularJS的页面中，我甚至无法让它以最简单的形式工作。

爪哇语

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

我的网页：

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

Answer 1

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

角度文档 说

$sce 是一项提供严格上下文转义服务的服务 AngularJS. SCE 协助编写代码的方式：（a） 默认情况下是安全的，并且 （b） 对 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);
}]);

这是工作小提琴