BEX mode default CSP violation in dev server (unsafe-eval)

thomas66777 commented 1 month ago

What happened?

After building quasar dev -m bex using webpack @quasar/app-webpack@4.0.0-beta.19

It is a white screen and the console prints: Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

What did you expect to happen?

I expected the boilerplate quasar app to load as a extension

Reproduction URL

https://github.com/thomas66777/quasar-bex-webpack-v3

How to reproduce?

I am trying to use Quasar BEX with webpack to build a v3 chrome extension. Following the steps here: 16877

npm init quasar@latest
cd quasar-project
npm i @quasar/app-webpack@4.0.0-beta.19
quasar mode add bex --> v3
quasar dev -m bex
Load into chrome://extension -> it is a white screen and the console prints: Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

BEX Mode

Platforms/Browsers

Chrome

Quasar info output

Operating System - Linux(6.9.3-76060903-generic) - linux/x64
NodeJs - 18.19.0

Global packages
  NPM - 10.2.3
  yarn - Not installed
  pnpm - Not installed
  bun - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - 3.1.1
  cordova - Not installed

Important local packages
  quasar - 2.16.9 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 4.0.0-beta.19 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.38 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.3
  pinia - 2.2.2 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.23.1 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - Not installed
  @babel/core - 7.25.2 -- Babel compiler core.
  webpack - 5.93.0 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 5.0.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 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 - pop-os
  wlp2s0 - 192.168.7.231
  docker0 - 172.17.0.1

Relevant log output

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

    at ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=warn&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true (vendor.js:270:1)
    at __webpack_require__ (app.js:204:32)
    at app.js:1390:63
    at __webpack_require__.O (app.js:244:23)
    at app.js:1393:53
    at app.js:1395:12

Additional context

No response

yusufkandemir commented 1 month ago

The default devtool option used in dev mode is eval-cheap-module-source-map, which has a slow build but quick rebuilds. It uses eval() in the generated source maps. This is normally suitable for dev mode. However, the default CSP configured for the manifest v3 template does not allow eval.

As the source map generation is the only thing that is violating unsafe-eval directive, we better adjust the source map generation instead of the CSP directive. That way, the extensions will be more secure by default.

I also noticed manifest v2 template for both app-vite and app-webpack uses 'unsafe-eval'. app-vite should already work without it. app-webpack will start working after this fix. So, those templates will be adjusted too.

yusufkandemir commented 1 month ago

Thanks for reporting. The fixes will be available in the next releases of app-* packages.

thomas66777 commented 3 weeks ago

I just tried the newest version just released this morning 4.0.0-beta.21 and still same error. Here is what I did:

Brand new Project:

npm init quasar@latest
npm i @quasar/app-webpack@4.0.0-beta.21
quasar mode add bex
quasar dev -m bex

$ quasar info

Operating System - Linux(6.9.3-76060903-generic) - linux/x64
NodeJs - 18.19.0

Global packages
  NPM - 10.2.3
  yarn - Not installed
  pnpm - Not installed
  bun - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - 3.1.1
  cordova - Not installed

Important local packages
  quasar - 2.16.9 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 4.0.0-beta.21 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.38 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.3
  pinia - 2.2.2 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.23.1 -- An extremely fast JavaScript and CSS bundler and minifier.
  typescript - Not installed
  @babel/core - 7.25.2 -- Babel compiler core.
  webpack - 5.94.0 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 5.0.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 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*

yusufkandemir commented 3 weeks ago

Sorry, silly mistake, I forgot to push the changes 😅 The fixes are now pushed and will be available in the next release, for real this time.

thomas66777 commented 3 weeks ago

Sorry to push on this, but do you know when that might be? My boss is putting a lot of pressure on me to get the v3 update done. Google says they could remove the extension at any time because its not v3 manifest

yusufkandemir commented 3 weeks ago

Unfortunately, I can't provide exact info as I am not in charge of the releases and we don't have a set release schedule. But, we try to release things as frequently as possible. So, it will hopefully be released in just a few days, if not by the end of today/tomorrow.

quasarframework / quasar