最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - inserting iframe from trusted source in AngularJS - Stack Overflow

programmeradmin8浏览0评论

Trying to use ng-bind-html to insert iframe into page with AngularJS & I can't get it to work it on even the simplest form.

Javascript

function Ctrl($scope) {
   $scope.showIt = '<iframe src=""></iframe>';
}

My HTML:

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

Trying to use ng-bind-html to insert iframe into page with AngularJS & I can't get it to work it on even the simplest form.

Javascript

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

My HTML:

<div ng-bind-html="showIt"></div>
Share Improve this question edited Jun 20, 2015 at 16:56 Pankaj Parkar 136k23 gold badges240 silver badges303 bronze badges asked Jan 20, 2015 at 17:01 AmidudeAmidude 3512 gold badges6 silver badges15 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 8

You need to use $sce service to tell angular to render html content on view

Angular Doc says

$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.

Before doing it, you need to inject ngSanitize dependency inside your app

You can do it in two way either using filter or 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 Code

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

From angular 1.2 onwards $sce feature is enabled for below version you should enable/disable it in config phase of angular.

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

Here is Working Fiddle

发布评论

评论列表(0)

  1. 暂无评论