[GLAM-1113][IIIF-148] fix url resource embedding

Author: atarix83

src/app/item-page/mirador-viewer/mirador-viewer.component.html

@@ -1,4 +1,6 @@
 <p class="full-text-op">{{'iiifviewer.fullscreen.notice' | translate}}</p>
 <p *ngIf="!isViewerAvailable" id="viewer-message">{{viewerMessage}}</p>
-<iframe title="Mirador Viewer" allowtransparency="true" *ngIf="isViewerAvailable" [src]="iframeViewerUrl | async" id="mirador-viewer"></iframe>
+<ng-container *ngVar="(iframeViewerUrl | async) as iframeUrl">
+  <iframe title="Mirador Viewer" allowtransparency="true" *ngIf="isViewerAvailable && iframeUrl" [src]="(iframeUrl) | dsSafeUrl" id="mirador-viewer"></iframe>
+</ng-container>
 

src/app/item-page/mirador-viewer/mirador-viewer.component.spec.ts

@@ -13,6 +13,8 @@ import { of as observableOf } from 'rxjs';
 import { MiradorViewerService } from './mirador-viewer.service';
 import { HostWindowService } from '../../shared/host-window.service';
 import { BundleDataService } from '../../core/data/bundle-data.service';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { SafeUrlPipe } from '../../shared/utils/safe-url-pipe';
 
 
 function getItem(metadata: MetadataMap) {
@@ -44,7 +46,7 @@ describe('MiradorViewerComponent with search', () => {
           useClass: TranslateLoaderMock
         }
       })],
-      declarations: [MiradorViewerComponent],
+      declarations: [MiradorViewerComponent, VarDirective, SafeUrlPipe],
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
@@ -65,6 +67,7 @@ describe('MiradorViewerComponent with search', () => {
       comp = fixture.componentInstance;
       comp.object = getItem(noMetadata);
       comp.searchable = true;
+      comp.iframeViewerUrl = observableOf('testUrl');
       fixture.detectChanges();
     }));
 
@@ -107,7 +110,7 @@ describe('MiradorViewerComponent with multiple images', () => {
           useClass: TranslateLoaderMock
         }
       })],
-      declarations: [MiradorViewerComponent],
+      declarations: [MiradorViewerComponent, VarDirective, SafeUrlPipe],
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
@@ -129,6 +132,7 @@ describe('MiradorViewerComponent with multiple images', () => {
       comp = fixture.componentInstance;
       comp.object = getItem(noMetadata);
       comp.searchable = false;
+      comp.iframeViewerUrl = observableOf('testUrl');
       fixture.detectChanges();
     }));
 
@@ -167,7 +171,7 @@ describe('MiradorViewerComponent with a single image', () => {
           useClass: TranslateLoaderMock
         }
       })],
-      declarations: [MiradorViewerComponent],
+      declarations: [MiradorViewerComponent, VarDirective, SafeUrlPipe],
       providers: [
         { provide: BitstreamDataService, useValue: {} },
         { provide: BundleDataService, useValue: {} },
@@ -188,6 +192,7 @@ describe('MiradorViewerComponent with a single image', () => {
       fixture = TestBed.createComponent(MiradorViewerComponent);
       comp = fixture.componentInstance;
       comp.object = getItem(noMetadata);
+      comp.iframeViewerUrl = observableOf('testUrl');
       fixture.detectChanges();
     }));
 
@@ -220,7 +225,7 @@ describe('MiradorViewerComponent in development mode', () => {
           useClass: TranslateLoaderMock
         }
       })],
-      declarations: [MiradorViewerComponent],
+      declarations: [MiradorViewerComponent, VarDirective, SafeUrlPipe],
       providers: [
         { provide: BitstreamDataService, useValue: {} }
       ],
@@ -241,6 +246,7 @@ describe('MiradorViewerComponent in development mode', () => {
       fixture = TestBed.createComponent(MiradorViewerComponent);
       comp = fixture.componentInstance;
       comp.object = getItem(noMetadata);
+      comp.iframeViewerUrl = observableOf('testUrl');
       fixture.detectChanges();
     }));
 

src/app/item-page/mirador-viewer/mirador-viewer.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
 import { Item } from '../../core/shared/item.model';
 import { environment } from '../../../environments/environment';
 import { BitstreamDataService } from '../../core/data/bitstream-data.service';
@@ -49,7 +49,7 @@ export class MiradorViewerComponent implements OnInit {
   /**
    * The url for the iframe.
    */
-  iframeViewerUrl: Observable<SafeResourceUrl>;
+  iframeViewerUrl: Observable<string>;
 
   /**
    * Sets the viewer to show or hide thumbnail side navigation menu.
@@ -75,7 +75,7 @@ export class MiradorViewerComponent implements OnInit {
    * Creates the url for the Mirador iframe. Adds parameters for the displaying the search panel, query results,
    * or  multi-page thumbnail navigation.
    */
-  setURL() {
+  getURL() {
     // The path to the REST manifest endpoint.
     const manifestApiEndpoint = encodeURIComponent(environment.rest.baseUrl + '/iiif/'
       + this.object.id + '/manifest');
@@ -107,8 +107,7 @@ export class MiradorViewerComponent implements OnInit {
       viewerPath += `&canvasIndex=${parseInt(this.canvasIndex, 10) - 1}`;
     }
 
-    // TODO: Should the query term be trusted here?
-    return this.sanitizer.bypassSecurityTrustResourceUrl(viewerPath);
+    return viewerPath;
   }
 
   ngOnInit(): void {
@@ -138,7 +137,7 @@ export class MiradorViewerComponent implements OnInit {
         const observable = of('');
         this.iframeViewerUrl = observable.pipe(
           map((val) => {
-            return this.setURL();
+            return this.getURL();
           })
         );
       } else {
@@ -152,7 +151,7 @@ export class MiradorViewerComponent implements OnInit {
             if (c > 1) {
               this.multi = true;
             }
-            return this.setURL();
+            return this.getURL();
           })
         );
       }

src/app/item-page/mirador-viewer/mirador-viewer.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MiradorViewerComponent } from './mirador-viewer.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../shared/shared.module';
 
 
 @NgModule({
@@ -13,7 +14,8 @@ import { TranslateModule } from '@ngx-translate/core';
   ],
   imports: [
     CommonModule,
-    TranslateModule
+    TranslateModule,
+    SharedModule
   ]
 })
 export class MiradorViewerModule { }