Scripting internals

Internally, scripts are always loaded inside iframes.

You can load a script:

  1. Using the script property in your map properties
  2. or from an iframe opened as a co-website or embedded in the map

Script restrictions

If you load a script using the script property in your map properties (solution 1), you need to understand that WorkAdventure will generate an iframe, and will load the script inside this iframe.

Things you should know:

The iframe is sandboxed

This means that the iframe is generated with:

<iframe src="..." sandbox="allow-scripts allow-top-navigation-by-user-activation" />

Such an iframe has restrictions. In particular, it does NOT have an origin. Because it has no origin, XHR requests cannot be made from those scripts.

If you absolutely need to make a request to an external server from your script, you can:

  • use websockets (that are not subject to CORS restrictions)
  • or load the script inside an embedded iframe (that you hide somewhere on the map)

Script, modules and CORS issues

If you load a script using the script property in your map properties (solution 1), scripts are loaded by default with the type="module" attribute. Because those scripts are loaded as modules, they need to abide by the same-origin policy, so they are using CORS.

But because the iframe is sandboxed, the script does not have an origin. Therefore, the webserver hosting your script will need to allow all origins with:

Access-Control-Allow-Origin: *

or alternatively:

Access-Control-Allow-Origin: null

This should not be a security concern if your website is only hosting static files. However, in the event the website hosting the script is also hosting dynamic content, please be careful before allowing those headers on a site-wide basis.

If you cannot or do not want to allow CORS to all domains, there is an alternative: you can remove the type="module" attribute from the script. The script will not be able to load modules anymore but will not be bound to the same origin policy anymore so the Access-Control-Allow-Origin header is not needed anymore for this script.

To remove the type="module" attribute from the script, in your map properties, next to the script attribute, add a scriptDisableModuleSupport boolean property and set this property to "checked".

Need some help?

WorkAdventure is a constantly evolving project and there is plenty of room for improvement regarding map editing.

If you are facing any troubles, do not hesitate to open an "issue" in the GitHub WorkAdventure account.

🔍 Found a typo? Want to propose improvements? Do not hesitate to directly propose changes.