Can't Display the image after sanitizing it

Question

I am trying to Make an image file display on the Html of ionic(angular) component. The image file is fetched from the device itself and converted to file format for processing.

I am using ionic(angular) framework to build an social media platform and I am able to get the image and turn it into a file so it is better for me to process it on backend but I want to display the selected image on the User side so he can preview it .

But when I am doing this in the addpost.html file <ion-img [src]="imageSrc" *ngIf="imageSrc"></ion-img>

In the Console I am getting this error->

SafeValue%20must%20use%20[property]=binding:%20blob:http://localhost:8100/d4a16d48-5b86-47e9-86a4-dcfb9096b236%20(see%20https://g.co/ng/security#xss):1     GET http://localhost:8100/SafeValue%20must%20use%20[property]=binding:%20blob:http://localhost:8100/d4a16d48-5b86-47e9-86a4-dcfb9096b236%20(see%20https://g.co/ng/security 404 (Not Found)

I have used the dom sanitizer as you can see in the ts file below but it still doesn't work I put the code in the CHatGpt and it says all is correct don't know the reason of this error refer to some community forum so here I am This is my addpost.ts file `

import { Component, OnInit } from '@angular/core';
import { NavController, ToastController } from '@ionic/angular';
import { Camera, CameraResultType, CameraSource,Photo } from '@capacitor/camera';
import { PostService } from '../services/post.service';
import { HttpErrorResponse } from '@angular/common/http';
import { ActionSheetController } from '@ionic/angular';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@Component({
  selector: 'app-add-post',
  templateUrl: './add-post.component.html',
  styleUrls: ['./add-post.component.scss'],
})
export class AddPostComponent  implements OnInit {

  selectedImage: any = null;
  imageSrc: SafeUrl | undefined;
  image:any;
  constructor(private navCtrl: NavController, private toastController: ToastController, private postService: PostService
    ,private actionSheetController:ActionSheetController,private sanitizer:DomSanitizer) { }
  


  ngOnInit() {}




  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Choose Source',
      buttons: [
        {
          text: 'Take Photo',
          icon: 'camera',
          handler: () => {
            this.takePhoto();
          },
        },
        {
          text: 'Choose from Gallery',
          icon: 'images',
          handler: () => {
            this.chooseFromGallery();
          },
        },
        {
          text: 'Cancel',
          role: 'cancel',
        },
      ],
    });

    await actionSheet.present();
  }
  async takePhoto() {
    console.log('Taking photo...');
    const image = await Camera.getPhoto({
      quality: 100,
      resultType: CameraResultType.Uri,
      source: CameraSource.Camera,
    });
    
    const imageFile = await this.createFileFromPhoto(image);
    this.processImage(imageFile);
  }

  async chooseFromGallery() {
    console.log('Choosing from gallery...');
    const image = await Camera.getPhoto({
      quality: 100,
      resultType: CameraResultType.Uri,
      source: CameraSource.Photos,
    });

    const imageFile = await this.createFileFromPhoto(image);
    this.processImage(imageFile);
  }

  async createFileFromPhoto(photo: Photo): Promise<File> {
    console.log('Creating file from photo...');
    const response = await fetch(photo.webPath!);
    const blob = await response.blob();

    // Create a File instance from the Blob
    const imageFile = new File([blob], 'image.jpg', { type: 'image/jpeg' });
    return imageFile;
  }

  async processImage(imageFile: File) {
    console.log('Processing image...');
    this.selectedImage = imageFile;
    const blobUrl = URL.createObjectURL(imageFile);
    this.imageSrc = this.sanitizer.bypassSecurityTrustUrl(blobUrl);
    console.log('Image processed and displayed.');
    console.log('Image processed and sanitized.');
  }
}

Did you end up solving this? – Eric Belisle Giddings Aug 25 '23 at 22:03 — Eric Belisle Giddings, Aug 25 '23 at 22:03

score 0 · Answer 1 · answered Aug 23 '23 at 23:39

It looks like you're using DomSanitizer correctly, but I think you should be using bypassSecurityTrustResourceUrl instead of bypassSecurityTrustUrl

Replace this line:

this.imageSrc = this.sanitizer.bypassSecurityTrustUrl(blobUrl);

With:

this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(blobUrl);

bypassSecurityTrustResourceUrl is designed for binding values that will load and display entire resources, such as images, iframes, etc. whereas bypassSecurityTrustUrl is more appropriate for just a navigation link or similar. The former being more permissive than the latter.

Angular docs do mention img src's with bypassSecurityTrustUrl https://angular.io/api/platform-browser/DomSanitizer#bypasssecuritytrusturl but I believe the nature of the blobUrl requires bypassSecurityTrustResourceUrl

Can't Display the image after sanitizing it

1 Answers1