fix: CORS error while using iframes (#2176)

apps/web/app/(app)/onboarding/components/onboarding.tsx

@@ -44,6 +44,23 @@ export function Onboarding({
   const [iframeVisible, setIframeVisible] = useState(false);
   const [fade, setFade] = useState(false);
 
+  const handleSurveyCompletion = () => {
+    setFade(false);
+
+    setTimeout(() => {
+      setIframeVisible(false); // Hide the iframe after fade-out effect is complete
+      setCurrentStep(5); // Assuming you want to move to the next step after survey completion
+    }, 1000); // Adjust timeout duration based on your fade-out CSS transition
+  };
+
+  const handleMessageEvent = (event: MessageEvent) => {
+    if (event.origin !== webAppUrl) return;
+
+    if (event.data === "formbricksSurveyCompleted") {
+      handleSurveyCompletion();
+    }
+  };
+
   useEffect(() => {
     if (currentStep === 2 && selectedPathway === "link") {
       setIframeVisible(true);
@@ -55,21 +72,10 @@ export function Onboarding({
   useEffect(() => {
     if (iframeVisible) {
       setFade(true);
-
-      const handleSurveyCompletion = () => {
-        setFade(false);
-
-        setTimeout(() => {
-          setIframeVisible(false); // Hide the iframe after fade-out effect is complete
-          setCurrentStep(5); // Assuming you want to move to the next step after survey completion
-        }, 1000); // Adjust timeout duration based on your fade-out CSS transition
-      };
-
-      window.addEventListener("formbricksSurveyCompleted", handleSurveyCompletion);
-
+      window.addEventListener("message", handleMessageEvent, false);
       // Cleanup function to remove the event listener
       return () => {
-        window.removeEventListener("formbricksSurveyCompleted", handleSurveyCompletion);
+        window.removeEventListener("message", handleMessageEvent, false);
       };
     }
   }, [iframeVisible, currentStep]); // Depend on iframeVisible and currentStep to re-evaluate when needed