www.ca88.comsce调整代码安检,sce服务来过滤HTML标签_AngularJS_脚本之家

www.ca88.com

angular
js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签.对于angular
1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题。它可以通过使用$sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。

在前端与后台的撕逼中,很大一部分是因为数据的问题。使用angular会遇到这样的问题,后台返回的数据不是自己想要的纯字符串,而是带有html标签及属性的,那么我们将它输出来后,在页面上就出现了带有标签的内容,很不优雅。那么找后台更改的话,又会引起议论撕逼大战,而且人家不一定有时间搭理你。这样的情况下,我们就要自己动手,丰衣足食了。

AngularJS 使用$sce控制代码安全检查,angularjssce

由于浏览器都有同源加载策略,不能加载不同域下的文件、也不能使用不合要求的协议比如file进行访问。

在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因此常常会遇到
一个iframe中的ng-src无法使用。

什么是SCE

SCE,即strict contextual escaping,我的理解是 严格的上下文隔离 
…翻译的可能不准确,但是通过字面理解,应该是angularjs严格的控制上下文访问。

由于angular默认是开启SCE的,因此也就是说默认会决绝一些不安全的行为,比如你使用了某个第三方的脚本或者库、加载了一段html等等。

这样做确实是安全了,避免一些跨站XSS,但是有时候我们自己想要加载特定的文件,这时候怎么办呢?

此时可以通过$sce服务把一些地址变成安全的、授权的链接…简单地说,
就像告诉门卫,这个陌生人其实是我的好朋友,很值得信赖,不必拦截它!

常用的方法有:

$sce.trustAs(type,name);
$sce.trustAsHtml(value);
$sce.trustAsUrl(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

其中后面的几个都是基于第一个api使用的,比如trsutAsUrl其实调用的是trsutAs($sce.URL,”xxxx”);

其中 type 可选的值为:

$sce.HTML
$sce.CSS
$sce.URL //a标签中的href , img标签中的src
$sce.RESOURCE_URL //ng-include,src或者ngSrc,比如iframe或者Object
$sce.JS

来自官网的例子:ng-bind-html

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
  <div ng-controller="AppController">
   <i ng-bind-html="explicitlyTrustedHtml" id="explicitlyTrustedHtml"></i>
  </div>
  <script type="text/javascript">
    angular.module('mySceApp',[])
    .controller('AppController', ['$scope', '$sce',
     function($scope, $sce) {
      $scope.explicitlyTrustedHtml = $sce.trustAsHtml(
        'Hover over this text.');
     }]);
  </script>
</body>
</html>

实际工作中的例子:ng-src链接

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="mySceApp">
<div ng-controller="AppController">
  <iframe width="100%" height="100%" seamless frameborder="0" ng-src="{{trustSrc}}"></iframe>
</div>
  <script type="text/javascript">
    angular.module('mySceApp',[])
    .controller('AppController', ['$scope','$sce',function($scope,$sce) {
      $scope.trustSrc = $sce.trustAs($sce.RESOURCE_URL,"http://fanyi.youdao.com/");
      // $scope.trustSrc = $sce.trustAsResourceUrl("http://fanyi.youdao.com/");//等同于这个方法
     }]);
  </script>
</body>
</html>

还有点时间,接着给大家介绍angular中的ng-bind-html指令和$sce服务

angular
js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签。如:

$scope.currentWork.description =
“hello,<br><b>今天我们去哪里?</b>”
我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的。是这样的

hello,

今天我们去哪里?

怎么办呢?

对于angular
1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“Strict
Contextual
Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。来看看怎么用吧。

controller code:

$http.get('/api/work/get?workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});

HTML code:

<p> {{currentWork.description}}</p>

我们返回的内容中包含一系列的html标记。表现出来的结果就如我们文章开头所说的那样。这时候我们必须告诉它安全绑定。它可以通过使用$
sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。所以,我们必须在我们的控制器中引入$sce服务

controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {
$http.get('/api/work/get?workId=' + $routeParams.workId)
.success(function (work) {
  $scope.currentWork = work;
  $scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
});

html code:

<p ng-bind-html="currentWork.description"></p>

这样结果就完美的呈现在页面上了:

hello

今天我们去哪里?

咱们还可以这样用,把它封装成一个过滤器就可以在模板上随时调用了

app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
  return $sce.trustAsHtml(text);
};
}]);

html code:

全选复制放进笔记

<p ng-bind-html="currentWork.description | to_trusted"></p>

使用$sce控制代码安全检查,angularjssce
由于浏览器都有同源加载策略,不能加载不同域下的文件、也不能使用不合要求的协议比如…

controller('HealthEducationDetailCtrl', ['$sce','$scope', 'Storage', '$state', 'HomeService','$stateParams','$ionicTabsDelegate', function ($sce,$scope, Storage, $state, HomeService,$stateParams,$ionicTabsDelegate) { $scope.$on('$ionicView.beforeEnter', function() { //关闭所有的tab选项卡 $ionicTabsDelegate.showBar; //保证健康教育详情页面可以显示各自的标题 $scope.title=$stateParams.ARTICLE_TITLE; var ARTICLE_ID=$stateParams.ARTICLE_ID; var param={ARTICLE_ID:ARTICLE_ID}; HomeService.getHealthArticleDetail; //加载健康教育详情 $scope.healthArticleDetail=[]; $scope.$on('HomeService.getHealthArticleDetail',function  { $scope.healthArticleDetail=data; //richTextReplace是解析html标识符 // $scope.trustHtml=Storage.richTextReplace($scope.healthArticleDetail.ARTICLE_CONTENTS); $scope.trustHtml=$sce.trustAsHtml($scope.healthArticleDetail.ARTICLE_CONTENTS); }) $scope.$on('$ionicView.beforeLeave', function() { //打开所有tab选项卡 $ionicTabsDelegate.showBar

通常angular绑定数据有这样的方法,{{}}或者ng-bind
=”,此时数据为带有html标签的数据的话,那么就输出为带有标签的数据,不友好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

如何更改呢?

方法一

要输出为不带html的内容,需要两步

1 使用$sce.trustAsHtml();方法将数据转为unwrapTrustedValue 数据。

$scope.aaa = $sce.trustAsHtml;

2 ng-bind-html 输出

方法二 filter过滤器

基于$sce.trustAsHtml()的方法,构造过滤器来进行过滤。

angular.module.filter("showAsHtml",function{ return funciton{ retrun $sce.trustAsHtml;

使用的时候直接在数据后加过滤器即可

使用了$scr.trustAsHtml()
则展示的时候,必须使用ng-bind-htm=‘’的形式,而不能使用{{}}

以上这篇angular将html代码输出为内容的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

发表评论

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

相关文章

网站地图xml地图