Rails 5.2, Webpacker 3.5.5 + Angular CSP issue when deploying to prod (Heroku)

[ychaker]

Hi, firstly thank you for all your hard work, you're all awesome!

I created a mostly "fresh" app using Rails 5.2, Webpacker 3.5.5 and Angular. I've follow the angular instructions in the README:

The installer will add the TypeScript and Angular core libraries using Yarn alongside a few changes to the configuration files. An example component written in TypeScript will also be added to your project in app/javascript so that you can experiment with Angular right away.

By default, Angular uses a JIT compiler for development environment. This compiler is not compatible with restrictive CSP (Content Security Policy) environments like Rails 5.2+. You can use Angular AOT compiler in development with the @ngtools/webpack plugin.

Alternatively if you're using Rails 5.2+ you can enable unsafe-eval rule for your development environment. This can be done in the config/initializers/content_security_policy.rb with the following code:

  if Rails.env.development?
    policy.script_src :self, :https, :unsafe_eval
  else
    policy.script_src :self, :https
  end

and added some code that runs well in development, but when I deploy it to production, namely Heroku, I get the following error in the console:

Uncaught 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:

and the angular component does not load.

I commented out all of the CSP stuff in the initializer and deployed again and things started working again.

Then I replaced this part:

  if Rails.env.development?
    policy.script_src :self, :https, :unsafe_eval
  else
    policy.script_src :self, :https
  end

with

  policy.script_src :self, :https, :unsafe_eval

basically removing the check for the development environment and that worked as well. I don't know a lot about CSP but I'm assuming that adding :unsafe_eval` would defeat the purpose of having any policy, so probably not the best solution for the problem.

Any recommendations on how I can get around this issue without the need to completely circumvent CSP?

[gauravtiwari]

Please use the latest RC, and feel free to open a new issue with more details if this is still an issue.

[TylerRick]

I am getting this error in my app in production to after removing :unsafe_eval from script_src.

Did you ever get this resolved, @ychaker ?

I am using webpacker 4.0.7, which is the latest release so I assume is later than the RC as of 2018-12-15. Which webpacker commit actually fixed this?

Questions:

• What does the production environment do differently that makes it so the :unsafe_eval is unneeded there?
• Is it the fact that assets are precompiled? (But they were in production for me and I still got the error.)
• Does it really use AOT in production? How?
• How can a user prove for themselves that AOT is working correctly in production on their local development computer?
• I assume the way it works for production doesn't require use of @ngtools/webpack. So why is it that recommended for development? (in a61f8fe3964e4ed06829118d1f706f12a95008ab) (And is there any full example that shows how to add that to the webpacker config?)
• Should I open a new issue? (Why create a duplicate? This issue already correctly describes the problem.)

I'll try to make a minimal reproducible example...

[ychaker]

@TylerRick I did not get it to work and kept the :unsafe_eval in prod as well. but honestly I didn't really try to make it work beyond the effort I put into it initially. I had spent too much time on it at the time and had to move on to something else.

[TylerRick]

Thanks for the reply. I'm just about at that point as well (giving up and keeping the :unsafe_eval in production). Will push up my minimal reproducible example first...

[TylerRick]

All right, I came up with a minimal reproducible example that proves that Angular does not work in production with the default webpacker angular configs and a default (= safe = no :unsafe_eval) CSP in place:

https://github.com/TylerRick/webpacker_angular_csp

I'll see if I can get AOT working using @ngtools/webpack. If I can, I think the Readme needs to updated...

[TylerRick]

Got it working! #2141 is my attempt at improving this...

Curious... Why are we the only people running into this? Do most people just leave the default config/initializers/content_security_policy.rb generated by Rails 5.2 commented out?? Or do most people just add the :unsafe_eval because they don't want to spend all day figuring out how to properly configure Webpack?

[ychaker]

@TylerRick when I asked around the answer I got was either people were removing the CSP stuff completely because they didn't want to deal with it, or were not using angular with the latest rails. a lot of people are working on old apps that either don't get updated or when they do get updated they don't bring in the new features that weren't already part of the app. which means that the number of people starting a new Rails 5.2 app + angular + webpacker is a small number comparatively, at least anecdotally in my experience.

[MutatedBread]

5 years later I am seeing the same issue with Angular not compiling in AOT and causing the browser to not load the emitted JS after tightening the CSPs. Also traced to the next few PRs / issues that you guys made.