Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use filter to mark sensitive data for mousestats

Tags:

angularjs

I want to decorate some sensitive data with MouseStats comments. Currently i'm doing it like that:

<td><!-- StartMouseStatsHide -->{{ $ctrl.payerName }}<!-- EndMouseStatsHide --></td>

but there are plenty of sensitive data in many places of interface, so i tried to use a filter to decorate the value

<td>{{ $ctrl.payerName|mousestats_hide }}</td>

Filter simply surrounds value with comments. The problem is that in that way comments are being escaped to entities.

What do you suggest? Is it possible to do it using filters?

like image 631
Jakub Filipczyk Avatar asked May 06 '16 07:05

Jakub Filipczyk


1 Answers

Is it possible to do it using filters?

Yes it is possible to prepend/append a variable using angular filters.

The problem is that in that way comments are being escaped to entities..

That is because you are directly interpolating the variable in scope with {{ $ctrl.payerName }}. It does not parse HTML tags and show the resultant string as is.

You need ng-bind-html directive to prevent the comments being escaped to entities, if you want to add HTML comments around given values.

So rather than doing

<td>{{ $ctrl.payerName|mousestats_hide }}</td>

You should do

<td ng-bind-html="$ctrl.payerName|mousestats_hide"></td>

Here's the working demo which generates the following markup. (I'm not much of a fan of <table> so just replaced <td> with a <span>)

<body ng-controller="MainCtrl" class="ng-scope">
    <span>Payer Name is: </span>
    <span ng-bind-html="payerName |mousestats_hide" class="ng-binding">
      <!-- StartMouseStatsHide -->Jakub Filipczyk<!-- EndMouseStatsHide --> 
    </span>
</body>

Noticed the use of $sce service I injected in filter ?

It is to prevent [$sce:unsafe] error that makes angular believe someone is attempting to use an unsafe value in a safe context.

Hope it helped!

like image 181
nalinc Avatar answered Nov 15 '22 00:11

nalinc