MathJax within JSXGraph iframes is not loaded via cors.php resulting in CORS error / broken math rendering

[ngandrass]

Using MathJax within a JSXGraph applet does not render for me.

The JSXGraph applet is isolated within an iframe which is not able to load the required MathJax libraries due to CORS errors. JSXGraph itself is served via corsscripts/cors.php but MathJax is not.

MathJax is loaded as follows:

[[jsxgraph]]
    JXG.Options.text.useMathJax = true;
[[/jsxgraph]]

Used software:

• Moodle: v4.5.1 (2024100701.01)
• STACK: v4.8.1 (2024111900)
• PHP: v8.2.26

How it looks inside the browser:

CORS errors:

Relevant HTML from the JSXGraph iframe:

Maybe related to #1160 since we are using a custom local path for loading MathJax instead of the CDN.

If you need further information or debugging let me know. Thanks a lot!

[EJMFarrow]

Hi @ngandrass,
It is related to custom local path for MathJax. Can you try changing the MathJax URL in local MathJax installation settings from a relative URL to the full URL, please? (Looks like it should be http://127.0.0.1/lib/mathjax/[email protected]/MathJax.js)
If that doesn't help, it may be an issue with using localhost. I'll investigate further.
Edmund

[aharjula]

Note that we cannot, from the STACK side, control the headers of arbitrary addresses. So if you use a local MathJax coming from a custom URL you need to make sure that the webserve servers out those MathJax files with CDN like headers just like the cors-thingy we have for serving some of the other things going into the IFRAME but coming from our sources:

moodle-qtype_stack/corsscripts/cors.php

Lines 34 to 36 in 37049a9

	header('Access-Control-Allow-Origin: *');
	header('Access-Control-Allow-Methods: GET');
	header('Access-Control-Allow-Headers: *');

Those sandbox IFRAMEs require that those headers have been set. In most apache installs simply having in the MathJax folder a .htaccess rule like this does the trick, but having all three of the above ones makes things work with most things:

Header add Access-Control-Allow-Origin "*"

[ngandrass]

Thanks @EJMFarrow and @aharjula for your quick response!

Adding the Access-Control-Allow-Origin header indeed solves the problem for me 👍

For future readers that uses nginx, add the following to your config and replace /lib/mathjax/ with the path to your local location:

location /lib/mathjax/ {
    add_header 'Access-Control-Allow-Origin' '*';
}

However, I still wonder if it would be a good idea to handle the MathJax include via the already existing /corsscripts/cors.php. That would eliminate the need to alter the web server config. There even is a TODO comment in the respective function for it:

moodle-qtype_stack/vle_specific.php

Lines 197 to 198 in 37049a9

	function stack_get_mathjax_url(): string {
	// TO-DO: figure out how to support VLE local with CORS.