How to sanitize content binded with {{ }}

Question

I am trying to display a list of objects in a priming DataView. Amongst other variables, the object has blob images too. When I am trying to display the images I am getting sanitizing unsafe URL value '`data: image/png;base64`,' error. So I created SafeHtmlPipe with DomSanitizer as it is suggested all over the internet regarding this problem, but the error still present. Then I read here (In RC.1 some styles can't be added using binding syntax) that sanitized content can't be bound using prop="{{sanitizedContent}}" because {{}} stringifies the value before it is assigned which breaks sanitization. So is there a workaround to make this work? Thanks in advance for any help!

HTML

<p-dataView 
  *ngIf="filterResult && filterResult.list.length > 0"
  (onLazyLoad)="setLazyContainer($event)"
  #dv 
  [lazy]="true"
  [value]="filterResult.list"
  [paginator]="true" 
  [rows]="20" 
  paginatorPosition="both" 
  filterBy="name"
  [totalRecords]="filterResult.totalRecords"
  [rows]="filterData.rows"
  [first]="filterData.from"
  layout="grid">
  <ng-template let-merchant pTemplate="gridItem">
      <div style="padding:.5em" class="ui-g-12 ui-md-6 ui-lg-4">
          <p-panel [style]="{'text-align':'center'}">
              <img src="'data:image/png;base64,' + {{merchant.logo}} | safeHtml" width="90%">
              <div class="panel-title">{{merchant.name}}</div>
              <div class="panel-sub-title">{{'category' | lang }}:</div>
              <div class="panel-text">Lorem ipsum</div>
              <div class="panel-sub-title" >{{'town' | lang }}:</div>
              <div class="panel-text">{{merchant.city}}</div>
              <div style="display: flex; justify-content: space-between; background-color: black; color: white; padding: 8px;">
                <span style="font-size: 1.3rem; text-align: left;">{{ 'donation_offered' | lang }}:</span>
                <span style="font-size: 2.2rem; font-weight: 550; text-align: right;">??%</span>
              </div>
          </p-panel>
      </div>
  </ng-template>
</p-dataView>

SafeHtmlPipe

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'safeHtml', pure: true})
export class SafeHtmlPipe implements PipeTransform {

    constructor(private sanitizer: DomSanitizer) {}

    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }

}

UserDetails - the object to display

export class UserDetails implements Serializable {
    userId: number;
    user: DBUser;
    name: string;
    website: string;
    country: string;
    zipCode: string;
    city: string;
    streetAndNr: string;
    legalId: string;
    email: string;
    phoneNr: string;
    introductionHu: string;
    introductionEn: string;
    logo: any;
    cover: any;
}

what is the value of this "merchant.logo " ?? – M A Salman Mar 26 '20 at 10:47 — M A Salman, Mar 26 '20 at 10:47
merchant.logo is a base64 decoded image – szelelaci Mar 26 '20 at 11:00 — szelelaci, Mar 26 '20 at 11:00
Are you updating merchant value anywhere? – M A Salman Mar 26 '20 at 13:07 — M A Salman, Mar 26 '20 at 13:07

M A Salman · Answer 1 · 2020-03-26T13:13:00.403

0

Did you try this?

See it live here : https://stackblitz.com/edit/angular-5gcdx1

HTML:

<img [src]="merchant.logo | sanitizeHtml" />

FilterPipe

  return this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,'+url);

edited Mar 26 '20 at 13:13

answered Mar 26 '20 at 11:05

M A Salman

3,666
2
12
26

Does not work. Like this it tries to make a request to localhost:4200/ + safeHtml – szelelaci Mar 26 '20 at 11:51
@szelelaci It should be {{merchant.logo | safeHtml}}, not {{merchant.logo}} | safeHtml – DGarvanski Mar 26 '20 at 11:57
@DGarvanski @Supercool Thank you, but unfortunately does not work for me. Supercool for you it works because you don't have to use `{{}}`, but I do need `{{}}` to reference the object revealed by `` – szelelaci Mar 26 '20 at 12:28

How to sanitize content binded with {{ }}

1 Answers1