跨域全页面嵌入iframe播放视频

写法一:

html部分:

js部分:
var app = angular.module(‘myapp’, []);
app.controller(‘myctrl’, function($scope, $http, $sce){
$scope.height = window.innerHeight;
$scope.init=function(){
var vhallurl = “https://live.vhall.com/webinar/inituser/498745689”;
$scope.vhallurl = $sce.trustAsResourceUrl(vhallurl);
var iframehtml = ‘https://www.deaboway.com/wp-admin/’+vhallurl+”;
$scope.player = $sce.trustAsHtml(iframehtml);
}
$scope.init();

});

写法二:(优化)

html部分:

js部分:
var app = angular.module(‘myapp’, []);
app.controller(‘myctrl’, function($scope, $http, $sce){
$scope.height = window.innerHeight;
$scope.init=function(){
var vhallurl = “https://live.vhall.com/webinar/inituser/498745689”;
$scope.vhallurl = $sce.trustAsResourceUrl(vhallurl);
}
$scope.init();
});

写法三:(有循环用过滤器比较方便直观)

html部分:

js部分:
var app = angular.module(‘myapp’, [])
.filter(‘trustAsResourceUrl’, [‘$sce’, function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}]);
app.controller(‘myctrl’, function($scope, $http){
$scope.height = window.innerHeight;
$scope.init=function(){
$scope.vhallurl = “https://live.vhall.com/webinar/inituser/498745689”;
}
$scope.init();
});

这里主要有地方要注意:

  1. ng-bind-html指令是通过一个安全的方式将内容绑定到HTML元素上,该属性依赖于$sanitize,需要在项目中引入angular-sanitize.js文件,并在module定义时注入该服务ngSanitize。

2.通过ng-bind-html指令绑定html元素,为什么还需要$sce?

这是因为如果在angularjs中绑定的数据有html标签时,会被angularjs认为是不安全的而自动过滤掉,为了保留这些标签就需要开启非安全模式,这是非常危险的。$sce是angularJS自带的安全处理模块,因此需要$sce.trustAsHtml()方法将数据内容以html的形式解析并返回。

3.几种绑定方式的对比

(1)ng-bind-html和内置的$sanitize服务
$sanitize会自动对html标签进行净化,并会把标签的属性以及绑定在元素上的事件都移除,仅保留了标签和内容。

(2)ng-bind-html和$sce.trustAsHtml()
它不再经过sanitize服务的净化,直接作为元素的.html()绑定给元素,保留所有的属性和事件,这一行的内容不依赖于ngSanitize模块,$sce服务是内置的。

(3)ng-bind
绑定的值就作为字符串填充到元素里。

使用ng-bind-html容易引起XSS(脚本注入攻击),这一点一定要注意。

欢迎关注我的微信公众号:

 

如无特殊说明,文章均为本站原创,转载请注明出处!

《跨域全页面嵌入iframe播放视频》有2个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注