Применить DomSanitizationService в Angular 6 - PullRequest
Новая
       42

Применить DomSanitizationService в Angular 6

1 голос
/ 25 октября 2019

В настоящее время я должен поддерживать проект Angular.

На небезопасном изображении имеется отчет о проблеме безопасности, сообщение об ошибке отображается в консоли Chrome следующим образом: 

unsafe:data:image/png;base64,:1 GET unsafe:data:image/png;base64, net::ERR_UNKNOWN_URL_SCHEME

Я Googleвокруг, и обнаружил, что мне нужно использовать DomSanitizationService для очистки значения. Тем не менее, я продолжаю иметь проблемы, когда код на нем, я подозреваю, что синтаксическая ошибка. Ниже приведен мой HTML-код: 

<img src="{{ _DomSanitizationService.bypassSecurityTrustUrl(captchaSrc) }}"  height="auto" width="100%" id="captcha-img" />

И ниже приведен мой код файла TypeScript: 

import { DomSanitizer } from '@angular/platform-browser';

captchaSrc: string = 'data:image/png;base64,';

constructor(
    public _DomSanitizationService: DomSanitizer
  ) {
  }

this.captchaSrc += this.captcha.captchaImg;

У меня возникает следующая ошибка в консоли Chrome: 

unsafe:SafeValue must use [property]=binding: data:image/png;base64, (see http://g.co/ng/security net::ERR_UNKNOWN_URL_SCHEME

Есть какие-нибудь идеи о том, какую ошибку я совершаю?

***** Редактировать ***** После того, как я передам ответ Адриты Шармы, у меня все еще есть какая-то проблема, которая заключается в том, что я проходил мимо метода, ноне вступает в силу: 

startRegistration(via: string): void {
     this.sharedService.generateCaptcha().subscribe(response => {
     this.captcha = response;
     this.captchaSrc += this.captcha.captchaImg;
     this._DomSanitizationService.bypassSecurityTrustUrl(this.captchaSrc);
    });
}

Ответы [ 2 ]

1 голос
/ 25 октября 2019

Попробуйте так: 

constructor( public _DomSanitizationService: DomSanitizer) {
   _DomSanitizationService.bypassSecurityTrustUrl(this.captchaSrc)
}

Шаблон: 

<img [src]="captchaSrc" height="auto" width="100%" id="captcha-img" />

РЕДАКТИРОВАТЬ: 

yourMethod(){
    this.captchaSrc = this._DomSanitizationService.bypassSecurityTrustUrl('data:image/png;base64,' + this.captchaSrc)
}
0 голосов
/ 25 октября 2019

Попробуйте .ts 

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
export class TESTComponent {
  _imageUrlNotSanitized: SafeUrl;
  image: string;
  constructor(private sanitizer: DomSanitizer) {}
  ngOnInit() {
      this._imageUrlNotSanitized = this.sanitizer.bypassSecurityTrustUrl(this.image);
}
}

.html <img [src]="_imageUrlNotSanitized">

...