fix: CORS error while using iframes #2176
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ |
|
Thank you for following the naming conventions for pull request titles! 🙏 |
packages/surveys/src/components/general/Survey.tsxConsider specifying the target origin in the postMessage call to ensure the message is only sent to the intended domain. This will prevent any potential data leaks if there are other iframes from different origins on the page. // Replace "*" with the target origin
window.parent.postMessage("formbricksSurveyCompleted", "https://target-origin.com"); |
![review-agent-prime[bot]](https://avatars.githubusercontent.com/in/404610?s=60&v=4){kind=small}
| const event = new CustomEvent("formbricksSurveyCompleted", { detail: { surveyId: survey.id } }); | ||
| window.top?.dispatchEvent(event); | ||
| // Post a message to the parent window indicating that the survey is completed. | ||
| window.parent.postMessage("formbricksSurveyCompleted", "*"); |
There was a problem hiding this comment.
Replace '*' with the target origin in the postMessage call to ensure the message is only sent to the intended domain.
Suggested change
| window.parent.postMessage("formbricksSurveyCompleted", "*"); | |
| window.parent.postMessage("formbricksSurveyCompleted", "https://target-origin.com"); |
mattinannt
approved these changes
Mar 4, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Fixes iFrame issue #2172
The error is a result of the same-origin policy, a critical security mechanism in web browsers. This policy restricts how a document or script loaded from one origin can interact with resources from another origin. In our case, the script is trying to access a frame (window.top) that is not of the same origin.
For our onboarding it works well because the iframe in embedded in a parent with the same origin as of the onboarding survey (
https://app.formbricks.com), but it throws an error when iframes are embedded on pages with origin different fromhttps://app.formbricks.comSo to solve this we now use
Window: postMessage(). Thewindow.postMessage()method safely enables cross-origin communication between window objects; e.g. between a page and an iframe embedded within it.Read about window.postMessage()
How should this be tested?
Testing this would require creating a survey locally (not on cloud), and embed it using iFrames on
Checklist
Required
pnpm buildconsole.logsgit pull origin mainAppreciated