strict cause UnoCSS font not showing because of CSP

[GreyXor]

Environment

- Operating System: Linux
- Node Version:     v23.1.0
- Nuxt Version:     3.14.1592
- CLI Version:      3.16.0
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      default
- Runtime Modules:  [email protected], [email protected], @unocss/[email protected]
- Build Modules:    -

Nuxt Security Version

v2.1.5

Default setup used?

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

Security options

security: {
    strict: true,
  },

Reproduction

https://github.com/GreyXor/nuxt-security-font-issue-unocss

Description

strict false:
strict true:

indeed it's caused by CSP

Content-Security-Policy: Ignoring “'self'” within script-src: ‘strict-dynamic’ specified [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked an inline style (style-src-attr) from being applied because it violates the following directive: “style-src 'self' 'nonce-w6FbMv5qDylaRyjCXgY517RY'” [localhost:3000](http://localhost:3000/)
Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at data:image/svg+xml;utf8,%3Csvg viewBox='… because it violates the following directive: “img-src 'self'” [localhost:3000](http://localhost:3000/)
[vite] connecting... [client:495:8](http://localhost:3000/_nuxt/@vite/client)
[vite] connected. [client:614:14](http://localhost:3000/_nuxt/@vite/client)
GET
http://localhost:3000/favicon.ico
[HTTP/1.1 503 Service Unavailable 0ms]

Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at data:image/svg+xml;utf8,%3Csvg viewBox='… because it violates the following directive: “img-src 'self'” [localhost:3000](http://localhost:3000/)
Vuetify 3 initialized 
Object { install: install(app)
, defaults: {…}, display: {…}, theme: {…}, icons: {…}, locale: {…}, date: {…}, goTo: {…} }
[vuetify-nuxt-plugin.client.mjs:21:3](virtual:nuxt:/tmp/nuxt-security-font-issue-unocss/.nuxt/vuetify-nuxt-plugin.client.mjs)
Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at data:image/svg+xml;utf8,%3Csvg viewBox='… because it violates the following directive: “img-src 'self'” [localhost:3000](http://localhost:3000/)
<Suspense> is an experimental feature and its API will likely change. [runtime-core.esm-bundler.js:7013:41](http://localhost:3000/_nuxt/@fs/tmp/nuxt-security-font-issue-unocss/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=35039a81)
✨ Nuxt DevTools  Press Shift + Alt + D to open DevTools <empty string> [devtools.client.js:49:13](http://localhost:3000/_nuxt/@fs/tmp/nuxt-security-font-issue-unocss/node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected][email protected][email protected][email protected]_/node_modules/@nuxt/devtools/dist/runtime/plugins/devtools.client.js?v=35039a81)
Content-Security-Policy: The page’s settings blocked the loading of a resource (img-src) at data:image/svg+xml;utf8,%3Csvg viewBox='… because it violates the following directive: “img-src 'self'” [utils.js:141:72](http://localhost:3000/_nuxt/@fs/tmp/nuxt-security-font-issue-unocss/node_modules/.pnpm/@[email protected][email protected][email protected]_@[email protected][email protected][email protected][email protected]_/node_modules/@nuxt/devtools/dist/runtime/plugins/view/utils.js?v=35039a81)

Is this a nuxt-security issue ? maybe it's more related to UnoCSS or maybe nuxt, i'm not sure.

[Baroshem]

@vejja do you have some ideas why this appears?

[vejja]

Yes, the logs pretty much indicate what needs to be done:

• allow 'unsafe-inline' in style-src as Vuetify is trying to mutate the styles via JS (...blocked an inline style from being applied...)
• allow 'data:' in img-src as the SVG is being loaded as data (...blocked the loading of a resource at data:image...)

Moving to discussions as not a bug, but useful to keep as reference for others

[GreyXor]

Thanks, i'm not very fan of 'unsafe-inline'. Are you maybe aware of a workaround better than "unsafe-inline" for vuetify ? or it's inherent to vuetify and impossible to change. thanks

[vejja]

I do fully agree with you on 'unsafe-inline'.
Unfortunately this is a known limitation of CSP for all JS frameworks. It's not fully inherent to Vuetify. React and Svelte face the same issue.
On balance, 'unsafe-inline' is considered acceptable on 'style-src'. It is definitely horrible on 'script-src', but ok-ish on styles.
If you want to avoid it completely, you would need to use a UI framework that never changes the styles via JS. Something that is 100% CSS-class based.

For further reading, on the potential harmfulness of 'unsafe-inline' in styles: https://scotthelme.co.uk/can-you-get-pwned-with-css/