Add cross-origin annotatable iframe dev server scenario

The current inter-frame communication doesn't work if an annotatable (guest) iframe is from a different origin than the host frame (see #3611 (comment)). This will be fixed in a more comprehensive overhaul of the inter-face communication (see #3533). Meanwhile, I add a scenario into the local dev server where the annotatable iframe is from an origin different than the host frame. For this, I needed to spawn an additional dev server at port 3002): ``` [11:32:50] Dev web server started at http://localhost:3000/ [11:32:50] Dev web server started at http://localhost:3002/ ``` Close #3629
hypothesis · Sep 7, 2021 · 939ade8 · 939ade8
1 parent c91cbf0
commit 939ade8
Show file tree

Hide file tree

Showing 4 changed files with 1,581 additions and 0 deletions.
diff --git a/dev-server/documents/html/cross-origin-iframe.mustache b/dev-server/documents/html/cross-origin-iframe.mustache
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Cross-origin guest iframe</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      iframe {
+        width: 75%;
+        height: 300px;
+        resize: both;
+        overflow: auto;
+      }
+    </style>
+
+  </head>
+  <body>
+    <h1>Cross-origin guest iframe</h1>
+    <p>
+      The cross-origin iframe below should behave like a normal guest iframe. It should
+      be possible to select text and add annotations.
+    </p>
+    <iframe></iframe>
+    <script>
+      // Set a different port for the iframe `src` property to make it cross-origin.
+      let port = new URL(document.location).port === '3000' ? '3002' : '3000';
+      let url = '//localhost:' + port + '/document/doyle-embedded';
+      document.querySelector('iframe').setAttribute('src', url);
+    </script>
+    {{{hypothesisScript}}}
+  </body>
+</html>