Skip to content

strict cause UnoCSS font not showing because of CSP #584

Description

@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: Image
strict true: Image

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.

Activity

  1. Baroshem commented on Dec 9, 2024

    @Baroshem
    Owner

    @vejja do you have some ideas why this appears?

  2. vejja commented on Dec 9, 2024

    @vejja
    Collaborator

    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

  3. removed
    bugSomething isn't working
    on Dec 9, 2024
  4. Repository owner locked and limited conversation to collaborators on Dec 9, 2024
  5. converted this issue into a discussion #585 on Dec 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions