使用AngularJS中的SCE来防止XSS攻击的方法
这篇文章展示了有关XSS（跨站脚本）的不同方案以及怎样使用AngularJS中SCE（$sceProvider),sanitize service这些特性来正确处理XSS。如果我遗漏了什么重要的地方请直接评论/建议。同时，错别字请见谅。
以下几点内容将是我接下来要讲述的重点：
- 全部转码HTML
- 安全插入HTML的同时忽略类似“script"这样的标签。如果不加以注意，这将一样存在风险同时也会丑化页面，尤其是在有”img“标签的时候。
- 依赖并插入纯HTML；这也有风险的同时会让网页很难看。
使用ng-bind指令转码HTML
你可以用ng-bind指令来转码整个网页。它将会转码所有HTML标签但是仍然显示本来的样子。下列代码显示了ng-bind的用法。
<div>
<form>
<h1>AngularJS XSS Demo Test</h1>
<hr/>
<div class="col-md-12">
<input type="text" ng-model="name" class="form-control col-md-12" ng-change="processHtmlCode()" placeholder="Enter Some HTML Text..."/>
</div>
</form>
</div>
<hr/>
<div style="padding:20px">
<span><strong>ng-bind directive: Note that HTML text is entered as it is.</strong></span><br/>
<span ng-bind="helloMessage">{{helloMessage}}</span>
</div>
下面的图证明了以上言论。注意在输入栏中的HTML代码。它和在HTML页面中完全一样。
使用安全的方式插入HTML，也可以使用 ng-bind-html 指令忽略掉诸如“script”这样的元素
这是解决XSS攻击的关键. 也就是说，你仍然应该关注诸如“img"这样的元素 ( 作为一部分包含进了白名单中; 还有空元素) 因为它恩能够在你的web页面上展示任何图片 (包括非法的那些), 因此，它也可能会给你的web页面带来不利影响. 使用 ng-bind-html 指令皆可以AngularJS诸如“script”这样的JavaScript标记直接被忽略掉. ng-bind-html 指令会计算表达式，并且用一种安全的方式将结果HTML插入元素中. 对于用户会输入包含了HTML内容（比如在评论中）的情况，放到 ng-bind-html指令中可以确保文本被编码为白名单中的安全HTML字符. 安全字符的白名单被作为 $sanitize 的一部分编码，下面会讲到. 下面这些都被包含进了安全列表中 (直接从源代码中获得):
area,br,col,hr,img,wbr.
详细信息请访问 http://dev.w3.org/html5/spec/Overview.html#void-elements
address,article,aside,blockquote,caption,center,del,dir,div,dl,figure,figcaption,footer,h1,h2,h3,h4,h5,h6,header,hgroup,hr,ins,map,menu,nav,ol,pre,script,section,table,ul
a,abbr,acronym,b,bdi,bdo,big,br,cite,code,del,dfn,em,font,i,img,ins,kbd,label,map,mark,q,ruby,rp,rt,s,samp,small,span,strike,strong,sub,sup,time,tt,u,var
colgroup,dd,dt,li,p,tbody,td,tfoot,th,thead,tr,rp,rt.
详细信息请访问 http://dev.w3.org/html5/spec/Overview.html#optional-tags
下面的这两个元素 因为其内容不收信任，需要被规避掉. 在这种情况下，如果你想要展示它们，就要使用 $sce 服务，调用Angular 的 trustAsHtml 方法来执行下面提到的元素.
- script
- style
如下呈现的代码展示了 ng-bind-html 指令的使用.
<div> <form> <h1>AngularJS XSS Demo Test</h1> <hr/> <div class="col-md-12"> <input type="text" ng-model="name" class="form-control col-md-12" ng-change="processHtmlCode()" placeholder="Enter Some HTML Text..."/> </div> </form> </div> <hr/> <div style="padding:20px"> <span>ng-bind-html directive: Note that image is displayed appropriately as a result of text entered in the text field.</span> <span ng-bind-html="helloMessage"></span> </div>
下面这张图片展示了当在文本域中输入HTML代码，Angular用一种安全的方式插入到DOM时，是什么样子的. 注意 “img” 元素是上述列表中空元素的一份子. 因为代码被输入到了文本域中，作为”img"出现的图片被放到了受信任的列表（白名单）中。
信任并插入整段HTML
警告: 这很危险，并且可能很容易就最终造成你web站点的污染. 只有当你知道并且充分确认时，你才应该使用 trustAsHtml. 如此，你就有充足的信心认为这段文本是可以被信任的, 你应该使用$sce 服务并且调用 trustAsHtml 方法来讲整段HTML插入DOM中。在$sce服务被用来调用 trustAsHtml 方法来信任一段HTML代码时，请留意HTML和其中的JavaScript代码块. 在这种情况下，一段诸如 “<style>.hello{color:red}</style>” 这样的代码被插入了，它最后可能会也给现有的HTML元素加上样式。这可能不是很好。人们也可能采用那种方式用非法的图片替换背景图片.
<script type="text/javascript">
angular.module('HelloApp', ["ngSanitize"])
.controller('HelloCtrl', ['$scope', '$sce', function($scope, $sce){
$scope.name="";
$scope.processHtmlCode = function() {
$scope.helloMessage = "<h1>" + $scope.name + "</h1>";
$scope.trustedMessage = $sce.trustAsHtml( $scope.name );
}
}])
</script>
<!-- Pay attention to class hello which is coded in UI and as a result, element is painted in red-->
<div style="padding:20px">
<span class="hello"><strong>ng-bind directive: Note that HTML text is entered as it is.</strong></span><br/>
<span class="hello" ng-bind="helloMessage">{{helloMessage}}</span>
</div>
<hr/>
<div style="padding:20px">
<span>Note that script tag is executed as well.</span>
<span ng-bind-html="trustedMessage"></span>
</div>
下面的图片展示了当在文本域中输入将要被插入DOM中的HTML样式代码时，会是什么样子. 这里的结果就是, 其它的HTML元素也带上了红色， 如下所示. 在某些场景中，黑客可能会插入一段带有背景样式越苏，这可能会显示出原本不要被显示的背景，给最终用户带来糟糕的体验.
<html>
<head>
<title>Hello AngularJS</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-sanitize.min.js"></script>
</head>
<body class="container" ng-app="HelloApp" ng-controller="HelloCtrl">
<div>
<form>
<h1>AngularJS XSS Demo Test</h1>
<hr/>
<div class="col-md-12">
<input type="text" ng-model="name" class="form-control col-md-12" ng-change="processHtmlCode()" placeholder="Enter Some HTML Text..."/>
</div>
</form>
<hr/>
</div>
<hr/>
<div style="padding:20px">
<span class="hello"><strong>ng-bind directive: Note that HTML text is entered as it is.</strong></span><br/>
<span class="hello" ng-bind="helloMessage">{{helloMessage}}</span>
</div>
<hr/>
<div style="padding:20px">
<span>Note that script tag is executed as well.</span>
<span ng-bind-html="trustedMessage"></span>
</div>
<hr/>
<div style="padding:20px">
<span>ng-bind-html directive: Note that image is displayed appropriately as a result of text entered in the text field.</span>
<span ng-bind-html="helloMessage"></span>
</div>
<hr/>
<script type="text/javascript">
angular.module('HelloApp', ["ngSanitize"])
.controller('HelloCtrl', ['$scope', '$sce', function($scope, $sce){
$scope.name="";
$scope.processHtmlCode = function() {
$scope.helloMessage = "<h1>" + $scope.name + "</h1>";
$scope.trustedMessage = $sce.trustAsHtml( $scope.name );
}
}])
</script>
</body>
</html>
相关推荐
-
冲浪DDoS（拒绝服务）攻击的趋势与防御
一.阻断服务(Denial of Service) 在探讨DDoS 之前我们需要先对 DoS 有所了解,DoS泛指黑客试图妨碍正常使用者使用网络上的服务,例如剪断大楼的电话线路造成用户无法通话.而以网络来说,由于频宽.网络设备和服务器主机等处理的能力都有其限制,因此当黑客产生过量的网络封包使得设备处理不及,即可让正常的使用者无法正常使用该服务.例如黑客试图用大量封包攻击一般频宽相对小得多的拨接或 ADSL 使用者,则受害者就会发现他要连的网站连不上或是反应十分缓慢. DoS 攻击并非入侵主机也不
-
IIS防御小规模DDOS攻击实例(反向代理)
最近几天公司官网和业务系统的注册页面频繁遭遇DDOS攻击,导致IIS应用程序池CPU占用率100%,访问网站出现503错误.下面总结一下应对措施. 一.启用IIS的CPU监视功能 对于低频率的DDOS可以采取这种方法.w3wp.exe是应用程序池的关联进程,当WEB访问量大时,w3wp.exe会占用大量的系统资源.在DDOS攻击下,很明显的现象就是w3wp.exe占用CPU达到100%,网站拒绝访问,这个时候远程登录服务器都很困难.针对这种情况,做如下优化: 1.为IIS中的每个网站设置
-
防御DDoS攻击实用指南 守住你的网站
一.为何要DDoS? 随着Internet互联网络带宽的增加和多种DDoS黑客工具的不断发布,DDoS拒绝服务攻击的实施越来越轻易,DDoS攻击事件正在成上升趋势.出于商业竞争.打击报复和网络敲诈等多种因素,导致很多IDC托管机房.商业站点.游戏服务器.聊天网络等网络服务商长期以来一直被DDoS攻击所困扰,随之而来的是客户投诉.同虚拟主机用户受牵连.法律纠纷.商业损失等一系列问题,因此,解决DDoS攻击问题成为网络服务商必须考虑的头等大事. 二.什么是DDoS? DDoS是英文Distribut
-
什么是JavaScript注入攻击?
Javascript可以作为黑客攻击网站的一种工具,其中注入js(javascript)恶意脚本就是其中一种手段之一,那么下面,大家来学习一下如何预防js的注入攻击呢?以下有一个不错的陈述,跟大家分享: 什么是 JavaScript 注入攻击? 每当接受用户输入的内容并重新显示这些内容时,网站就很容易遭受 JavaScript 注入攻击.让我们研究一个容易遭受 JavaScript 注入攻击的具体应用程序.假设已经创建了一个客户反馈网站.客户可以访问网站并输入对产品的反馈信息.当客户提交反馈时,
-
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Ajax与pjax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新-无刷新操作. 但是,ajax应用也会造成另外的问题,容易导致浏览器无法前进与后退,这是个很头疼的问题,开发人员必须增加工作量(比如通过一个隐藏的iframe,或者改变location.ha
-
浅谈利用JavaScript进行的DDoS攻击原理与防御
分布式拒绝服务攻击(DDoS)攻击是一种针对网站发起的最古老最普遍的攻击.Nick Sullivan是网站加速和安全服务提供商CloudFlare的一名系统工程师.近日,他撰文介绍了攻击者如何利用恶意网站.服务器劫持和中间人攻击发起DDoS攻击,并说明了如何使用HTTPS以及即将到来的名为"子资源一致性(Subresource Integrity,简称SRI)"的Web新技术保护网站免受攻击. 现代网站的大部分交互都来自于JavaScript.网站通过直接向HTML中添加JavaScr
-
DDoS攻击的趋势与相关防御策略
一.阻断服务(Denial of Service) 在探讨 DDoS 之前我们需要先对 DoS 有所了解,DoS泛指黑客试图妨碍正常使用者使用网络上的服务,例如剪断大楼的电话线路造成用户无法通话.而以网络来说,由于频宽.网络设备和服务器主机等处理的能力都有其限制,因此当黑客产生过量的网络封包使得设备处理不及,即可让正常的使用者无法正常使用该服务.例如黑客试图用大量封包攻击一般频宽相对小得多的拨接或 ADSL 使用者,则受害者就会发现他要连的网站连不上或是反应十分缓慢. DoS 攻击并非入侵主机也
-
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
mysql_real_escape_string() 所以得SQL语句如果有类似这样的写法:"select * from cdr where src =".$userId; 都要改成 $userId=mysql_real_escape_string($userId) 所有有打印的语句如echo,print等 在打印前都要使用htmlentities() 进行过滤,这样可以防止Xss,注意中文要写出htmlentities($name,ENT_NOQUOTES,GB2312) .
-
一次真实的DDoS攻击防御实战
第一轮进攻: 时间:下午15点30左右 突然发现公司的web server无法访问,尝试远程登录,无法连接,呼叫idc重启服务器.启动后立即登录察看,发现攻击还在继续,并且apache所有230个进程全部处于工作状态.由于服务器较老,内存只有512m,于是系统开始用swap,系统进入停顿状态.于是杀掉所有httpd,稍后服务器恢复正常,load从140降回正常值. 开始抓包,发现流量很小,似乎攻击已经停止,尝试启动httpd,系统正常.察看httpd日志,发现来自五湖四海的IP在尝试login.
-
使用AngularJS中的SCE来防止XSS攻击的方法
这篇文章展示了有关XSS(跨站脚本)的不同方案以及怎样使用AngularJS中SCE($sceProvider),sanitize service这些特性来正确处理XSS.如果我遗漏了什么重要的地方请直接评论/建议.同时,错别字请见谅. 以下几点内容将是我接下来要讲述的重点: 全部转码HTML 安全插入HTML的同时忽略类似"script"这样的标签.如果不加以注意,这将一样存在风险同时也会丑化页面,尤其是在有"img"标签的时候. 依赖并插入纯HTML:这也有风险
-
Angularjs中date过滤器失效的问题及解决方法
在开发中遇到date过滤器失效的问题,在其他页面date过滤器没有问题,但是在这个页面出现了问题,后来发现是因为{{now | date : 'yyyy-MM-dd HH:mm:ss'}} now必须是时间戳格式的,后面的过滤器才会生效.而我从后端传过来的时间数据是字符串所以过滤器无法生效 解决方法:在后端处理要传的数据,将里面的时间转为时间戳即可(下面贴我百度到的) /** * 时间转时间戳 */ public static String dateToStamp(String s) throw
-
swiper在angularjs中使用循环轮播失效的解决方法
bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白.通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类
-
angularJs中orderBy筛选以及filter过滤数据的方法
如下所示: <div ng-app="module" ng-controller="ctrl"> <!--按照click降序排序--> {{data|orderBy:'click':true}}<br> <!--按照id升序排序--> {{data|orderBy:'id':false}}<br> <!--筛选匹配3的数据--> {{data|filter:'3'}}<br> <
-
AngularJS中重新加载当前路由页面的方法
这个问题同样困扰我很久,网上的回答五花八门,全都不能解决:终于在网上找很久,看到某大神的解决办法,整理作此分享:使用ui-router重新加载当前页面的问题.(ui-router版本需要是0.2.14以上的) 用angular做项目,会碰到需要点击菜单刷新当前页面,加载当前页面,但是同一个路由页面点击没反应: 假设我们的路由页面 app.toMenu ; <a href="#" rel="external nofollow" rel="externa
-
Angularjs中使用指令绑定点击事件的方法
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> <li class=""> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external n
-
详解React 如何防止 XSS 攻击论$$typeof 的作用
目录 JSX XSS 攻击 防止 XSS 攻击的方法 React 对于文本节点的处理 dangerouslySetInnerHTML 处理富文本节点 $$typeof 的作用 JSX 先来简单复习一下 JSX 的基础知识.JSX 是React.createElement的语法糖 <div id="container">hello</div> 经过 babel 编译后: React.createElement( "div" /* type */
-
详解AngularJs中$sce与$sceDelegate上下文转义服务
一.严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式.由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子.我们称这些上下文转义为特权或者SCE. 二.$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码): var ngBindHtmlDirective = ['$sce', funct
-
深入理解AngularJS中的ng-bind-html指令和$sce服务
前言 Angularjs的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model. 但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签. 如: $scope.currentWork.description = "hello,<br><b>今天我们去哪里?</b>" 我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的. 是这样的 hello,
-
对angularJs中$sce服务安全显示html文本的实例
如下所示: <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>