add CORP and CORS header to client to fix iframe embeds

Author: AyushAgrawal-A2

amplify.yml

@@ -15,3 +15,7 @@ frontend:
           value: "same-origin"
         - key: "Cross-Origin-Embedder-Policy"
           value: "require-corp"
+        - key: "Cross-Origin-Resource-Policy"
+          value: "cross-origin"
+        - key: "Access-Control-Allow-Origin"
+          value: "*"

docker/client/config/default.conf

@@ -15,6 +15,8 @@ server {
 
         add_header Cross-Origin-Opener-Policy "same-origin" always;
         add_header Cross-Origin-Embedder-Policy "require-corp" always;
+        add_header Cross-Origin-Resource-Policy "cross-origin" always;
+        add_header Access-Control-Allow-Origin "*" always;
 
         # Special handling for .whl files
         if ($request_filename ~* \.whl$) {
@@ -34,5 +36,7 @@ server {
 
         add_header Cross-Origin-Opener-Policy "same-origin" always;
         add_header Cross-Origin-Embedder-Policy "require-corp" always;
+        add_header Cross-Origin-Resource-Policy "cross-origin" always;
+        add_header Access-Control-Allow-Origin "*" always;
     }
 }

quadratic-client/index.html

@@ -63,7 +63,7 @@
     The combination of these two things (<script> & <style>) appear to be
     what makes possible the expected effect of panning and zooming (especially
     with pinch to zoom on a trackpad) on the grid without experiencing weird
-    zoom or intertial panning effects.
+    zoom or inertial panning effects.
 
     Prevent window zooming on Chrome
     https://stackoverflow.com/questions/61114830/how-to-prevent-native-browser-default-pinch-to-zoom-behavior

quadratic-client/vite.config.js

@@ -23,6 +23,8 @@ export default defineConfig(() => {
         server.middlewares.use((_req, res, next) => {
           res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
           res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+          res.setHeader('Cross-Origin-Resource-Policy', 'cross-origin');
+          res.setHeader('Access-Control-Allow-Origin', '*');
           next();
         });
       },