Merge pull request #2685 from PolicyEngine/MaxGhenis/issue2676

Allow clipboard access for OBBBA iframe

Author: MaxGhenis

src/applets/OBBBAHouseholdExplorer.jsx

@@ -2,9 +2,52 @@ import Header from "../layout/Header";
 import { Helmet } from "react-helmet";
 import style from "../style";
 import { useWindowHeight } from "../hooks/useWindow";
+import { useEffect, useRef, useMemo } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 
 export default function OBBBAHouseholdExplorer() {
   const windowHeight = useWindowHeight();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const iframeRef = useRef(null);
+
+  // Memoize baseUrl to prevent unnecessary re-renders
+  const baseUrl = useMemo(
+    () =>
+      process.env.REACT_APP_OBBBA_IFRAME_URL ||
+      "https://policyengine.github.io/obbba-scatter",
+    [],
+  );
+
+  // Memoize iframe origin for efficient message verification
+  const iframeOrigin = useMemo(() => new URL(baseUrl).origin, [baseUrl]);
+
+  // Get current URL parameters to forward to iframe using location hook
+  const urlParams = new URLSearchParams(location.search);
+
+  // Construct iframe URL with forwarded parameters
+  const iframeUrl = urlParams.toString()
+    ? `${baseUrl}?${urlParams.toString()}`
+    : baseUrl;
+
+  useEffect(() => {
+    // Listen for messages from the iframe
+    const handleMessage = (event) => {
+      // Verify the message is from our iframe
+      if (event.origin !== iframeOrigin) return;
+
+      // Handle URL update messages from the iframe
+      if (event.data?.type === "urlUpdate" && event.data?.params) {
+        const newParams = new URLSearchParams(event.data.params);
+        navigate(`${location.pathname}?${newParams.toString()}`, {
+          replace: true,
+        });
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [navigate, location.pathname, iframeOrigin]);
 
   return (
     <>
@@ -21,14 +64,13 @@ export default function OBBBAHouseholdExplorer() {
         }}
       >
         <iframe
-          src={
-            process.env.REACT_APP_OBBBA_IFRAME_URL ||
-            "https://policyengine.github.io/obbba-scatter"
-          }
+          ref={iframeRef}
+          src={iframeUrl}
           title="OBBBA Household Explorer"
           height={`calc(100vh - ${style.spacing.HEADER_HEIGHT})`}
           width="100%"
           style={{ overflow: "hidden" }}
+          allow="clipboard-write"
         />
       </div>
     </>