angularjs - ng-non-bindable only for the content of the element -
in our angular application, have link filled user content on server side. need tell angular not interpret link content. otherwise, if user, or attacker puts angular binding expressions in there (say {{user.password}}) angular evaluate it, opening security hole - kind of xss attack.
ng-non-bindable that. however, want link manipulated angular.
<a href="" class="side-bar-element" ng-class="{ 'side-bar-element-selected': issiteselected(@site.value.id) }">@site.value.name</a> @site.value.name server side code insert content.
if put ng-non-bindable on element, ng-class won't work. solution can see insert span/div inside , apply ng-non-bindable that:
<a href="" class="side-bar-element" ng-class="{ 'side-bar-element-selected': issiteselected(@site.value.id) }"><span ng-non-bindable>@site.value.name</span></a> this seems clunky, having modify html structure stop angular interfering server-side data.
is there cleaner solution?
ideally ng-non-bindable (or variant) mean "don't bind content, treat element normal otherwise".
if user, or attacker puts angular binding expressions user content (say {{user.password}}) angular evaluate it, opening security hole - kind of xss attack.
use $delegate service lower ng-non-bindable directive priority:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="nonbindableexample"> <script> function delegator($delegate) { /* override directive definition object (ddo) */ $delegate[0].priority = 0; return $delegate; } function provider($provide) { /* decorate ng-non-bindable proxy function */ $provide.decorator('ngnonbindabledirective', ["$delegate", delegator]); } /* inject provider , delegator methods services */ provider['$inject'] = ['$provide']; delegator['$inject'] = ['$delegate']; /* inject module new provider */ angular.module('nonbindableexample', []); angular.module("nonbindableexample").config(["$provide",provider]); </script> <div>{{$id}}</div><div ng-non-bindable class="{{$id}}">{{$id}}</div></div> </body>when there multiple directives defined on single dom element, necessary specify order in directives applied. priority used sort directives before compile functions called. priority defined number. directives greater numerical priority compiled first. pre-link functions run in priority order, post-link functions run in reverse order. order of directives same priority undefined. default priority 0.
or separate user content via <script type="text/ng-template">:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!--declare module--> <script> angular.module('foo', []); </script> <!--auto bootstrapping--> <div ng-app="foo"> <!--inline template--> <script type="text/ng-template" id="baz"> <span ng-non-bindable>hi {{bar}}</span> </script> <!--data binding--> <a href="" ng-init="bar=1" ng-class="{{bar}}" ng-include="'baz'"></a> </div>use ng-include directive a element , use span element ng-non-bindable directive decouple text element.
references
Comments
Post a Comment