Safer image preview

client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts

@@ -1,9 +1,9 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { Notifier, ServerService } from '@app/core'
 import { Account, VideoChannel } from '@app/shared/shared-main'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { getBytes } from '@root-helpers/bytes'
+import { imageToDataURL } from '@root-helpers/images'
 
 @Component({
   selector: 'my-actor-avatar-edit',
@@ -30,10 +30,9 @@ export class ActorAvatarEditComponent implements OnInit {
   maxAvatarSize = 0
   avatarExtensions = ''
 
-  preview: SafeResourceUrl
+  preview: string
 
   constructor (
-    private sanitizer: DomSanitizer,
     private serverService: ServerService,
     private notifier: Notifier
   ) { }
@@ -63,7 +62,7 @@ export class ActorAvatarEditComponent implements OnInit {
     this.avatarChange.emit(formData)
 
     if (this.previewImage) {
-      this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile))
+      imageToDataURL(avatarfile).then(result => this.preview = result)
     }
   }
 

client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts

@@ -1,9 +1,10 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
+import { SafeResourceUrl } from '@angular/platform-browser'
 import { Notifier, ServerService } from '@app/core'
 import { VideoChannel } from '@app/shared/shared-main'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { getBytes } from '@root-helpers/bytes'
+import { imageToDataURL } from '@root-helpers/images'
 
 @Component({
   selector: 'my-actor-banner-edit',
@@ -30,7 +31,6 @@ export class ActorBannerEditComponent implements OnInit {
   preview: SafeResourceUrl
 
   constructor (
-    private sanitizer: DomSanitizer,
     private serverService: ServerService,
     private notifier: Notifier
   ) { }
@@ -59,7 +59,7 @@ export class ActorBannerEditComponent implements OnInit {
     this.bannerChange.emit(formData)
 
     if (this.previewImage) {
-      this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile))
+      imageToDataURL(bannerfile).then(result => this.preview = result)
     }
   }
 

client/src/app/shared/shared-actor-image/actor-avatar.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core'
-import { SafeResourceUrl } from '@angular/platform-browser'
 import { VideoChannel } from '../shared-main'
 import { Account } from '../shared-main/account/account.model'
 
@@ -22,7 +21,7 @@ export class ActorAvatarComponent {
   @Input() account: ActorInput
   @Input() channel: ActorInput
 
-  @Input() previewImage: SafeResourceUrl
+  @Input() previewImage: string
 
   @Input() size: ActorAvatarSize
 

client/src/app/shared/shared-forms/preview-upload.component.ts

@@ -1,7 +1,7 @@
 import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { ServerService } from '@app/core'
+import { imageToDataURL } from '@root-helpers/images'
 import { HTMLServerConfig } from '@shared/models'
 import { BytesPipe } from '../shared-main'
 
@@ -23,7 +23,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
   @Input() previewWidth: string
   @Input() previewHeight: string
 
-  imageSrc: SafeResourceUrl
+  imageSrc: string
   allowedExtensionsMessage = ''
   maxSizeText: string
 
@@ -32,7 +32,6 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
   private file: Blob
 
   constructor (
-    private sanitizer: DomSanitizer,
     private serverService: ServerService
   ) {
     this.bytesPipe = new BytesPipe()
@@ -81,8 +80,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
 
   private updatePreview () {
     if (this.file) {
-      const url = URL.createObjectURL(this.file)
-      this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)
+      imageToDataURL(this.file).then(result => this.imageSrc = result)
     }
   }
 }

client/src/root-helpers/images.ts

@@ -0,0 +1,13 @@
+function imageToDataURL (input: File | Blob) {
+  return new Promise<string>(res => {
+    const reader = new FileReader()
+
+    reader.onerror = err => console.error('Cannot read input file.', err)
+    reader.onloadend = () => res(reader.result as string)
+    reader.readAsDataURL(input)
+  })
+}
+
+export {
+  imageToDataURL
+}

client/src/root-helpers/index.ts

@@ -1,5 +1,6 @@
 export * from './users'
 export * from './bytes'
+export * from './images'
 export * from './peertube-web-storage'
 export * from './utils'
 export * from './plugins-manager'