I’m building an exam proctoring platform for my university that flags suspicious student behavior (like moving out of the camera or switching tabs). My goal is to add my university's Moodle-based e-learning platform into the exam interface as a side panel (shown below).
However, I’m encountering Cross-Origin Restrictions while trying to embed the Moodle site (which is hosted on Moodle's platform) inside my app using an iframe. The iframe just loads the login page, and I’m unable to progress beyond that. I tried setting up a proxy but only the login page gets displayed, not the actual content. Maybe I’m not using the proxy properly?
Requirements: The Moodle platform needs to be displayed in the same window as the exam proctoring system, as switching tabs should trigger the detection.
I need to avoid opening a new tab to keep the experience seamless.
I’m trying to embed Moodle in an iframe or another suitable way but facing security restrictions.
What I’ve Tried:
Using an <iframe>:
<iframe src="/" width="100%" height="600px"></iframe>
Result: The iframe displays the login page but doesn’t load the content after login.
Setting up a Proxy:
Tried using a proxy server, but only the login page is shown. No content beyond that.
Attempting to bypass CORS restrictions.
Questions: Is there any way to properly embed Moodle into my web app despite the cross-origin restrictions?
How can I keep the Moodle platform embedded in the same window while ensuring the proctoring system functions correctly?
Are there any third-party libraries or workarounds to handle this better?
What I Need:
- A solution to embed Moodle in an iframe or similar.
- Help with Cross-Origin restrictions when the content is hosted externally (i.e., the university’s Moodle instance).
Thanks for any help!