Runtime errors with Content Security Policy about vue3-notification

[kyvg]

Hi! That library haven't any eval/inline code. Are you sure that problem with that library?

[DanielBickler]

I believe I have confirmed it's related to how the non-scoped CSS from src/Notifications.vue is being injected into the site by Vite. That CSS is missing when we receive that error (with the restrictive CSP).

I believe it's related to the styleInject function in the compiled output which is injecting the CSS from that component and also corresponds to the line numbers in my compiled code.

I'm not a CSP expert by any means so please let me know if I'm mistaken or there's any more information I can provide.

[MichalKrakow]

Hi there, just bump on the very same thing. so... havent yet dived into the source code but what vite spits out in build it's like pure css in js:

.vue-notification-group {
  display: block;
  position: fixed;
  z-index: 5000;
}
.vue-notification-wrapper {
  display: block;
  overflow: hidden;
//  ... and so on

From what i can tell this is just part of single file component 'Notification.vue' style part. This is where error originates. So should we use some other import method.

Dividing source code so developers can import js and styles seperatly helps with CSP greatly by allowing to place relevant js and css code to respective files on localhost wchich gets loaded with CSP safty policies.

Dont know if theres a way to import your's super nice notifications in such manner. 'Sweet allert' is cinda fat on code size side but for now it's a valid alternative (to whomever stumbless upon this response).

[MichalKrakow]

Follow up, this might get bypassed by pushing nonce to the injected style block. This CSP thing is going to burn a lot of money in the industry, really curious if its worth the hussle.

[kyvg]

@MichalKrakow I think we can import .css files separately like that:

import { createApp } from 'vue'
import Notifications from '@kyvg/vue3-notification'

import '@kyvg/vue3-notification/dist/style.css'

const app = createApp({...})
app.use(Notifications)

But it would be a breaking change

[github-actions]

Stale issue message

[DanielBickler]

Personally I would have no problem with that breaking change - a lot of Vue 3 libraries need CSS to be included like that, I think it might be the default in Vite?