The Mirador Viewer uses img tags for thumbnails with direct links to the iiif server, so requests made to retrieve the thumbnail images do not contain authorization and token headers. This causes the thumbnails to not load when the media is private.

This PR uses a service worker to add the authorization and token headers to the img requests.

Resources

1. Creating the service worker file:

See: https://www.twelve21.io/how-to-access-images-securely-with-oauth-2-0/

js/service_worker.js

self.addEventListener('activate', function (event) {
  console.log('Service Worker: claiming control...');
  return self.clients.claim();
});

self.addEventListener('fetch', function (event) {
  if (event.request.destination === "image" && new URL(event.request.url).pathname.startsWith('/cantaloupe/iiif/') && new URL(location).searchParams.has('token')) {
    console.log('Service Worker: fetching...');
    var token = new URL(location).searchParams.get('token');
    event.respondWith(
      fetch(event.request, {
        headers: {
          'Authorization': 'Bearer ' + token,
          'token': token
        },
        mode: "cors",
        credentials: "include"
      })
    );
  }
});

2. Setting the 'Service-Worker-Allowed' header

By default, the scope of the service worker must be within the directory containing the service worker script. (The scope refers to the pages making the requests that are then intercepted by the service worker). However, in order to set the scope to /, the service_worker.js file would need to be moved into the root directory of the site. To set the scope outside of the script's directory, the Service-Worker-Allowed header needs to be added to the HTTP response when the service worker script is requested. This was done by creating a controller that provides the script and appends the header in its response, and then creating a /islandora_mirador_service_worker route which is used as the script URL when registering the service worker.

See: https://drupal.stackexchange.com/questions/307079/how-to-return-service-worker-with-custom-http-header-from-custom-module

src/Controller/ServiceWorkerController.php

class ServiceWorkerController extends ControllerBase {

...

  /**
   * Adds headers to the HTTP response.
   */
  public function serve(Request $request) {
    // path to service_worker.js
    $file_str = $this->extensionPathResolver->getPath('module', 'islandora_mirador') . '/js/service_worker.js';
    if (file_exists($file_str)) {
      // adding headers to response
      $response = new BinaryFileResponse($file_str, 200);
      $response->headers->set('Content-Type', 'application/javascript');
      $response->headers->set('Service-Worker-Allowed', '/');
      return $response;
    }
    throw new NotFoundHttpException();
  }

}

islandora_mirador.routing.yml

...
islandora_mirador.service_worker:
  path: '/islandora_mirador_service_worker'
  defaults: 
    _controller: '\Drupal\islandora_mirador\Controller\ServiceWorkerController::serve' 
  requirements: 
    _permission: 'access content'
...

3. Registering the service worker

See: https://www.twelve21.io/how-to-access-images-securely-with-oauth-2-0/

js/mirador_viewer.js

...
if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
            navigator.serviceWorker
                  // using the service worker route
                  .register('/islandora_mirador_service_worker?token=' + settings.token, { scope: '/' })
                  .then(registration => {
                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
                  })
                  .catch(err => {
                        console.log('ServiceWorker registration failed: ', err);
                  });
      });
}
...