Труба для возврата версии Base64 URL изображения Angular 6

Question

У меня есть приложение angular 6, и в некоторых HTML-кодах я показываю изображения в формате Base64.Для этого я создал канал для возврата версии Base64 данных, которые я отправляю в канал.Это моя труба:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'base64Imag',
})

export class Base64ImagPipe implements PipeTransform {
    transform(value: any, args?: any): any {
    let Base64 = BASE_LIBRARY_CODES;

    if (typeof(value) != 'undefined') {
       return Base64.encode(value);
    }else{
       return '';
    }   
  }
}

Но она возвращает это:

<img src="unsafe:data:image/svg+xml;.....">

Как я могу исправить " unsafe " в трубе?

Answer 1

Вот как я нашел и работает с помощью друзей здесь:

Труба:

transform(value: any, args?: any) {
    if (typeof(value) != 'undefined') {
       return 'data:image/svg+xml;base64,' + btoa(value);
    }else{
       return '';
    }   
}

В компоненте:

import { DomSanitizer } from '@angular/platform-browser';
constructor(public _DomSanitizer: DomSanitizer) { }

В html-коде:

<img width="50" [src]="_DomSanitizer.bypassSecurityTrustUrl(SVG_URL | base64Imag)">

Answer 2

Ваше преобразование должно использовать DomSanitizer

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

@Pipe({
  name: 'base64Imag',
})

export class Base64ImagPipe implements PipeTransform {

    constructor(private domSanitizer: DomSanitizer) {}

    transform(value: any, args?: any): SafeUrl {
    let Base64 = BASE_LIBRARY_CODES;

    if (typeof(value) != 'undefined') {
       return this.domSanitizer.bypassSecurityTrustUrl(Base64.encode(value));
    }else{
       return this.domSanitizer.bypassSecurityTrustUrl('');
    }   
  }
}

ВНИМАНИЕ: вызов этого метода с ненадежными пользовательскими данными подвергает ваше приложение угрозам безопасности XSS!