AngularJs的$sce服务安全的处理html数据

最新推荐文章于 2019-07-03 11:35:50 发布
最新推荐文章于 2019-07-03 11:35:50 发布
阅读量341 收藏
点赞数
分类专栏： angularJS 文章标签： angularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dome_/article/details/79277551
版权

为了提升网站的安全性，避免恶意代码注入，AngularJs提供了相应的解决方案，测试代码如下：

01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>$sce服务安全的处理html数据</title>
06    <style type="text/css">
07        .ng-cloak{display:none;}
08    </style>
09</head>
10<body ng-app="app" ng-controller="ctr" ng-cloak class="ng-cloak">
11    <div ng-bind="data1"></div>
12    <div ng-bind-html="data2"></div>
13    <div ng-bind-html="data1 | safeHtml"></div>
14</body>
15</html>
16<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
17<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
18<script type="text/javascript">
19    var m = angular.module('app', []);
20    m.controller('ctr', ['$scope', '$sce', function($scope, $sce){
21        $scope.data1 = '<h1>赵一鸣WEB前端开发学习笔记</h1>';
22        $scope.data2 = $sce.trustAsHtml('<h1>赵一鸣AngularJs学习笔记</h1>');  
23    }]);
24    m.filter('safeHtml', ['$sce', function($sce){
25        return function(htmlString){
26            return $sce.trustAsHtml(htmlString);
27        }
28    }]);
29</script>

（完！）

K'illCode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对angularJs中$sce服务安全显示html文本的实例
10-17
今天小编就为大家分享一篇对angularJs中$sce服务安全显示html文本的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
angularjs中ng-bind-html解析文本
friend_ship的博客
09-03 676
渲染带html结构的字符串，使用ng-bind-html可以实现。 ng-bind-html的坑： ng-bind-html指令会在运行时过滤掉一些不安全的标签来防止xxs攻击，提高安全性。所以会导致字符串的某些标签如<button></button>,<input>等不显示。 解决方案： 1.在angularjs中默认是不相信添加的html内容，ng-...
深究AngularJS——$sce的使用
热门推荐
爱雨轩
05-13 1万+
为什么要要$sce？因为angularJS里好些地方，比如路径默认是个字符串，不会认为是路径，从而访问不到我们需要的东西，那么我们就可以通过$sce告诉angualrJS这个路径，这样是很安全滴。它有以下几种：$sce.trustAs(type,name); $sce.trustAsUrl(value); $sce.trustAsHtml(value); $sce.trustAsResourceUr
angularJs中$sce服务安全显示html文本
泠泠似水
06-11 779
<div ng-app="module" ng-controller="ctrl"> {{data}} <hr> <div ng-bind-html="data"></div> <hr> <div ng-bind-html="title | trustHtml"></div> </div> <script> var m = angular.module
AngularJS常用服务（$http、$location、$sce等）
VitaLemon__的专栏
08-09 6683
这篇博客，只是简单地说下AngularJS中的常用的系统（自带）服务。如果逻辑不清晰，就当作是一个参考手册吧，来查查用法什么的。 另外，附上一些参考网站： AngularJS手册：http://man.hubwiz.com/manual/AngularJS（汇智网） AngularJS常用服务：https://docs.angularjs.org/api/ng/service（AngularJ
angularjs解决方案之 Error: [$sce:unsafe]
weixin_34015860的博客
05-09 482
angularjs中无法直接使用ng-bind-html：<divng-bind-html="item.text|highlight:$select.search"></div>1.app.js中添加angular.module('epcui',[ 'ngSanitize'//ngSanitize ])2.html中添加saniti...
AngularJS 使用$sce控制代码安全检查
10-23
SCE，即strict contextual ...翻译的可能不准确，但是通过字面理解，应该是angularjs严格的控制上下文访问，通过本文给大家介绍AngularJS 使用$sce控制代码安全检查，对angularjs sce相关知识感兴趣的朋友一起学习吧
深究AngularJS中$sce的使用
10-19
本篇文章主要介绍了深究AngularJS中$sce的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
AngularJS通过$sce输出html的方法
10-21
不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候，发现用AngularJs输出html的时候，浏览器并不解析这些html标签，这里我们需要其显示angular输出的html能被浏览器解析怎么办呢？不知道Angularjs如何...
AngularJS按需加载文件
大V的博客
07-10 3709
$ozLayLoad实现按需加载文件功能
Spring Security和Angular教程
大强博客
06-26 2422
Spring Security和Angular教程 （一）安全的单页应用程序 在本教程中，我们展示了Spring Security，Spring Boot和Angular的一些很好的功能，它们协同工作以提供愉快和安全的用户体验。Spring和Angular的初学者应该可以访问它，但是也有很多细节可供专家使用。这实际上是Spring Security和Angular系列部分中的第一部分，其中每个...
angularJs中添加过滤器显示Html代码
m0_37768843的博客
08-07 1067
我们测试后发现高亮显示的html代码原样输出，这是angularJS为了防止html攻击采取的安全机制。我们如何在页面上显示html的结果呢？我们会用到$sce服务的trustAsHtml方法来实现转换。 因为这个功能具有一定通用性，我们可以通过angularJS的过滤器来简化开发，这样只写一次，调用的时候就非常方便了，看代码： 修改base.js // 定义模块: var ...
angular7中的加密、安全操作
yw00yw的博客
07-03 2388
angular中md5的使用 1. 安装依赖 npm install ts-md5 --save 2. 导入 import {Md5} from 'ts-md5'; 3. 使用 Md5.hashStr('需要加密的数据'); 4. 案例 params.set("password", Md5.hashStr(this.password).toString()); 设置参数只能是字符串...
angularjs输出html
xdongll的专栏
08-11 1675
在用angular作为前端搭建个人博客的时候，发现用angularJs输出html的时候，浏览器并不解析这些html标签，不知道angularjs如何实现这种功能的。 但是这里我们需要其显示angular输出的html能被浏览器解析怎么办呢？ 通过api，发现通过指令 ng-bind-html来实现html的输出。 [html] view plain copy
angularJs 中的ng-bind-html指令和$sce服务
相约9.28,幸福那一刻
12-22 1513
angular js的强大之处之一就是他的数据双向绑定这一牛B功能，我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。如： $scope.currentWork.description = “hello,今天我们去哪里？” 我们用ng-bind-html这样的指令来绑定，结果却不是
AngularJS-$sce的使用
火星男孩的分享空间
03-12 2463
为什么要用sce？ 因为AngularJS里好些地方，比如路径默认是个字符串，不会认为是路径，从而访问不到我们需要的东西，那么我们就可以通过sce告诉angualrJS这个路径，这样是安全的。它有以下几种：所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定。$sce.trustAs(type,name); $sce.t
AngularJs将json字符串转为对象fromJson和将对象转为json字符串toJson
KHOST的博客
02-12 5123
在AngularJs中，json形式的字符串可以转为json格式的对象，代码如下：利用HTML5的2种本地存储方式（localStorage和sessionStorage）来做测试：01var m = angular.module('app', []);02m.controller('ctrl', ['$scope', function($scope){03    $scope.data = {'...
AngelarJS学习笔记1
KHOST的博客
02-07 3398
基本定义： 1.ng-app = "" 定义了angularJs的使用范围; 2.ng-init = "变量 = 值;变量 = '值'" 初始化变量的值，有多个变量时，中间用分号隔开； 3.ng-model = "变量" 定义变量名; 4.ng-bind = "变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。 但是一般都用双重花括号来获取变量的值，比如：{{变量}};
sceserver抓屏服务器
最新发布
08-25
sceserver抓屏服务器是一种用于屏幕截图的服务器软件。它的主要功能是在服务器上运行，并提供给客户端使用，允许客户端对远程设备上的屏幕进行实时截图。 sceserver抓屏服务器通过与客户端进行通信，将远程设备的屏幕图像传输到客户端。客户端可以随时请求屏幕截图，并收到最新的图像数据。这种实时的屏幕截图功能对于远程协助、远程教育、远程调试等应用非常有用。 sceserver抓屏服务器还具有一些其他的特性和功能。例如，它可以支持多种客户端连接，可以同时服务多个客户端。它还可以对传输的图像数据进行压缩和优化，以提高传输效率。此外，它还可以对图像进行编辑和处理，例如裁剪、标记、绘制等功能，使得客户端可以方便地对收到的屏幕截图进行操作和分析。 总的来说，sceserver抓屏服务器是一款非常实用的软件，为远程设备的屏幕截图提供了方便、高效的解决方案。它的存在使得远程操作和协助变得更加简单和便捷，为用户提供了更好的使用体验和服务。无论是个人用户还是企业用户，都可以通过使用sceserver抓屏服务器来提升工作效率和解决问题，帮助实现更多的远程应用场景。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值