Ionic 2 Angular 2 HTTP Post Base64 Image to Server results in sanitizing unsafe URL before sending

Ionic Framework ionic-v3
1

X-post on stackoverflow

I am using the Ionic Native Camera plugin to take a picture and save it in base64.

Then I want to send that image to Amazon s3 to store.

I send a package via POST to my API containing the base64 image, bucketname, keyname, etc.

Before http sends the data to my server I get a warning in my console saying: “WARNING: sanitizing unsafe URL value data:image/jpeg;base64”

I did some research and found that Angular sanitizes urls because they might contain XSS that could be harmful to the recipient.

Since I know my URLs will be clean, I imported DomSanitizer and used “bypassSecurityTrustUrl” on the image before sending.

I am still getting the same error message as before.

Is there anyway to disable this for outbound HTTP posts? I would still like to keep it for incoming data.

Here is image service code…

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { DomSanitizer } from '@angular/platform-browser';


@Injectable()
export class ImageService {
    
    constructor(
        private http: Http,
        private sanitizer: DomSanitizer
        ) {}

    uploadProfileImage(userInfo, image) {

        return new Promise(resolve => {
        let pkg = {
            image: this.sanitizer.bypassSecurityTrustUrl(image),
            name: userInfo.uid,
            folder: 'profileImages',
            email: userInfo.email
        }

        console.log('pkg upload profile image', JSON.stringify(pkg));
        this.http.post('https://myurl/api/uploadpicture', pkg)
           .subscribe( res => console.log('response from upload picture', JSON.stringify(res)));
        
        })
    }

}

When I console log ‘pkg upload profile image’, the image value looks like this
{"image":{"changingThisBreaksApplicationSecurity":"data:image/jpeg;base64,file:///var/mobile/Containers/Data/Application/xxxxxxxxxx/tmp/cdv_photo_007.jpg"},

My response from Amazon S3 is fine, a file is posted in the correct bucket with the correct key name, but the image is corrupted and only ~80 bytes.

I would really appreciate some help, this was working fine on my Ionic 1 app using Angular 1.x.

Thanks

2

I don’t think you want to be passing DomSanitizer’s output outside of your app. Are you sure the warning is coming from the code that is sending to the server, and not (for example) from a preview display?

3

Try uploading the image as base64 directly without saving it first. I upload my image directly in my app and have no sanitizing problems.