Content Security Policy error on BEX dev mode using app-vite

[feschaffa]

What happened?

Good afternoon!

After updating to vite-app 2.x I'm no longer able to run BEX in development mode. The browser loads the extension, starts opening and closing multiple windows and the console outputs the following:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-eV5p0xsw4UC/bJ48fZ5luze2UmXZbYuQMHs4vAKQynQ='), or a nonce ('nonce-...') is required to enable inline execution..

This does not happen if I quasar build -m bex -T chrome the extension and load it afterwards.

I'm using the latest quasar version and the latest vite-app version, and it happens even with an unmodified project created with npm init quasar@latest.

Couldn't test it on firefox, unfortunately.

What did you expect to happen?

The browser extension to load and run without any problems.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-7yyrnlxz?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

1. Initialize a Quasar project with vite-app v2.0.x (npm init quasar@latest)
2. Enable BEX mode (quasar mode add bex)
3. Run quasar dev -m bex -T chrome
4. Load the unpacked extension to chrome

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

BEX Mode

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(24.2.0) - darwin/arm64
NodeJs - 23.3.0

Global packages
  NPM - 11.0.0
  yarn - Not installed
  pnpm - 9.1.3
  bun - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - 4.0.0
  cordova - Not installed

Important local packages
  quasar - 2.17.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.8 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.16 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - Not installed
  vite - 6.0.11 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.19.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.24.2 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - MacBook-Air.local
  feth266 - 10.144.16.214
  en0 - 192.168.3.107

Relevant log output

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-eV5p0xsw4UC/bJ48fZ5luze2UmXZbYuQMHs4vAKQynQ='), or a nonce ('nonce-...') is required to enable inline execution.

WebSocket connection to 'ws://localhost:9600/' failed: Error during WebSocket handshake: Unexpected response code: 400

Additional context

No response

[feschaffa]

Related #17777