使用AngularJS中的SCE來(lái)防止XSS攻擊的方法
這篇文章展示了有關(guān)XSS（跨站腳本）的不同方案以及怎樣使用AngularJS中SCE（$sceProvider),sanitize service這些特性來(lái)正確處理XSS。如果我遺漏了什么重要的地方請(qǐng)直接評(píng)論/建議。同時(shí)，錯(cuò)別字請(qǐng)見(jiàn)諒。
以下幾點(diǎn)內(nèi)容將是我接下來(lái)要講述的重點(diǎn)：
- 全部轉(zhuǎn)碼HTML
- 安全插入HTML的同時(shí)忽略類(lèi)似“script"這樣的標(biāo)簽。如果不加以注意，這將一樣存在風(fēng)險(xiǎn)同時(shí)也會(huì)丑化頁(yè)面，尤其是在有”img“標(biāo)簽的時(shí)候。
- 依賴(lài)并插入純HTML；這也有風(fēng)險(xiǎn)的同時(shí)會(huì)讓網(wǎng)頁(yè)很難看。
使用ng-bind指令轉(zhuǎn)碼HTML
你可以用ng-bind指令來(lái)轉(zhuǎn)碼整個(gè)網(wǎng)頁(yè)。它將會(huì)轉(zhuǎn)碼所有HTML標(biāo)簽但是仍然顯示本來(lái)的樣子。下列代碼顯示了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頁(yè)面中完全一樣。
使用安全的方式插入HTML，也可以使用 ng-bind-html 指令忽略掉諸如“script”這樣的元素
這是解決XSS攻擊的關(guān)鍵. 也就是說(shuō)，你仍然應(yīng)該關(guān)注諸如“img"這樣的元素 ( 作為一部分包含進(jìn)了白名單中; 還有空元素) 因?yàn)樗髂軌蛟谀愕膚eb頁(yè)面上展示任何圖片 (包括非法的那些), 因此，它也可能會(huì)給你的web頁(yè)面帶來(lái)不利影響. 使用 ng-bind-html 指令皆可以AngularJS諸如“script”這樣的JavaScript標(biāo)記直接被忽略掉. ng-bind-html 指令會(huì)計(jì)算表達(dá)式，并且用一種安全的方式將結(jié)果HTML插入元素中. 對(duì)于用戶會(huì)輸入包含了HTML內(nèi)容（比如在評(píng)論中）的情況，放到 ng-bind-html指令中可以確保文本被編碼為白名單中的安全HTML字符. 安全字符的白名單被作為 $sanitize 的一部分編碼，下面會(huì)講到. 下面這些都被包含進(jìn)了安全列表中 (直接從源代碼中獲得):
空元素:
塊元素:
內(nèi)聯(lián)元素:
結(jié)尾標(biāo)記元素:
下面的這兩個(gè)元素 因?yàn)槠鋬?nèi)容不收信任，需要被規(guī)避掉. 在這種情況下，如果你想要展示它們，就要使用 $sce 服務(wù)，調(diào)用Angular 的 trustAsHtml 方法來(lái)執(zhí)行下面提到的元素.
- script
- style
如下呈現(xiàn)的代碼展示了 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>
下面這張圖片展示了當(dāng)在文本域中輸入HTML代碼，Angular用一種安全的方式插入到DOM時(shí)，是什么樣子的. 注意 “img” 元素是上述列表中空元素的一份子. 因?yàn)榇a被輸入到了文本域中，作為”img"出現(xiàn)的圖片被放到了受信任的列表（白名單）中。
信任并插入整段HTML
警告: 這很危險(xiǎn)，并且可能很容易就最終造成你web站點(diǎn)的污染. 只有當(dāng)你知道并且充分確認(rèn)時(shí)，你才應(yīng)該使用 trustAsHtml. 如此，你就有充足的信心認(rèn)為這段文本是可以被信任的, 你應(yīng)該使用$sce 服務(wù)并且調(diào)用 trustAsHtml 方法來(lái)講整段HTML插入DOM中。在$sce服務(wù)被用來(lái)調(diào)用 trustAsHtml 方法來(lái)信任一段HTML代碼時(shí)，請(qǐng)留意HTML和其中的JavaScript代碼塊. 在這種情況下，一段諸如 “<style>.hello{color:red}</style>” 這樣的代碼被插入了，它最后可能會(huì)也給現(xiàn)有的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>
下面的圖片展示了當(dāng)在文本域中輸入將要被插入DOM中的HTML樣式代碼時(shí)，會(huì)是什么樣子. 這里的結(jié)果就是, 其它的HTML元素也帶上了紅色， 如下所示. 在某些場(chǎng)景中，黑客可能會(huì)插入一段帶有背景樣式越蘇，這可能會(huì)顯示出原本不要被顯示的背景，給最終用戶帶來(lái)糟糕的體驗(yàn).
<html>
<head>
<title>Hello AngularJS</title>
<link rel="stylesheet" type="text/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>
相關(guān)文章
AngularJS定時(shí)器的使用與移除操作方法【interval與timeout】
這篇文章主要介紹了AngularJS定時(shí)器的使用與移除操作方法,結(jié)合實(shí)例形式分析了AngularJS中interval與timeout方法的相關(guān)使用技巧,需要的朋友可以參考下2016-12-12
AngularJS中過(guò)濾器的使用與自定義實(shí)例代碼
這篇文章運(yùn)用實(shí)例代碼給大家介紹了angularjs中過(guò)濾器的使用和自定義過(guò)濾器，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，感興趣的朋友們可以參考借鑒。2016-09-09
對(duì)angularjs框架下controller間的傳值方法詳解
今天小編就為大家分享一篇對(duì)angularjs框架下controller間的傳值方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
本文主要介紹AngularJs 指令的知識(shí)，這里整理了詳細(xì)的資料和簡(jiǎn)單示例代碼幫助大家學(xué)習(xí)理解應(yīng)用，有興趣的小伙伴可以參考下2016-09-09
Angular實(shí)現(xiàn)的敏感文字自動(dòng)過(guò)濾與提示功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的敏感文字自動(dòng)過(guò)濾與提示功能,結(jié)合實(shí)例形式分析了AngularJS針對(duì)字符串的輸入判定及實(shí)時(shí)顯示相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
AngularJS 的輸入驗(yàn)證是一個(gè)強(qiáng)大的功能,可以幫助開(kāi)發(fā)者確保用戶輸入的數(shù)據(jù)是準(zhǔn)確和完整的,這篇文章主要介紹了AngularJS 輸入驗(yàn)證,需要的朋友可以參考下2024-07-07
angular-cli修改端口號(hào)【angular2】
本篇文章主要介紹了angular2中angular-cli修改端口號(hào)的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
Angular之jwt令牌身份驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了Angular之jwt令牌身份驗(yàn)證的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
在AngularJS中使用jQuery的zTree插件的方法
這篇文章主要介紹了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但還不是完全版的jQuery,需要的朋友可以參考下2016-04-04