Как продезинфицировать контент, связанный с {{}} - PullRequest
Новая
       53

Как продезинфицировать контент, связанный с {{}}

0 голосов
/ 26 марта 2020

Я пытаюсь отобразить список объектов в заправке DataView. Среди других переменных, объект также имеет изображения BLOB-объектов. Когда я пытаюсь отобразить изображения, я получаю ошибку sanitizing unsafe URL value '`data: image/png;base64`,'. Таким образом, я создал SafeHtmlPipe с DomSanitizer, как это предлагается в целых числах rnet относительно этой проблемы, но ошибка все еще присутствует. Затем я читаю здесь ( В R C .1 некоторые стили не могут быть добавлены с использованием синтаксиса привязки ), что очищенное содержимое не может быть связано с использованием prop="{{sanitizedContent}}", поскольку {{}} преобразует в строку значение перед ним назначается, что нарушает санитарную обработку. Так есть ли обходной путь, чтобы сделать эту работу? Заранее благодарим за любую помощь!

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 - объект для отображения 

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;
}

1 Ответ

0 голосов
/ 26 марта 2020

Вы пробовали это?

Смотрите его здесь: https://stackblitz.com/edit/angular-5gcdx1

HTML: 

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

FilterPipe 

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