#StackBounty: #styles #angular8 #sanitize #ng-style Function call inside ngStyle gets sanitized

Bounty: 50

I have a problem with style sanitization with Angular 8.
I’ve used ngStyle multiple times, but this time i cannot set the border of a td element.

I am trying to set the border style based on a field. If this field has a relevant content for me then i hilghlight it, otherwise i don’t. I don’t know the number of possible values of the field, neither the exact values: it’s complitely dynamic, I only know my values of interest.

I’m returning the border style from a function inside the .ts file. Here are the code snippets:

<ng-container matColumnDef="{{cam}}">
   <th mat-header-cell *matHeaderCellDef class="header"> {{cam}} </th>
   <td mat-cell *matCellDef="let piano" class="cellaMagazzino" [ngStyle]=" {'border':shouldHighlight(piano[cam])}">
      <div>
           <!--content-->
      </div>
   </td>
</ng-container>

My typescript function looks like this:

shouldHighlight(element){
if (this.listaCommittenti == undefined && this.listaNumOrdine == undefined) {
  let found = this.releventContentList.find(item => item.property == element.property)
  let result = found != undefined ? '3px solid ' + this.myVariable["color"] : ""
  return result
}

I used ngStyle calling functions other times, but in this case i get the error:

WARNING: sanitizing unsafe style value 3px solid rgb(241, 196, 15) (see http://g.co/ng/security#xss).

Is there some kind of configuration to do? is there a workaround?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.