[IIIF-188] configure headers adaptions for allowed origins on IIIF viewer

Author: FrancescoMolinaro

server.ts

@@ -65,6 +65,8 @@ const DIST_FOLDER = join(process.cwd(), 'dist/browser');
 // Set path fir IIIF viewer.
 const IIIF_VIEWER = join(process.cwd(), 'dist/iiif');
 
+const miradorHtml = join(IIIF_VIEWER, '/mirador/index.html');
+
 const indexHtml = join(DIST_FOLDER, 'index.html');
 
 const cookieParser = require('cookie-parser');
@@ -86,6 +88,8 @@ const _window = domino.createWindow(indexHtml);
 // The REST server base URL
 const REST_BASE_URL = environment.rest.ssrBaseUrl || environment.rest.baseUrl;
 
+const IIIF_ALLOWED_ORIGINS = environment.mirador.allowedOrigins;
+
 // Assign the DOM window and document objects to the global object
 (_window as any).screen = {deviceXDPI: 0, logicalXDPI: 0};
 (global as any).window = _window;
@@ -231,6 +235,35 @@ export function app() {
   */
   router.use('/iiif', express.static(IIIF_VIEWER, { index: false }));
 
+  /*
+  * Adapt headers to allow embedding of IIIF viewer in authorized pages
+  */
+  server.get('/iiif/mirador/index.html', (req, res) => {
+    const referer = req.headers.referer;
+
+    if(referer && !referer.startsWith('/')) {
+      try {
+        const origin =  new URL(referer).origin;
+        if (isIiifAllowedOrigin(origin)) {
+          console.info('Found allowed origin, setting headers for IIIF viewer');
+          // CORS header
+          res.setHeader('Access-Control-Allow-Origin', origin);
+          // CSP for iframe embedding
+          res.setHeader('Content-Security-Policy', `frame-ancestors ${origin};`);
+          console.info('Headers have been set ', res.getHeader('Access-Control-Allow-Origin'), res.getHeader('Content-Security-Policy'));
+        }
+      } catch (error) {
+        console.error("An error occurred setting security headers in response:", error.message);
+      }
+    }
+
+    res.sendFile(miradorHtml, (err) => {
+      if (err) {
+        res.status(500).send('Internal Server Error');
+      }
+    });
+  });
+
   /**
    * Checking server status
    */
@@ -665,6 +698,14 @@ function healthCheck(req, res) {
       });
     });
 }
+
+/*
+ * Helper to determine if the origin is allowed
+ */
+function isIiifAllowedOrigin(origin) {
+  return origin === REST_BASE_URL.replace("/server", "") || IIIF_ALLOWED_ORIGINS.includes(origin);
+}
+
 // Webpack will replace 'require' with '__webpack_require__'
 // '__non_webpack_require__' is a proxy to Node 'require'
 // The below code is to ensure that the server is run only when not requiring the bundle.

src/config/default-app-config.ts

@@ -816,6 +816,7 @@ export class DefaultAppConfig implements AppConfig {
 
   mirador: MiradorConfig = {
     enableDownloadPlugin: true,
+    allowedOrigins: []
   };
 
   loader: LoaderConfig = {

src/config/mirador-config.interfaces.ts

@@ -2,4 +2,5 @@ import { Config } from './config.interface';
 
 export interface MiradorConfig extends Config {
   enableDownloadPlugin: boolean;
+  allowedOrigins: string[];
 }

src/environments/environment.test.ts

@@ -603,6 +603,7 @@ export const environment: BuildConfig = {
 
   mirador: {
     enableDownloadPlugin: true,
+    allowedOrigins: []
   },
 
   loader: {