Webpacker and CSP

[guilleiguaran]

I'm opening this to keep track of the issues found when trying to use webpacker along with new Rails 5.2 CSP DSL.

• cheap-eval-source-map devtool can't be used with unsafe-eval, Fixed: Switch config.devtool from cheap-eval-source-map to cheap-module-source-map #1046
• dev server requires allowing ws://localhost:3035 and http://localhost:3035 as connect-src
• do we need to use __webpack_nonce__ ?, reference
• Research about React and CSP, Done: we are fine with default config, reference
• Research about Angular and CSP, Done: Added docs in a61f8fe
• Vue templates are unusable with unsafe-eval, reference, documented in 57540ae

[renchap]

I have a pretty strict CSP policy for some time in my app, using Webpacker and React.
You need script-src: unsafe-eval if you use react-hot-loader. I also added ws://localhost:3000 http://localhost:3035 ws://localhost:3035 to connect-src, but I am not sure all of them are still needed with the new Rack proxy. The source maps should also be set to cheap-module-source-map (https://reactjs.org/docs/cross-origin-errors.html#source-maps) but this is already done.

React does not need any other special config that I can think of.

[guilleiguaran]

@renchap are you using Action Cable? ws://localhost:3000 should be set for Action Cable (see rails/rails#31309)

I've tested in an app and looks like we need to whitelist http://localhost:3035 and ws://localhost:3035 if webpack-dev-server is running, maybe the best solution for this is adding it to the documentation.

[gauravtiwari]

dev server requires allowing ws://localhost:3035 and http://localhost:3035 as connect-src

headers options is now configurable from webpacker.yml so we can update it with CSP headers.

[guilleiguaran]

@gauravtiwari I'm going to test it and report results back

[gauravtiwari]

Research about Angular and CSP, Done: AngularJS tries to autodetect if CSP is blocking dynamic code creation from strings (e.g., unsafe-eval not specified in CSP header) and automatically deactivates this feature. reference

@guilleiguaran Don't think it applies for angular 4

[gauravtiwari]

All examples work with:

p.script_src :self, :https, :unsafe_eval

This is needed for angular

# Define an application-wide content security policy
# For further information see the following documentation
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

Rails.application.config.content_security_policy do |p|
  p.default_src :self, :https
  p.font_src    :self, :https, :data
  p.img_src     :self, :https, :data
  p.object_src  :none
  p.script_src  :self, :https, :unsafe_eval
  p.style_src   :self, :https, :unsafe_inline
  p.connect_src :self, :https, 'http://localhost:3035', 'ws://localhost:3035'

  # Specify URI for violation reports
  # p.report_uri "/csp-violation-report-endpoint"
end

# Report CSP violations to a specified URI
# For further information see the following documentation:
# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only
# Rails.application.config.content_security_policy_report_only = true

    # webpacker.yml
    headers:
      'Access-Control-Allow-Origin': '*'
      'Content-Security-Policy': "script-src 'self' 'unsafe-eval'; connect-src 'self' ws://localhost:3035 http://localhost:3035"
      'X-Content-Security-Policy': "script-src 'self' 'unsafe-eval'; connect-src 'self' ws://localhost:3035 http://localhost:3035"
      'X-WebKit-CSP': "script-src 'self' 'unsafe-eval'; connect-src 'self' ws://localhost:3035 http://localhost:3035"

[gauravtiwari]

Latest docs are here: https://angular.io/guide/security#content-security-policy

[gauravtiwari]

made an example app here: https://github.com/gauravtiwari/webpacker-5.2-csp

[swrobel]

For my Rails 5.2/React app, I simply needed to change use "@rails/webpacker": "rails/webpacker" in package.json

[guilleiguaran]

@gauravtiwari I think the best we can do for Angular case is document as I did for Vue, linking to the official docs, wdyt?

[guilleiguaran]

Ok, I did a bit more of research for Angular and found this issue: angular/angular#11939

As angular/angular#11939 (comment) comments, the solution is to use AoT compiler instead of default JIT compiler.

I've found this webpack plugin to use AoT compiler, we can try it and see how it goes: https://www.npmjs.com/package/@ngtools/webpack

[gauravtiwari]

@guilleiguaran Documentation sounds good to me. The plugin is pretty specific to Angular and since we ship support for other libs this will be redundant if someone is using say React. Lets document this as an alternative if folks don't want to use unsafe_eval.

See: https://www.npmjs.com/package/@ngtools/webpack#usage (it's asking for angular entry module)

What do you think?

[guilleiguaran]

@gauravtiwari wdyt about adding it along with the other dependencies in angular installer: https://github.com/rails/webpacker/blob/master/lib/install/angular.rb#L13 and then mention it in the README (and maybe we can add a small example of how to do it).

We can then mention to unsafe_eval as last option if the user doesn't want to configure and use the AoT plugin.

[gauravtiwari]

Makes sense although I am bit worried if this might confuse people since it's going to be incomplete setup (half installer and half documentation). It would be much clearer if we document the whole thing instead and let people decide no?

[guilleiguaran]

@gauravtiwari Sounds good, let's document all of it 👍

[gauravtiwari]

Cool 👍

[guilleiguaran]

Added docs about Angular in a61f8fe

[guilleiguaran]

About __webpack_nonce__ I think it's needed for code splitting and injecting scripts/styles for async chunks in development, can someone confirm this? reference

[gauravtiwari]

@guilleiguaran Seems to work fine, added an example here: gauravtiwari/webpacker-5.2-csp@83a7eb0

[gauravtiwari]

dev server requires allowing ws://localhost:3035 and http://localhost:3035 as connect-src

For dev server bit, we add it by default right? https://github.com/gauravtiwari/webpacker-5.2-csp/blob/master/config/webpacker.yml#L53

[guilleiguaran]

is the yml configuration enough or do we need to add it to Rails initializer anyway??

…

Sent from my iPhone

On Dec 8, 2017, at 11:55, Gaurav Tiwari ***@***.***> wrote: dev server requires allowing ws://localhost:3035 and http://localhost:3035 as connect-src For dev server bit, we add it by default right? https://github.com/gauravtiwari/webpacker-5.2-csp/blob/master/config/webpacker.yml#L53 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[gauravtiwari]

I guess we need it in both places.

[guilleiguaran]

During my tests having it in Rails initializer was enough to fix the problem. I think the reason is that those headers are important only when the content served is an HTML document (since it includes other elements), so it doesn’t apply for the typical usage cases of webpack-dev-server (except if you’re using an html-loader)

…

Sent from my iPhone

On Dec 8, 2017, at 13:15, Gaurav Tiwari ***@***.***> wrote: I guess we need it in both places. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[gauravtiwari]

Ahh yes that's correct, my bad :)

[gauravtiwari]

Think we can close this one then?

[guilleiguaran]

Let's document connect-src in the docs about Webpack Dev Server and then close this.

I'll check on Rails side to see if we can provide a way to provide to third-party libraries to append values to the CSP directives.

[guilleiguaran]

Added note about webpack-dev-server in: a61f8fe