SCORM Hosting Cross-Origin

Question

I try to host a SCORM e-learning module decentralized on an other domain than my LMS (Learning Management System) is running. SCORM Modules are normally running in their own browser frame/window and communicating with the LMS directly, running all on the same domain. This is no problem because there is no security issue. Already tried this case with my code and it worked.

To archive the module is hosted on an other server I try to use something like a wrapper. These wrapper is hosted on the LMS, load the content from extern and communicates via postMessage with the LMS. I tried this open-source project: https://github.com/Didask/scol-r

But i don't get it work. Everytime i end up with the error: Error grabbing 1.2 API-SecurityError:Blocked a frame with origin "https://..." from accessing a cross-origin frame. Protocols, domains, and ports must match. So something try to access something that is not allowed. The exception is raised in the "SCORM_ScanParentsForApi" method.

I already ask the author of the project but he had no answer at all. I set up a small demo project in react to simulate an LMS. Added the wrapper module that point to my external content server where the SCORM module is hosted.

Maybe someone have an idea or can give my a hint. I think it is something trivial. Hopefully ;) Thanks!

Answer 1

Your specific problem is the Access-Control-Allow-Origin header https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin

So we are on sosafe.de and the skorm course is on lms0.sosafe.de This will cause the CORS errors. You need your response headers to be accepted.

You can do this with your apache config. This will allow the response to get through.

SetEnvIf Origin "http(s)?:\/\/(.+\.)?sosafe\.de(:\d{1,5})?$" CORS=$0

Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
Header merge  Vary "Origin"

You don't have to use this code exactly but, modify the server to add the header Access-Control-Allow-Origin. If you do Access-Control-Allow-Origin: * this would enable cross-origin requests from anywhere (though you should just allow domains you trust). This should solve your problem.

Else they should be on the same domain. which may not be possible due to the design of SCOL-R the scorm connector that allows you to reach the API.