Including Vuetify in my project has triggered a SecurityError, specifically relating to the CSSStyleSheet.cssRules getter being restricted from accessing cross-origin stylesheets

Looking to create a Vue application that opens a CKEditor component in a separate window, I managed to do so following the method outlined in this helpful post. I have even set up a Codesandbox demonstration to showcase the functioning example.

However, upon adding Vuetify as a dependency via vue add vuetify, the CKEditor window loses its CSS styling and I encounter a CORS error in the browser console (in Chrome or Firefox) that reads:

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

(Regrettably, I faced issues while trying to add Vuetify dependencies to my Codesandbox - it resulted in a compilation error whenever I attempted to include them.)

cssvue.jsvuejs2vuetify.jscross-domain

Answer №1

Upon further examination, it was discovered that Vuetify includes two links to external style sheets:

<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">

When the window.open() function is called, the copyStyles() function is used to transfer all CSS to the new window. However, due to the presence of the two external CSS references, the document.stylesheet.cssrules.get() function fails with a CORS error. Since these references are at the beginning of all stylesheets, the copyStyles() function stops executing and the new window is left without any styles.

To resolve this issue and ensure that the other stylesheets are included in the new window, a simple try/catch block can be added to the copyStyles() function.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reactivity in Vue on dynamically generated HTML elements

Experimenting with Vue 2, I attempted to generate DOM elements in the mounted hook as shown below: <div id="app"> <div id="container"> <label for="static_name">Existing field</label> <input ...

javascriptvue.jsdomvuejs2createelement

Is there a way to showcase images next to each other within an array in Angular 8, like having 2 images in a row and then another 2 in the next row?

Here is the HTML code I created and tested: <div class="row"> <div *ngFor="let url of urls" class="col-md-6"> <img [src]="url" alt="Image not found" height="250px" width="350px" (click)="imageClick(url)"> </div> < ...

htmlcssbootstrap-4angular8

Guide to creating a dynamic import feature in Nuxt

Within my nuxt component, I am eager to integrate the ace editor: import Ace from "ace-builds/src-noconflict/ace" Upon mounting the component, I execute the following: this.editor = Ace.edit... It is evident that the window is not defined on th ...

vue.jsnuxt.jsserver-side-renderingace-editor

The icons at the bottom of the page are not properly aligned

I am having trouble aligning my footer icons, specifically the first 2 images. While the bootstrap icons are centered correctly, the first 2 images are not aligning as expected. I have tried various methods like align-items-center, justify-content-center, ...

htmlcsstwitter-bootstrapbootstrap-5

How can you customize gutter widths for specific rows in Bootstrap 3?

Currently, I am constructing my own website using Bootstrap 3 and have come across a challenge that I would like to address: My goal is to assign distinctive gutter widths to certain rows in my design. The remaining sections of the site will adhere to th ...

htmlcsstwitter-bootstraprowtwitter-bootstrap-3

Discovering the method to access a getter from a different JavaScript file

In a laravel + vuejs project, I am trying to access my currentUser role in my Acces.js file using store.getters.currentUser but encountering an error: Error in render: "TypeError: Cannot read property 'getters' of undefined I have tried mu ...

javascriptvue.jsecmascript-6vuex

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...

htmlcsshover

The vuestrap spinner is struggling to catch the shown event

https://github.com/yuche/vue-strap/blob/master/src/Spinner.vue https://github.com/yuche/vue-strap/blob/master/docs/example/spinnerDocs.vue Upon reviewing the provided example, I have attempted to replicate the same functionality here: https://jsfiddle.net ...

vue.js

Creative styling options for image thumbnails using Bootstrap

Can someone help me with an issue I'm having while using the Bootstrap Thumbnail grid system? My images are overlapping and I can't figure out why. I've attached an image for reference. Whenever I hover over the images, the ones in the midd ...

htmlcsstwitter-bootstrapgrid

Swapping out a button

I tried searching for a solution to my problem but I couldn't find it because of my limited English proficiency. Therefore, I apologize if my question has already been answered. https://i.sstatic.net/XhQBM.jpg I would like to place my button in the ...

htmlcssbuttonresponsive

How come my label and input are showing up in my navigation bar?

For my assignment, I am designing a website layout and facing an issue where the text appears behind the navigation bar instead of below it. I have tried adjusting the margin-bottom to 50px with important tags and setting the nav bar as static. Despite tr ...

htmlcss

Tips for implementing HttpOnly cookies in Vue.js and Vuex when receiving them from a Laravel server

I am currently working on a project that involves a VueJs front-end and a Laravel back-end for creating APIs and managing the server. Within my Laravel project, I am utilizing JWT to generate tokens containing user information. Issue: My challenge lies ...

laravelvue.jslaravel-5cookiesvuex

CSS Text ellipsis displays only the beginning of each paragraph

I want to add ellipsis to a text, but it keeps including the first line of all paragraphs. What I actually need is for only the first line of the content to have the ellipsis applied. Here is an example of the content: When using websocket to send message ...

javascripthtmljquerycssbootstrap-5

What is the best way to effectively incorporate Ruby into the CSS attribute of a HAML %li element?

Greetings everyone, I am new to the world of development and seeking guidance from experienced individuals. I have been trying to solve a coding issue for quite some time now. I am currently enrolled in a programming course at Code Academy based in Chicago ...

ruby-on-railscsshamlerbinterpolation

Randomizing filenames for Vue async component chunks

I am currently working on a Laravel app that incorporates numerous Vue components which are being loaded asynchronously using the following method: Vue.component("general-info", function (resolve, reject) { require(["./components/general- ...

laravelvue.jswebpackasync-components

Ensuring that a canvas remains centered and completely visible within its parent element while zooming in React

Currently, I am developing a straightforward PowerPoint creator using React. In this project, I have integrated a zoom feature for a canvas element. The principle is that the canvas should resize based on a scale factor. However, there seems to be an issue ...

javascripthtmlcssreactjscanvas

What should I designate as the selector when customizing dialog boxes?

I am attempting to change the title bar color of a dialog box in CSS, but I am running into issues. Below is the HTML code for the dialog box and the corresponding CSS. <div id="picture1Dialog" title = "Title"> <p id="picture1Text"> ...

javascriptjqueryhtmlcss

Issue with MIME handling while utilizing Vue-Router in combination with Express

Struggling to access a specific route in Express, I keep encountering an error in my browser. Additionally, when the Vue application is built, only the Home page and the 404 page seem to work properly, while the rest display a default empty HTML layout. F ...

javascripttypescriptvue.jsexpressvue-router

Arranging divs with HTML and CSS

I am currently facing issues with the positioning of 3 scripts in my HTML file. The vertical gauge is overlapping the second circular gauge, despite trying different positioning options to no avail. How can I adjust the layout so that the vertical gauge a ...

htmlcss

Retrieve information from Datatable Vuetify using axios fetch

I am encountering an issue with displaying data from a GET axios API. When inspecting the endpoint call, it correctly returns an array with objects. However, when attempting to display this data in the datatable, it shows that there is no data available. & ...

vue.jsdatatableaxiosvuetify.js