Set HTTP headers to enable SharedArrayBuffer for all requests

Previously, I thought we needed to set these HTTP headers for the web
worker to enable SharedArrayBuffer usage, but we actually need to set
them for requests to the top-level web page. Therefore, ensure the
crossorigin attribute is added to script/link tags for cross-origin
resources.

config/webpackDevServer.config.js

@@ -72,7 +72,9 @@ module.exports = function (proxy, _allowedHost) {
     headers: {
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
-      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
+      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
+      "Cross-Origin-Opener-Policy": "same-origin",
+      "Cross-Origin-Embedder-Policy": "require-corp",
     },
     client: {
       // Silence WebpackDevServer's own logs since they're generally not useful.

public/webworkers/pyodideWorker.js

@@ -159,7 +159,7 @@ const reloadPyodideToClearState = async () => {
 };
 
 if (typeof SharedArrayBuffer === "undefined") {
-  throw new Error(`Please set the following HTTP headers for pyodideWorker.js to support the stop button:
+  throw new Error(`Please set the following HTTP headers for the top-level page to support the stop button:
     Cross-Origin-Opener-Policy: same-origin
     Cross-Origin-Embedder-Policy: require-corp
   `);

src/index.html

@@ -26,11 +26,11 @@
     <!-- Google Tag Manager -->
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.crossOrigin='anonymous';j.async=true;j.src=
         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
         })(window,document,'script','dataLayer','%REACT_APP_GOOGLE_TAG_MANAGER_ID%');</script>
     <!-- End Google Tag Manager -->
-    <script defer data-domain="%REACT_APP_PLAUSIBLE_DATA_DOMAIN%" src="%REACT_APP_PLAUSIBLE_SOURCE%"></script>
+    <script crossorigin defer data-domain="%REACT_APP_PLAUSIBLE_DATA_DOMAIN%" src="%REACT_APP_PLAUSIBLE_SOURCE%"></script>
     <script>
       window.plausible = window.plausible || function () {
         (window.plausible.q = window.plausible.q || []).push(arguments)

storybook/.storybook/preview-head.html

@@ -1,18 +1,21 @@
-<link href="https://fonts.gstatic.com" crossorigin="true" rel="preconnect" />
+<link href="https://fonts.gstatic.com" crossorigin rel="preconnect" />
 <link
   as="style"
   href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&amp;family=Roboto+Slab:wght@400;700&amp;family=Space+Mono&amp;display=swap"
+  crossorigin
   rel="preload"
 />
 <link
   href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&amp;family=Roboto+Slab:wght@400;700&amp;family=Space+Mono&amp;display=swap"
+  crossorigin
   media="print"
   onload='this.media="all"'
   rel="stylesheet"
 />
 <noscript>
   <link
   href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500&amp;family=Roboto+Slab:wght@400;700&amp;family=Space+Mono&amp;display=swap"
+  crossorigin
   rel="stylesheet"
   />
 </noscript>