`unsafe-inline` in `style-src` trigger OWASP Vulnerability Scan Warnings

[Ray0907]

Environment

------------------------------
- Operating System: Darwin
- Node Version:     v22.13.1
- Nuxt Version:     3.15.4
- CLI Version:      3.21.1
- Nitro Version:    2.10.4
- Package Manager:  pnpm@10.9.0
- Builder:          -
- User Config:      runtimeConfig, app, vite, nitro, devtools, css, postcss, modules, security, auth, i18n, dayjs, shadcn, colorMode, googleFonts, compatibilityDate
- Runtime Modules:  @sidebase/nuxt-auth@0.10.0, @nuxtjs/i18n@8.5.6, dayjs-nuxt@2.1.11, shadcn-nuxt@0.10.4, @nuxtjs/color-mode@3.5.2, @nuxtjs/google-fonts@3.2.0, nuxt-security@2.2.0
- Build Modules:    -
------------------------------

Nuxt Security Version

v2.2.0

Default setup used?

Yes, the bug happens even if the security option is not customized

Security options

security: {
		nonce: true,
		corsHandler: false,
		headers: {
			xXSSProtection: '1',
			crossOriginEmbedderPolicy: false,
			contentSecurityPolicy: {
				'default-src': ["'self'"],
				'style-src': [
					"'self'", // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
					//"'nonce-{{nonce}}'",
					"'unsafe-inline'",
					'fonts.googleapis.com',
					'cdnjs.cloudflare.com',
					'cdn.jsdelivr.net',
				],
				'script-src': [
					"'self'", // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
					"'nonce-{{nonce}}'",
					"'strict-dynamic'",
					'https:',
					'cdnjs.cloudflare.com',
					'cdn.jsdelivr.net',
					'cdn.sheetjs.com',
				],
				'script-src-attr': [
					"'self'", // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
					"'nonce-{{nonce}}'",
					"'strict-dynamic'",
				],
				'script-src-elem': [
					"'self'", // fallback value for older browsers, automatically removed if `strict-dynamic` is supported.
					"'nonce-{{nonce}}'",
					'cdnjs.cloudflare.com',
					'cdn.jsdelivr.net',
				],
				'connect-src': SYSTEM_ENV == 'development' ? ["'self'", 'ws:'] : ["'self'"],
				'frame-src': ["'self'"],
				'font-src': ["'self'", 'fonts.googleapis.com', 'cdn.jsdelivr.net', 'fonts.gstatic.com', 'data:'],
				'media-src': ["'self'"],
				'manifest-src': ["'self'"],
				'worker-src': ["'self'"],
				'img-src': ["'self'", 'data:', 'blob:'],
			},
		},
	},

Reproduction

as description

Description

1. Using the default unsafe-inline in style-src fails OWASP security scans with medium/high risk warnings.

2. When configuring a stricter CSP by replacing unsafe-inline with nonces:

   "style-src": [
     "'self'", 
     "'nonce-{{nonce}}'",
     "'unsafe-hashes'",
     "fonts.googleapis.com",
     "cdnjs.cloudflare.com",
     "cdn.jsdelivr.net",
   ],

3. This results in runtime CSP violations like

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-NONCE' 'unsafe-hashes' fonts.googleapis.com cdnjs.cloudflare.com cdn.jsdelivr.net". Either the 'unsafe-inline' keyword, a hash ('sha256-XXXX'), or a nonce ('nonce-...') is required to enable inline execution.

Additional context

No response

Logs

[vejja]

Hi @Ray0907

Unfortunately this is a known limitation of CSP for all JS frameworks, it is totally unrelated to Nuxt Security.

You have two options:

• Remove unsafe-inline from style-src to get a perfect OWASP score. To do so, you will first need to eliminate all Javascript code that modifies styles dynamically, which basically eliminates all modern UI frameworks. To be clear: rewrite your UI from scratch without ShadCN and ColorMode, delete all style bindings in VueJS, and rewrite all your dynamic style modifications via CSS selectors.
• Accept a slightly lower OWASP score and keep unsafe-inline in style-src. Most people will tell you that the security risk is almost inexistent but you might not want to take this risk.

We filed an RFC proposal on the CSP spec, you can support it here : w3c/webappsec-csp#625

For more reading on the subject:
https://nuxt-security.vercel.app/advanced/strict-csp#important-details
#585

Moving to discussion as good reference for others.