QSelect breaks Content-Security-Policy, forcing to use `style-src "unsafe-inline"`

What happened?

Clicking on QSelect component (and probably many more which use useVirtualScroll) will generate an error on CSP.

Refused to apply inline style because it violates the following Content Security Policy directive: “default-src ‘self’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=’), or a nonce (‘nonce-…’) is required to enable inline execution. Note also that ‘style-src’ was not explicitly set, so ‘default-src’ is used as a fallback.

Reversing the code I understood that when the user click on QSelect, it will trigger useVirtualScroll from quasar/src/components/virtual-scroll/use-virtual-scroll.js which eventually will trigger setOverflowAnchor.

setOverflowAnchor will add a style element to the DOM and try to add some rules, which obviously will make the browser angry (because of the CSP).

The error actually doesn’t seems to break the UI.

What did you expect to happen?

QSelect and the other component affected should not throw errors if CSP style-src "self" is set

Reproduction URL

https://github.com/kael-k/quasar-with-broken-csp-demo

How to reproduce?

1. start the app by building and running the Dockerfile (or build it yourself)
2. click on the QSelect

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Operating System - Linux(5.16.15-arch1-1) - linux/x64
NodeJs - 16.13.0

Global packages
  NPM - 8.1.0
  yarn - 1.22.18
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - 10.0.0 (cordova-lib@10.1.0)

Important local packages
  quasar - 2.6.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.4.7 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.13.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14
  pinia - Not installed
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.17.8 -- Babel compiler core.
  webpack - 5.71.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.4 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

[rstoenescu]

Fix will be available in Quasar v2.6.6

[pdanpdan]

Don’t ask for the same thing for morph 😃