Protect the sidebar's iframe allow attribute

src/annotator/sidebar.tsx

@@ -70,7 +70,7 @@ export type SidebarContainerConfig = {
 /**
  * Create the iframe that will load the sidebar application.
  */
-function createSidebarIframe(config: SidebarConfig): HTMLIFrameElement {
+export function createSidebarIframe(config: SidebarConfig): HTMLIFrameElement {
   const sidebarURL = config.sidebarAppUrl;
   const sidebarAppSrc = addConfigFragment(
     sidebarURL,
@@ -79,15 +79,20 @@ function createSidebarIframe(config: SidebarConfig): HTMLIFrameElement {
 
   const sidebarFrame = document.createElement('iframe');
 
-  // Enable media in annotations to be shown fullscreen
-  sidebarFrame.setAttribute('allowfullscreen', '');
-
   sidebarFrame.src = sidebarAppSrc;
   sidebarFrame.title = 'Hypothesis annotation viewer';
   sidebarFrame.className = 'sidebar-frame';
-  sidebarFrame.allow = 'clipboard-write';
 
-  return sidebarFrame;
+  // Enable media in annotations to be shown fullscreen, and allow copying to
+  // the clipboard.
+  sidebarFrame.allow = 'fullscreen; clipboard-write';
+
+  // In viahtml, pywb uses wombat.js, which monkey-patches some JS methods.
+  // One of those causes the `allow` attribute to be overwritten, so we want to
+  // make it non-writable to preserve the permissions we set above.
+  return Object.defineProperty(sidebarFrame, 'allow', {
+    writable: false,
+  });
 }
 
 type GestureState = {

src/annotator/test/sidebar-test.js

 import { TinyEmitter } from 'tiny-emitter';
 
 import { addConfigFragment } from '../../shared/config-fragment';
-import { Sidebar, MIN_RESIZE, $imports } from '../sidebar';
+import { Sidebar, MIN_RESIZE, $imports, createSidebarIframe } from '../sidebar';
 import { Emitter } from '../util/emitter';
 
 const DEFAULT_WIDTH = 350;
@@ -1138,4 +1138,14 @@ describe('Sidebar', () => {
       assert.calledWith(guestRPC().call, 'selectAnnotations', tags, true);
     });
   });
+
+  describe('createSidebarIframe', () => {
+    it('does not let `allow` attribute to be overwritten', () => {
+      const iframe = createSidebarIframe({ sidebarAppUrl: 'https://foo.com' });
+
+      assert.throws(() => {
+        iframe.allow = 'something else';
+      }, "Cannot assign to read only property 'allow' of object '#<HTMLIFrameElement>'");
+    });
+  });
 });