MathJax 2.7.4; Requires CSP with 'unsafe-inline' and 'unsafe-eval' in script-src (and 'unsafe-inline' in style-src)!

[kaushalmodi]

Hello,

Unless I set 'unsafe-eval' in my script-src rule in Content-Security-Policy in HTTP header, the MathJax font rendering does not work.. I see this error in the browser inspector without that:

For now, I have added 'unsafe-eval' eval to the headers to make MathJax work, but this is the page where I saw this issue: https://scripter.co/latex-in-html/.

---

This is how I load MathJax:

<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
     displayAlign: "center",
     displayIndent: "0em",

     "HTML-CSS": { scale: 100,
                   linebreaks: { automatic: "false" },
                   webFont: "TeX"
     },
     SVG: {scale: 100,
           linebreaks: { automatic: "false" },
           font: "TeX"},
     NativeMML: {scale: 100},
     TeX: { equationNumbers: {autoNumber: "AMS"},
            MultLineWidth: "85%",
            TagSide: "right",
            TagIndent: ".8em"
     }
 });
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML"></script>

[dpvc]

MathJax uses window.eval() to execute configuration from <script type="text/x-mathjax-config"> blocks. If you need to use CSP to restrict scripting, you need to use a different form of configuration. You can either use an external configuration file, or use plain javascript for your configuration object and load that from a file as a plain javascript file.

In your case you could put

window.MathJax = {
     displayAlign: "center",
     displayIndent: "0em",
     "HTML-CSS": { scale: 100,
                   linebreaks: { automatic: "false" },
                   webFont: "TeX"
     },
     SVG: {scale: 100,
           linebreaks: { automatic: "false" },
           font: "TeX"},
     NativeMML: {scale: 100},
     TeX: { equationNumbers: {autoNumber: "AMS"},
            MultLineWidth: "85%",
            TagSide: "right",
            TagIndent: ".8em"
     }
 };

in a file, say mathjax-local.js, and then use

<script type="text/javascript" src="mathjax-local.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML"></script>

for your configuration. That should prevent the use of window.eval().

[kaushalmodi]

Thank you for the prompt response! Now I can get away without 'unsafe-eval'!

Thanks for posting that snippet because I have 0 Javascript knowledge.

Now I am fiddling with the code to see what works so that 'unsafe-inline' can be removed too.

[dpvc]

I updated the code so that you use an external file so that you don't need inline scripts. See if that is better.

[kaushalmodi]

Thank you! I will close this issue.

I see that I need 'unsafe-inline' for style-src for inline styles on my site. So I will close this issue till I have sorted that out.

Thanks again.

[chammika-udalagama]

@kaushalmodi Can I please check if your webpage's equations render smoothly?

Mine takes a while to render and then complain that a file cannot be loaded (e.g. Loading [MathJax]/jax/output/HTML-CSS/jax.js). Then it shows the equation with a [Math Processing Error] tag and a message File failed to load: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/jax/output/SVG/jax.js

Did you have this issue too? Any help you can give will be greatly appreciated! Thank you.

• This is the CSP meta line I used:
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/ ; script-src 'self' https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/ 'unsafe-eval';style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self';">

[kaushalmodi]

Sure. Here's one of the examples: https://ox-hugo.scripter.co/test/real-examples/multifractals-in-ecology-using-r/.

You can review the code related to MathJax in the site source.

And here's my _headers containing the CSP: https://github.com/kaushalmodi/ox-hugo/blob/master/doc/static/_headers

If CSP is causing that failure to load the script, you should see CSP failure messages in the browser dev console. I use Firefox and I just do Ctrl + Shift + I and click on the Console tab.

Also, note I don't set the CSP in meta tags as you do. So I am not sure if that works. But if you see CSP errors in the Console, that should confirm that.

[chammika-udalagama]

Thank you @kaushalmodi. Your help is greatly appreciated.

I followed your advice and eventually figured out that the server is blocking some modules from loading. Fixing the server setting is beyond my skillset and time constraints (luckily, I have another server to use).

Thanks again for your help.

[gilgen]

Any progress on removing the requirement for unsafe-inline for styles? It would be nice to be able to remove that necessity in CSPs.

[jscaux]

I'm facing the same issue as jamiebikies above: can the requirement for unsafe-inline be removed to allow cleaner style CSPs?

[albogdano]

It's still unclear from the documentation how to disable the use of inline CSS in MathJax 3.x. Ideally we could have the option to use an external CSS file and an example of the default CSS rules.

[dpvc]

Ideally we could have the option to use an external CSS file and an example of the default CSS rules.

While I understand the desire for this, I don't see that it is going to be possible, since the in-line styles are very dependent on the content, and because the layout requires very small tolerances, you can't just substitute nearby values for these. The only hope for it would be to pre-process the math on the server (rather than running MathJax in the browser), and collecting all the specific style values into a CSS file. That could be done, but probably requires some significant adjustments to MathJax's internals, or alternatively, post-processing the resulting output to collect and remove the in-line styles. The latter is probably the easier approach and could be a nice project for a community contributor, if someone wanted to take that on.

Note, however, that server-side processing makes some things more difficult (like matching the surrounding font size, using surrounding fonts for \text{}, and working with characters that aren't in the MathJax fonts).