I\'m trying to use MathJax as part of our web application which uses pretty strict Content Security Policy (CSP). The problem is that MathJax is coded to use eval()
There're multiple issues:
The Content-Security-Policy
(CSP) header does not work this way. CSP only has granularity of a single host+port combination (origin). If you cannot allow all scripts to have unsafe-eval
, no script can have it. The only possible workaround is to not use a script that requires unsafe-eval
(fortunately, MathJax no longer requires unsafe-eval
since MathJax bug 256 was fixed).
The allow
syntax is an old Mozilla variant and should not be used. The current syntax is to say default-src
followed by scheme or host names or origins that are allowed as source of everything and then override the default value for each sub type (e.g. script-src
) as needed. Some sources may support additional source keywords in addition to self
. For example, the script-src
supports unsafe-eval
which means that any script that is otherwise allowed to execute is allowed to run eval() or Function(), and unsafe-inline
meaning that any piece of markup that can support some kind of inline script is allowed to execute. Allowing unsafe-eval
may be acceptable but unsafe-inline
is pretty much no-go with script-src (otherwise, you should not bother with the CSP at all).
The correct syntax for script-src
as follows:
script-src 'self' cdnjs.cloudflare.com
combined with loading MathJax from https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js
MathJax also uses inline style attributes so following is needed (unless already allowed) or MathJax will raise Exception
while trying to render the math:
style-src 'self' 'unsafe-inline'
It is not possible to use CSP to allow JS to insert style attributes and not have style attributes already inserted in the HTML source to have an effect.
It seems that Firefox 13.0 (at least) does not immediately "call home" in case of CSP violation. Most of the violation reports do get submitted some time after the event. Chrome seems to be much more aggressive with the report submission which will make it a bit easier to test. From my experience, Firefox does not always send CSP report at all - it may be using some kind of heuristic to not send repeated messages.
In the end, to make MathJax work with Content-Security-Protection, you need following headers (assuming you're using MathJax via CDNJS):
Content-Security-Policy: default-src 'self'; script-src 'self' cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline';
Older browsers (e.g. Firefox 13) used to require extra parameters such as options
or required using non-standard headere name such as X-Content-Security-Policy
or X-WebKit-CSP
. These hacks are no longer required because user agents support standard header nowadays. (With the exception of MSIE in contrary to MS Edge.)