CODEWITHSUNDEEP
javascriptcssgoogle-chrome
webaholik
webaholik

Reputation: 1815

Chrome 64 Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

Ahh! My site is broken in Chrome.

Getting this message in console: Uncaught DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Cannot access StyleSheet to insertRule

It points to this line of code, which is from a third-party plugin:

document.styleSheets[0].insertRule(rule,0);

Stylesheets defined in head:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.theme.min.css" />
<link type="text/css" rel="stylesheet" href="/Public/css/msgPop.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/select2/select2.css">

Upvotes: 11

Views: 12412

Answers (3)

advence-liz
advence-liz

Reputation: 11

Dynamically add style tag

class StyleSheet {
  constructor(name = 'dynamic-styleSheet') {
    this.styleSheet = this.getStyleSheet(name)
  }

  getStyleSheet(name) {
    if (!document.getElementById(name)) {
      const style = document.createElement('style')
      style.title = name
      document.getElementsByTagName('head')[0].appendChild(style)
    }

    let styleSheet = null
    for (let i = 0; i < document.styleSheets.length; i++) {
      styleSheet = document.styleSheets[i]
      if (styleSheet.title === name) {
        break
      }
    }
    return styleSheet
  }
  insertRule(css, index) {
    return this.styleSheet.insertRule(css, index)
  }
  deleteRule(index) {
    this.styleSheet.deleteRule(index)
  }
}
export default StyleSheet
// let styleSheet = new StyleSheet ()
// styleSheet.insertRule('h1{color:red;}', 0)

Upvotes: 1

Rami Nour
Rami Nour

Reputation: 2303

In my case it was adblock playing tricks on me, turn it off and the message should go away enter image description here

Upvotes: 4

webaholik
webaholik

Reputation: 1815

We believe this commit to Chromium to be the root cause of our issue:

Update behavior of CSSStyleSheet to match spec for Security origin

The quick solution for us was to simply reorder the CSS. It seems that previously the culprit plugin was inserting CSS rules to this remote CSS:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">

Simply reordering our stylesheets to ensure a script from our site was in first position (document.styleSheets[0]), fixed the issue:

<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/jquery-ui/jquery-ui.theme.min.css" />
<link type="text/css" rel="stylesheet" href="/Public/css/msgPop.css" />
<link type="text/css" rel="stylesheet" href="/Public/js/select2/select2.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

Upvotes: 8

Related Questions