Not working with CSP

[mhenrixon]

I have tried to use madmin without success due to adding javascript and css on the fly.

This was my first attempt at getting CSP to work for localhost and production. Works like a charm with importmaps and all the other things I have running. Until I try to add madmin, I can't get any styles for madmin.

Can one precompile the assets for admin instead? I mean, I already have tailwindcss, so...

Kind of like active admin does it here:

This is my CSP config before adding madmin.

Rails.application.configure do
  protocol = Rails.env.local? ? :http : :https
  break nil if Rails.env.local?

  config.content_security_policy do |policy|
    policy.default_src :self, protocol
    policy.frame_src   :self, protocol, "*.stripe.com"
    policy.font_src    :self, protocol, :data, "fonts.googleapis.com", "localhost:#{PORT}"
    policy.img_src     :self, protocol, :data
    policy.media_src   :none
    policy.object_src  :none
    policy.script_src  :self, protocol, "localhost:#{PORT}", "ga.jspm.io", "cdnjs.cloudflare.com", "fonts.googleapis.com",
                       "cdn.usefathom.com"
    policy.style_src   :self, protocol, :unsafe_inline, "localhost:#{PORT}", "ga.jspm.io", "cdnjs.cloudflare.com",
                       "fonts.googleapis.com", "cdn.usefathom.com"
    policy.frame_ancestors :none

    if Rails.env.test?
      policy.connect_src :self, "*"
    else
      policy.connect_src :self, protocol, "localhost:#{PORT}", "ws://localhost:#{PORT}/cable",
                         "wss://localhost:#{PORT}/cable", "wss://#{DOMAIN}/cable"
    end

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

  # Generate session nonces for permitted importmap, inline scripts, and inline styles.
  config.content_security_policy_report_only      = false
  config.content_security_policy_nonce_generator  = ->(request) { request.session.id.to_s }
  config.content_security_policy_nonce_directives = %w[script-src style-src]
end

I can return with a detailed report on the error later this week if needed. I just have to finish up some stuff first.

[excid3]

You'll need unpkg.com and cdn.tailwindcss.com I believe.

I'd like to drop the TailwindCSS CDN and just ship our own stylesheet soon if anyone wants to PR that. We could also probably do the same for the JavaScript.

CDNs were just the easiest to figure out while Rails was in the jsbundling /cssbundling / propshaft / importmap mess. I think things have settled out enough that we can ship our own assets and importmaps. I need to look into how MissionControl handles assets and we can cut a new release with those changes.

[mhenrixon]

I need to look into how MissionControl handles assets, and we can cut a new release with those changes.

Also, we should check hotwire_combobox. That gem does some automatic importmaps, for example.

I have been meaning to check it out.

Unfortunately, the CSS isn't working because the JavaScript from Tailwind adds a stylesheet. I already tried that, and the only way I could find that worked was to disable CSP altogether.

[excid3]

Do you get any warnings / errors that explain what CSP rule it triggers? I haven't had time to test it myself yet.

[mhenrixon]

I was attacking this completely wrong. First, I can easily reuse my application.css and javascript because I already have all the dependencies activated.

Secondly, I couldn't really replicate the problem. I am going to go ahead and close this issue for now. No stress on my behalf; I just don't use the provided assets.

[scouillard]

Did anyone get around this issue without disabling the CSP?

From this conversation, I thought that doing something like this would work but it does not do anything it seems: policy.style_src :self, :https, "unpkg.com", "cdn.tailwindcss.com"

?plugins=forms,typography,aspect-ratio,line-clamp:65 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https: unpkg.com cdn.tailwindcss.com 'nonce-8d480d1a4b285f7b84610e58abebe224'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

It is unfortunate, because we wanted to use Madmin, but we don't use Tailwind. So the CDN is actually very convenient.

Thanks!

[excid3]

This should be fixed now that we're using importmaps and the asset pipeline.