CSP-violating eval error in javascript of new instance

Hi everybody,
I’m setting up a new instance at introverts.social. I’m on ubuntu LTS 20.04 instead of the recommended 18.04 but other than that I’m following the instructions at Installing from source - Mastodon documentation exactly. I figured out how to increase my swap space so that compilation could finish and how to configure Mailgun SMTP. Emails are sending when I create an account, and I can login. So far so good.

But once I’m logged in, I get a blank page, with this error in the Firefox javascript console:

Uncaught EvalError: call to eval() blocked by CSP
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).

I found this ticket in the mastodon github issue tracker: Fresh Install by Documentation / CSP Error · Issue #10317 · tootsuite/mastodon · GitHub which seems to suggest that it’s a Firefox or firefox extension problem. However, I tried in Safari with no extensions and am getting about the same error:

[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https://introverts.social".

Found a stack overflow thread about this error (non-mastodon-specific): google chrome extension - Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed - Stack Overflow that suggests it can be a result of webpack running with a default setting of devtool: eval . However, that doesn’t seem to be the problem, because the devtool settings on my server are:

> ~/live/config$ grep 'devtool' * -R
webpack/development.js:  devtool: 'cheap-module-eval-source-map',
webpack/production.js:  devtool: 'source-map',

Re-running ~/live/bin/webpack also does not help.

Any ideas for other things I could check? Thank you.

Please double check your nginx settings for this one.

Thanks for answering, Saper!

I’m looking in /etc/nginx/nginx.conf and /etc/nginx/sites-enabled/mastodon and I’m not seeing any nginx settings related to webpack, node, or compilation or serving of javascript. Do I need to add a directive? I can’t find anything in the documentation at Core functionality that looks relevant.

Can you elaborate on what you meant? Should I be trying to add a setting that tells the browser to accept the eval() or should I be trying to get rid of the eval() ?
Thanks.

I think it is a bit more complicated. I have visited your site with firefox 79 without any extensions and I can see the CSP messages there in the console when visiting your site. I don’t have any idea how to fix it though.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

Hello all,
my old thread was locked due to inactivity: CSP-violating eval error in javascript of new instance

but i wanted to post that I finally found a solution to the problem I had encountered there, and I wanted to share the solution in case any other instance admins run into the same issue.

The symptom:

  • once I logged into my instance, i got a blank page with the following error messages in Firefox javascript console:
Uncaught EvalError: call to eval() blocked by CSP
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).

The diagnosis:

  • There are two sets of webpack config files included in the mastodon git checkout: in ~mastodon/live/config/webpack/ there is development.js and production.js.
  • development.js has the setting devtool: 'cheap-module-eval-source-map'
  • production.js by contrast has the setting devtool: 'source-map'
  • The development settings tell Webpack to use a method of bundling javascript which uses eval() statements in the output code, together with a content-security-policy header that allows eval(). (Easier debugging during development)
  • The production settings tell Webpack to use no eval() statements, with a content-security-policy header that disallows eval(). (More secure for production)
  • Somehow during mastodon installation, all my files had been compiled in development mode instead of in production mode. But they were getting served in production mode, with the stricter content-security-policy header, making the browser treat the eval()s as illegal.

The solution:

  • delete the old bundle files with rm -r ~mastodon/live/public/dist/js/*
  • (as mastodon user): npm run-script build:production to recompile javascript in production mode.
  • (as root user) systemctl restart mastodon-web mastodon-sidekiq mastodon-streaming to have mastodon re-read the newly compiled javascript bundles.

Hope this helps somebody.