Utilizing AntiXss Encoder on the server side to protect against XSS attacks, all responses include HTML unescape characters like "<:script>:alert(1);<:/script>:" (with ';' replaced as ':')
When binding, I use sanitize with ng-bind-html without any issues. However, there is another control input for update mode. Upon clicking the update icon to edit text, a textarea is displayed and the binded tag with ng-if is hidden. The textarea has an ng-model attribute. I am unable to escape HTML characters in the textarea like ng-bind-html. Here is the code snippet, please assist as I am struggling with this.
In the fiddle provided, the edit mode textarea should display "<script>alert(1);</script>" without triggering the alert action, and the data sent to the server should also display the same...
var app = angular.module('myApp',['ngSanitize']);
app.controller('MyCtrl', function($scope, $sce, $sanitize) {
$scope.post1 = "<script>alert(1);</script>";
//$scope.post2 = $sce.parseAsHtml("<h1>alert(1)</h1>");
$scope.logs = ["log created"];
$scope.log = function(val){
$scope.logs.push(val);
}
});.label {
text-decoration:underline;
color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="label">Edit mode :</div>
<textarea ng-model="post1" style="width:100%;" rows="5"></textarea><br />
<div class="label">Binding mode :</div>
<div ng-bind-html="post1"></div><br />
<div class="label">Data will be send to the server :</div>
<div>{{post1}}</div><br />
<div class="label">Logs (if needed) :</div>
<div ng-repeat="d in logs">
<p>{{($index+1) + ". " + d}}</p>
</div>
</div>
</div>