Angular2 Base64 sanitizing unsafe URL value

Question

Response from my server looks like following:

[{"coreGoalId":1,"title":"Core goal 1","infrastructure":"Sample Infrastructure","audience":"People","subGoals":null,"benefits":[{"benefitId":1,"what":"string","coreGoalId":1}],"effects":null,"steps":null,"images":[{"imagelId":1,"base64":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcU\nFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgo\nKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAIWAe4DASIA\nAhEBAxEB/8QAHAABAAIDAQEB"}]}]

I am trying to display the base64 image returned in it.

In my component:

ngOnInit() {

    this.homeService.getGoals()
    .subscribe(
        goals => this.coreGoals = goals,
        error =>  this.errorMessage = <any>error);
}

and then in template:

<ul>
    <li *ngFor="let goal of coreGoals">
        {{goal.title}}
        <img [src]="'data:image/jpg;base64,'+goal.images[0].base64 | safeHtml" />
    </li>
</ul>

Where safeHtml is a Pipe I created like following:

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

@Pipe({name: 'safeHtml'})
export class SafeHtml {
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

This gives me Required a safe URL, got a HTML error. What is going wrong here? If I remove the pipe from <img /> then it says unsafe url.

Günter Zöchbauer · Accepted Answer · 2017-03-31 13:10:38Z

68

You would need

bypassSecurityTrustResourceUrl(html);

instead of

bypassSecurityTrustHtml(html);

answered Mar 31, 2017 at 13:10

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thinker Over a year ago

Thanks! That was my mistake.

Vahid Over a year ago

I also recommend you enable pure:true for you pipe

Srihari GouthamGr · Accepted Answer · 2018-05-17 12:42:59Z

-2

I had the same issue. Our application 'X' used to store locally uploaded images by converting them to base64 before saving it to the database(We used to pop the intial data i.e data:image/jpg;base64). While recovering it to display, I had the same issue. I used to concat the popped data to the recovered base64 string. It used to throw the above error. So, we decided to store the entire converted string without popping it and now its working fine. See, if it helps!

answered May 17, 2018 at 12:42

Srihari GouthamGr

2982 gold badges4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular2 Base64 sanitizing unsafe URL value

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related