Question

我有一个角度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;.....">

我如何解决＆＃34; 不安全＆＃34;在管道？

Answer 1

您的转换应使用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('');
    }   
  }
}

WARNING: calling this method with untrusted user data exposes your application to XSS security risks!

Answer 2

这是我在这里找到并使用朋友帮助的方式：

管：

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)">

用于返回图像URL Angular 6的Base64版本的管道

2 个答案: