U4-10936 - No Doctype Icons - Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules in Chrome 64

Created by Kevin Jump 06 Feb 2018, 11:42:28 Updated by Sebastiaan Janssen 06 Jun 2018, 07:58:38

Tags: PR

This might be a chrome issue - but after upgrading to Chome 64 I can no longer pick icons for a doctype When including an external css file in the back office

I have a package.manifest that brings in a typekit font to the back-office - (for editor styling titles, etc..) - this works fine in Firefox and chrome pre 64 - but since upgrading to chrome, opening the icon dialog is blank and the chrome console logs the following error:

angular.min.js?cdv=1788156276:63 Error: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules at umbraco.services.js?cdv=1788156276:2938 at angular.min.js?cdv=1788156276:108 at e (angular.min.js?cdv=1788156276:31) at angular.min.js?cdv=1788156276:34

looking at the document.Stylesheets object in the browser i can see i don't have rules or CSSRules for the imported style-sheets. (see attached)

Things i have tried :

  • importing the font in both http and https
  • removing the font (fixes this issue)
  • use another browser (also works)

I don't know if this can be mitigated in umbraco.services.iconHelper but that is where the exception is being thrown

1 Attachments

Comments

Kevin Jump 06 Feb 2018, 12:21:35

Hi

after a bit of looking around it appears this is the change in chrome : https://chromium.googlesource.com/chromium/src/+/a4ebe08c91e29140e700c7bae9b94f27a786d1ca

Update behavior of CSSStyleSheet to match spec for Security origin

Spec is here: https://www.w3.org/TR/cssom-1/#the-cssstylesheet-interface

Updated: the following methods now throw a SecurityError if the style sheet is not accessible:

  • cssRules() / rules()
  • insertRule()
  • deleteRule()

Bug: 775525 Change-Id: I409d486df0f0fdced4684b19e3fae4c3a0ec2868 Reviewed-on: https://chromium-review.googlesource.com/783911 Commit-Queue: meade_UTC10 meade@chromium.org Reviewed-by: nainar nainar@chromium.org Cr-Commit-Position: refs/heads/master@

so chrome now throws an exception if you try to access the rules of an external stylesheet.


Herman Emanuelsson 13 Feb 2018, 10:21:46

Thanks for this issue report Kevin! I had the same problem.

I went through all the plugins I had installed and found that one plugin had a reference to Google fonts, when i removed it the icons started to work again.

css: [
	//"https://fonts.googleapis.com/css?family=Tangerine"
]

// Herman


Meixger 04 Apr 2018, 17:45:12

happens also with Chrome and Evernote extension


Simon Dingley 02 May 2018, 08:44:28

+1 for having the issue with the Evernote extension installed. Disabling the extension and I get the icons back again.


Martin Amsinck Andersen 04 Jun 2018, 14:36:17

@ProNotion @meixger evernote disable fixed it here to


Sebastiaan Janssen 06 Jun 2018, 07:49:40

PR: https://github.com/umbraco/Umbraco-CMS/pull/2672


Priority: Normal

Type: Bug

State: Fixed

Assignee:

Difficulty: Normal

Category:

Backwards Compatible: True

Fix Submitted:

Affected versions:

Due in version: 7.11.0

Sprint:

Story Points:

Cycle: