FEAT #13670 TIME 1 add pipe secure url for view front url

src/frontend/app/app-common.module.ts

@@ -26,6 +26,7 @@ import { TimeLimitPipe } from '../plugins/timeLimit.pipe';
 import { FilterListPipe } from '../plugins/filterList.pipe';
 import { FullDatePipe } from '../plugins/fullDate.pipe';
 import { SafeHtmlPipe } from '../plugins/safeHtml.pipe';
+import { SecureUrlPipe } from '../plugins/secureUrl.pipe';
 import { EcplOnlyofficeViewerComponent } from '../plugins/onlyoffice-api-js/onlyoffice-viewer.component';
 
 /*FRONT IMPORTS*/
@@ -110,6 +111,7 @@ export class MyHammerConfig extends HammerGestureConfig {
         FilterListPipe,
         FullDatePipe,
         SafeHtmlPipe,
+        SecureUrlPipe,
         IndexingGroupModalComponent,
         SmdFabSpeedDialComponent,
         SmdFabSpeedDialTrigger,
@@ -156,6 +158,7 @@ export class MyHammerConfig extends HammerGestureConfig {
         FilterListPipe,
         FullDatePipe,
         SafeHtmlPipe,
+        SecureUrlPipe,
         PdfViewerModule,
         NgStringPipesModule,
         SmdFabSpeedDialComponent,

src/frontend/app/attachments/attachments-list.component.html

@@ -16,7 +16,7 @@
             </mat-button-toggle>
         </mat-button-toggle-group>
         <mat-card *ngFor="let attachment of attachments | filterList:currentFilter:'type'"
-            [class.signed]="attachment.status==='SIGN'" [style.background-image]="'url('+attachment.thumbnailUrl+')'"
+            [class.signed]="attachment.status==='SIGN'" [style.background-image]="'url('+(attachment.thumbnailUrl | secureUrl | async)+')'"
             style="padding:0;margin: 30px;min-height: 300px;background-size: cover;overflow: hidden;"
             (mouseover)="$event.stopPropagation();toggleInfo(attachment,true)">
             <div class="layout" *ngIf="attachment.hideMainInfo" [@myAnimation] (click)="showAttachment(attachment)">

src/frontend/app/folder/document-list/folder-document-list.component.html

 <mat-sidenav-container class="maarch-container">
     <mat-sidenav-content>
         <mat-card id="viewThumbnail" style="display:none;position: fixed;z-index: 2;margin-left: 1px;">
-            <img style="max-height: 100vh;" src="{{thumbnailUrl}}" />
+            <img style="max-height: 100vh;" [src]="thumbnailUrl | secureUrl | async" />
         </mat-card>
         <div class="bg-head">
             <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">

src/frontend/app/home/followed-list/followed-document-list.component.html

 <mat-sidenav-container class="maarch-container">
     <mat-sidenav-content>
         <mat-card id="viewThumbnail" style="display:none;position: fixed;z-index: 2;margin-left: 1px;">
-            <img style="max-height: 100vh;" src="{{thumbnailUrl}}" />
+            <img style="max-height: 100vh;" [src]="thumbnailUrl | secureUrl | async" />
         </mat-card>
         <div class="bg-head">
             <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">

src/frontend/app/home/home.component.html

 <mat-sidenav-container autosize class="maarch-container">
     <mat-sidenav-content>
         <mat-card id="viewThumbnail" style="display:none;position: fixed;z-index: 2;margin-left: 1px;"><img
-                style="max-height: 100vh;" src="{{thumbnailUrl}}" />
+                style="max-height: 100vh;" [src]="thumbnailUrl | secureUrl | async" />
         </mat-card>
         <div class="bg-head">
             <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">

src/frontend/app/linkedResource/linked-resource-list.component.html

@@ -6,7 +6,7 @@
 <ng-template #elseLoading>
     <mat-card id="viewThumbnail"
         style="display:none;position: fixed;z-index: 2;margin-left: 1px;left: 50%;transform: translate(-50%,-50%);top: 50%;">
-        <img style="max-height: 100vh;" src="{{thumbnailUrl}}" /></mat-card>
+        <img style="max-height: 100vh;" [src]="thumbnailUrl | secureUrl | async" /></mat-card>
     <div class="row" style="margin: 0px;">
         <div class="col-md-12">
             <mat-paginator #paginator [length]="100" [hidePageSize]="true" [pageSize]="10">

src/frontend/app/list/basket-list.component.html

     <mat-sidenav-container class="maarch-container">
         <mat-sidenav-content>
-            <mat-card id="viewThumbnail" style="display:none;position: fixed;z-index: 2;margin-left: 1px;"><img style="max-height: 100vh;" src="{{thumbnailUrl}}" /></mat-card>
+            <mat-card id="viewThumbnail" style="display:none;position: fixed;z-index: 2;margin-left: 1px;"><img style="max-height: 100vh;" [src]="thumbnailUrl | secureUrl | async" /></mat-card>
             <div class="bg-head">
                 <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
                     <div class="bg-head-title-label">

src/frontend/plugins/secureUrl.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Observable } from 'rxjs/internal/Observable';
+import { AuthService } from '../service/auth.service';
+
+@Pipe({
+    name: 'secureUrl'
+})
+export class SecureUrlPipe implements PipeTransform {
+
+    constructor(
+        private http: HttpClient,
+        private authService: AuthService
+    ) { }
+
+    transform(url: string) {
+        const headers = new HttpHeaders({
+            'Authorization': 'Bearer ' + this.authService.getToken()
+        });
+
+        return new Observable<string>((observer) => {
+            // This is a tiny blank image
+            observer.next('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');
+
+            if (url !== undefined) {
+                // The next and error callbacks from the observer
+                const { next, error } = observer;
+
+                this.http.get(url, { headers: headers, responseType: 'blob' }).subscribe(response => {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(response);
+                    reader.onloadend = () => {
+                        observer.next(reader.result as any);
+                    };
+                });
+            }
+            return { unsubscribe() { } };
+        });
+    }
+}