New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpacker and CSP #1057

Closed
guilleiguaran opened this Issue Dec 1, 2017 · 27 comments

Comments

Projects
None yet
4 participants
@guilleiguaran
Member

guilleiguaran commented Dec 1, 2017

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

This comment has been minimized.

Show comment
Hide comment
@renchap

renchap Dec 1, 2017

Contributor

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.

Contributor

renchap commented Dec 1, 2017

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

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 2, 2017

Member

@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.

Member

guilleiguaran commented Dec 2, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 4, 2017

Collaborator

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.

Collaborator

gauravtiwari commented Dec 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 4, 2017

Member

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

Member

guilleiguaran commented Dec 4, 2017

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

@gauravtiwari

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 4, 2017

Collaborator

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

Collaborator

gauravtiwari commented Dec 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 4, 2017

Collaborator

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"
Collaborator

gauravtiwari commented Dec 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari
Collaborator

gauravtiwari commented Dec 4, 2017

@gauravtiwari

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari
Collaborator

gauravtiwari commented Dec 4, 2017

@swrobel

This comment has been minimized.

Show comment
Hide comment
@swrobel

swrobel Dec 6, 2017

Contributor

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

Contributor

swrobel commented Dec 6, 2017

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

@guilleiguaran

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 7, 2017

Member

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

Member

guilleiguaran commented Dec 7, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 7, 2017

Member

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

Member

guilleiguaran commented Dec 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 7, 2017

Collaborator

@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?

Collaborator

gauravtiwari commented Dec 7, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 7, 2017

Member

@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.

Member

guilleiguaran commented Dec 7, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 7, 2017

Collaborator

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?

Collaborator

gauravtiwari commented Dec 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 7, 2017

Member

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

Member

guilleiguaran commented Dec 7, 2017

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

@gauravtiwari

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 7, 2017

Collaborator

Cool 👍

Collaborator

gauravtiwari commented Dec 7, 2017

Cool 👍

@guilleiguaran

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 7, 2017

Member

Added docs about Angular in a61f8fe

Member

guilleiguaran commented Dec 7, 2017

Added docs about Angular in a61f8fe

@guilleiguaran

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 7, 2017

Member

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

Member

guilleiguaran commented Dec 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 8, 2017

Collaborator

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

Collaborator

gauravtiwari commented Dec 8, 2017

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

@gauravtiwari

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 8, 2017

Collaborator

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

Collaborator

gauravtiwari commented Dec 8, 2017

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

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 8, 2017

Member
Member

guilleiguaran commented Dec 8, 2017

@gauravtiwari

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 8, 2017

Collaborator

I guess we need it in both places.

Collaborator

gauravtiwari commented Dec 8, 2017

I guess we need it in both places.

@guilleiguaran

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 8, 2017

Member
Member

guilleiguaran commented Dec 8, 2017

@gauravtiwari

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 8, 2017

Collaborator

Ahh yes that's correct, my bad :)

Collaborator

gauravtiwari commented Dec 8, 2017

Ahh yes that's correct, my bad :)

@gauravtiwari

This comment has been minimized.

Show comment
Hide comment
@gauravtiwari

gauravtiwari Dec 8, 2017

Collaborator

Think we can close this one then?

Collaborator

gauravtiwari commented Dec 8, 2017

Think we can close this one then?

@guilleiguaran

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 9, 2017

Member

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.

Member

guilleiguaran commented Dec 9, 2017

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

This comment has been minimized.

Show comment
Hide comment
@guilleiguaran

guilleiguaran Dec 9, 2017

Member

Added note about webpack-dev-server in: a61f8fe

Member

guilleiguaran commented Dec 9, 2017

Added note about webpack-dev-server in: a61f8fe

ashtonthomas added a commit to ashtonthomas/sample-rails-react-semantic-ui-app that referenced this issue Jan 28, 2018

get rid of console warnings
Get rid of console warnings:

rails/webpacker#1057

/content_security_policy.rb
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment