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:  pnpm@9.14.4
- Builder:          -
- User Config:      default
- Runtime Modules:  vuetify-nuxt-module@0.18.3, nuxt-security@2.1.5, @unocss/nuxt@0.65.1
- 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/@vue+runtime-core@3.5.13/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/@nuxt+devtools@1.6.3_rollup@4.28.1_vite@5.4.11_@types+node@22.10.1_terser@5.37.0__vue@3.5.13_typescript@5.7.2_/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/@nuxt+devtools@1.6.3_rollup@4.28.1_vite@5.4.11_@types+node@22.10.1_terser@5.37.0__vue@3.5.13_typescript@5.7.2_/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