Ionic 2 Angular 2 HTTP Post Base64 Image to Server 导致在发送前清理不安全的 URL

Posted 2023-03-13

【中文标题】Ionic 2 Angular 2 HTTP Post Base64 Image to Server 导致在发送前清理不安全的 URL

【英文标题】：Ionic 2 Angular 2 HTTP Post Base64 Image to Server results in sanitizing unsafe URL before sending

【发布时间】：2017-05-13 23:15:56

【问题描述】：

我正在使用 Ionic Native Camera 插件来拍照并将其保存在 base64 中。

然后我想将该图像发送到 Amazon s3 进行存储。

我通过 POST 向我的 API 发送一个包，其中包含 base64 图像、存储桶名、键名等。

在 http 将数据发送到我的服务器之前，我在控制台中收到一条警告：“警告：清理不安全的 URL 值数据：image/jpeg;base64”

我做了一些研究，发现 Angular 会清理 url，因为它们可能包含可能对接收者有害的 XSS。

因为我知道我的 URL 是干净的，所以我导入了 DomSanitizer 并在发送前在图像上使用了“bypassSecurityTrustUrl”。

我仍然收到与以前相同的错误消息。

是否可以为出站 HTTP 帖子禁用此功能？我仍然想保留它以用于传入数据。

这是图片服务代码...

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)));

        )
    

当我控制台日志“pkg 上传配置文件图像”时，图像值看起来像这样 "image":"changingThisBreaksApplicationSecurity":"data:image/jpeg;base64,file:///var/mobile/Containers/Data/Application/xxxxxxxxxx/tmp/cdv_photo_007.jpg",

我从 Amazon S3 得到的响应很好，文件以正确的键名发布到正确的存储桶中，但图像已损坏且只有约 80 字节。

非常感谢一些帮助，这在我使用 Angular 1.x 的 Ionic 1 应用程序上运行良好。

谢谢

【参考方案1】：

我想通了。

我没有在 Cordova Camera getPicture 中添加任何选项。

我加了

 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
        ;

现在它工作正常。

当我没有传递选项时，“图像”将只是我的临时相机胶卷文件夹 (ios) 的 URL。当我传递选项时，“图像”是 base64，我不再收到警告。

【讨论】：

值得强调的是，相关选项是destination: Camera.DestinationType.DATA_URL。正是这个选项使它将 url-to-device-storage 更改为 whole-data-in-the-url 格式。