Adding Vuetify dependency to my project gives SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

user_1140909 0
Viewed 169

I want to implement a Vue application that opens a CKEditor component in a new window. I successfully implmented it using the approach from this post. I have also implemented a Codesandbox showing the working example.

Now, when I add the dependency for vuetify using vue add vuetify the CKEditor window is missing the CSS and the browser console (Chrome or Firefox) is displaying a CORS error:

[Vue warn]: Error in callback for watcher "open": "SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet"

(Unfortunately, I wasn't able to correctly add the vuetify dependencies to my Codesandbox - as soon as I add my dependencies, I end up with a compile error.)

vuejs2 vuetify.js vue.js cross-domain css
1 Answers

After some further investigation, it turned out, that Vuetify inserts two references to external stylesheets:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

After window.open() the function copyStyles() is called to transfer all CSS into the new window. However, because of the two external CSS references, the document.stylesheet.cssrules.get() fails with a CORS error and since these two references are at the beginning of all stylesheets, the copyStyles() function terminates and the new window is missing all stylesheets.

To avoid this and have the other stylesheets in the new window, a simple try/catch in function copyStyles() will suffice.

user_11409090
Related