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

Question

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

user3891559 user3891559 · Accepted Answer · 2016-12-29T16:21:53

I figured it out.

I wasn't putting any options into Cordova Camera getPicture.

I added

 let options = {
            quality : 75,
            destinationType : Camera.DestinationType.DATA_URL,
            sourceType : Camera.PictureSourceType.CAMERA,
            allowEdit : true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 300,
            targetHeight: 300,
            saveToPhotoAlbum: false
        };

and now it works fine.

When I wasn't passing options the "image" would just be a url to my temp camera roll folder (ios). When I pass options the "image" is base64 and I no longer get the warning.

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

1 Answers