SCORM托管跨域问题

Question

我试图在与我的学习管理系统(LMS)运行不同的域上托管一个SCORM e-learning模块。SCORM模块通常在其自己的浏览器框架/窗口中运行，并直接与LMS通信，全部在相同的域上运行，这没有问题，因为不存在安全问题。我已经用我的代码尝试过这种情况，并且成功了。

为了实现模块在其他服务器上托管，我尝试使用类似于包装器的东西。这个包装器托管在LMS上，从外部加载内容，并通过postMessage与LMS通信。我尝试了这个开源项目：https://github.com/Didask/scol-r 但是我无法让它工作。每次都会出现错误：Error grabbing 1.2 API-SecurityError:Blocked a frame with origin "https://..." from accessing a cross-origin frame.Protocols, domains, and ports must match. 所以有些东西试图访问不允许的内容。异常发生在“SCORM_ScanParentsForApi”方法中。

我已经问过该项目的作者，但他根本没有答案。我建立了一个小型演示项目，使用React模拟LMS。添加指向我的外部内容服务器的包装器模块，其中托管了SCORM模块。

也许有人有想法或可以给我提示。我认为这是一些微不足道的东西。希望如此;)谢谢！

- Werewolve

---

你使用的是哪段代码，导致出现了错误？ - shadow2020

测试项目已附上。或者使用链接。如果您点击“启动模块”，应该会弹出显示错误的弹窗。 - Werewolve

Answer 1

您的具体问题是Access-Control-Allow-Origin标头 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin。因此，我们在sosafe.de上，而skorm课程在lms0.sosafe.de上，这将引起CORS错误。您需要使您的响应标头被接受。 您可以通过您的apache配置来实现这一点。这将允许响应通过。

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"

你不必完全使用此代码，但需要修改服务器添加Access-Control-Allow-Origin标头。如果使用Access-Control-Allow-Origin: *，则可以从任何地方启用跨域请求（尽管应仅允许您信任的域）。这应该可以解决你的问题。

否则，它们应该在同一域上。由于SCOL-R的设计方式，这可能是不可能的，SCORM连接器允许您访问API。

- shadow2020

---

也许这只是一个同源策略问题。也许尝试更改您的来源？https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy#Changing_origin - shadow2020

将其放在iframe位置和父级位置。 - shadow2020

所以LMS不是问题。因为内容在scormcloud中运行而没有包装器。当使用包装器将LMS托管在内容服务器上并从相同的保存器加载模块时，它可以正常工作。https://lms0.sosafe.de/v1/lms/ 因此内容传递也有效。问题必须出现在包装器中。我认为这与postMessage系统有关。 - Werewolve

这是一个安全问题，我们无法访问其他域的数据，只有两种可能性：1）将所有内容托管在单个域中；2）在服务器上启用CORS。 - Damodhar

你解决了你的问题吗？我也遇到了同样的麻烦。在这种情况下，我该如何在C#服务器上设置CORS？ - Rafał Gąsior

Answer 2

您可以看一下这个商业解决方案，它是 SCORM Cloud 的替代品：

https://www.scormnext.es

通过使用SCORM连接器（调度程序），它使您能够远程分发您的SCORM内容到外部LMS。

- Alex