Content security policy for development not working when nonces enabled

[KieranP]

• I have tried upgrading by running bundle update vite_ruby.
• I have read the [troubleshooting section] before opening an issue.

Description 📖

With the following in the Rails content_security_policy.rb:

Rails.application.configure do
  config.content_security_policy_nonce_generator = ->(_request) { SecureRandom.base64(16) }

  config.content_security_policy do |policy|
    [SNIP]

    if Rails.env.development?
      policy.style_src(*policy.style_src, :unsafe_inline)
      policy.script_src(*policy.script_src, :unsafe_eval, "http://#{ViteRuby.config.host_with_port}")
      policy.connect_src(*policy.connect_src, "ws://#{ViteRuby.config.host_with_port}")
    end
  end
end

styles are broken in development. Getting the following browser console errore:

Content-Security-Policy: Ignoring “'unsafe-inline'” within style-src: nonce-source or hash-source specified

Content-Security-Policy: The page’s settings blocked an inline style (style-src-elem) from being applied because it violates the following directive: “style-src 'self' https: 'unsafe-inline' 'nonce-hlKBeGISpbxAy7igRiyz2w=='”

It appears that, if the CSP contains a nonce, then unsafe-* declarations are ignored. And because of this, all the <style> tags that vite is injecting are not able to load.

When I comment out content_security_policy_nonce_generator, then everything works as expected.

Reproduction 🐞

Please provide a link to a repo that can reproduce the problem you ran into.

Vite Ruby Info

Run bin/rake vite:info and provide the output:

bin/vite present?: true
vite_ruby: 3.9.2
vite_rails: 3.0.19
rails: 8.0.2
ruby: ruby 3.4.2 (2025-02-15 revision d2930f8e7a) +PRISM [arm64-darwin24]
node: v22.14.0
yarn: 4.8.1

installed packages:
work@ /Volumes/Work
├─┬ @storybook/svelte-vite@8.6.12
│ ├─┬ @storybook/builder-vite@8.6.12
│ │ └── vite@5.4.18 deduped
│ └── vite@5.4.18 deduped
├─┬ @sveltejs/vite-plugin-svelte@3.1.2
│ ├─┬ @sveltejs/vite-plugin-svelte-inspector@2.1.0
│ │ └── vite@5.4.18 deduped
│ ├── vite@5.4.18 deduped
│ └─┬ vitefu@0.2.5
│   └── vite@5.4.18 deduped
├─┬ @testing-library/svelte@5.2.7
│ └── vite@5.4.18 deduped
├─┬ vite-plugin-ruby@5.1.1
│ └── vite@5.4.18 deduped
├── vite@5.4.18
└─┬ vitest@3.1.1
  ├─┬ @vitest/mocker@3.1.1
  │ └── vite@6.2.6 deduped
  ├─┬ vite-node@3.1.1
  │ └── vite@6.2.6
  └── vite@6.2.6

[KieranP]

Did a bit more digging and found #444 - Vite looks for different meta tag in order to add nonce onto inject style tags.

Added <meta property="csp-nonce" nonce="<%= content_security_policy_nonce %>" /> and now things are working.

Perhaps vite_ruby could override rails csp_meta_tag in order to add both meta tags needed:

    <meta name="csp-nonce" content="<%= content_security_policy_nonce %>" />
    <meta property="csp-nonce" nonce="<%= content_security_policy_nonce %>" />