Content Security Policy not working

[23tux]

I'm trying to get Vite and Rails working in a docker setup:

# docker-compose.yml
services:
  web:
    command: bash -c "rm -f tmp/pids/server.pid && bin/rails s -p 4000 -b '0.0.0.0'"
    ports:
      - "4000:4000"
    tty: true
    stdin_open: true


  vite:
    tty: true
    stdin_open: true
    command: "bin/vite dev"
    ports:
      - "3036:3036"

# vite.json
{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": [],
    "strictPort": true
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "port": 3036,
    "host": "staff.lvh.me"
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037,
    "host": "0.0.0.0"
  }
}

In the head of my application.html.erb are the script tags for vite:

    <%= vite_client_tag %>
    <%= vite_javascript_tag 'application' %>

Now when I load the server, the JS console throws an error:

Refused to load the script 'http://staff.lvh.me:4000/vite-dev/assets/application.ff486227.js' because it violates the following Content Security Policy directive: "script-src 'unsafe-eval' http://staff.lvh.me:3036". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

I had a look into the setup and came across this line

# content_security_policy.rb
Rails.application.configure do
  # ...

  config.content_security_policy do |policy|
    policy.script_src(*policy.script_src, :unsafe_eval, "http://#{ ViteRuby.config.host_with_port }") if Rails.env.development?
  end

  # ...
end

These lines were generated by the bundle exec vite install.

• ViteRuby.config.host_with_port == "staff.lvh.me:3036"
• The link from <%= vite_javascript_tag 'application' %> is generated as /vite-dev/assets/application.ff486227.js (note the absent 3036 port in the link)
• And because the port 3036 is not explicitly inside the JS link, the browser makes a request on port 4000, causing a CSP violation

Is this a bug? How is it supposed to work? When I set the CSP by hand to

policy.script_src(*policy.script_src, :unsafe_eval, "http://staff.lvh.me:4000")

The script is loaded... What am I getting wrong here?

[ElMassimo]

Hi Hubert!

The strange part of the CSP configuration is that it doesn't include the original domain (http://staff.lvh.me:4000), which is usually allowed by using script_src :self.

Try adding :self to the allowed sources, instead of using :4000 explicitly.

[23tux]

thanks for your answer! I ended up just disabling the CSP because I didn't had much time for it now. I'll have to have a look at it when going to production. For now it's fine because I just run it in development.