Accessing some font's "CSS" style sheet via styleSheet throws SecurityError

Add-ons Development
#1

Steps to reproduce

  1. Go to https://webkit.org/blog/
  2. Open the developer console.
  3. Enter document.styleSheets[1].cssRules.

What happens

It throws a security error:
SecurityError: The operation is insecure.

What should happen

Something less serious, maybe?

Tries in other browser

  • In WebKit (tried with epiphany) it just returns null
  • In Chromium it throws:
    Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
  at <anonymous>:1:25
#2

Nevermind… it’s a known (old) issue…

(Just posted it anyway here now, because I’ve now written it up so nicely :stuck_out_tongue_winking_eye:)

The problem is just I see really no way to circumvent it, except of just adding a try-catch-block around it, because "cssRules" in styleSheet returns true (which seems to refer to some imaginary state of that property, you cannot see it in the Firefox console, at least…)

#3

You’re getting SecurityError because this stylesheet is loaded from different origin but Developer Console works from main page origin.
Refer to WebExtensions porting: access to cross-origin document.styleSheets[...].cssRules to see how I’ve worked around this issue in my add-on.

1 Like
#4

Ah great, thanks. This is indeed the same issue.