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

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 上呈现内容

Angular 医生说

$sce is a service that provides Strict Contextual Escaping services to AngularJS. SCE assists in writing code in way that (a) is secure by default and (b) makes auditing for security vulnerabilities such as XSS, clickjacking, etc. a lot easier.

在这样做之前，您需要在您的应用程序中注入 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 功能已为以下版本启用，您应该 enable/disable 在 angular.

的配置阶段启用它

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

这里是Working Fiddle

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

inserting iframe from trusted source in AngularJS

javascript

iframe

angularjs

ng-bind-html

angularjs-sce