4

I am using Selenium with Java and Chrome/Firefox driver.

FirefoxProfile profile = new FirefoxProfile();
profile.setPreference("javascript.enabled", true);
profile.setPreference("security.fileuri.strict_origin_policy", false);
DesiredCapabilities capabilities = DesiredCapabilities.firefox();
capabilities.setCapability(FirefoxDriver.PROFILE, profile);
capabilities.setCapability(CapabilityType.ACCEPT_SSL_CERTS, true);
capabilities.setCapability("acceptInsecureCerts",true);
FirefoxOptions options = new FirefoxOptions();
options.addCapabilities(capabilities);
WebDriver webDriver = new FirefoxDriver(options);

Trying to read the CSS stylesheet

JavascriptExecutor js = ((JavascriptExecutor) driver);
Object properties = js.executeScript("return document.styleSheets");

I get the following error:

Exception in thread "main" org.openqa.selenium.WebDriverException: SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

With a chrome driver I get the error error reading property.

I am trying to get the document.styleSheets of a page, but I can't because of CORS rules. How to disable them?

1
  • Have you tried disabling your extensions/plugins- particularly ghostery if you have it?
    – Zach Rieck
    Jun 19, 2020 at 18:00

2 Answers 2

2

Seems like a typo. Instead of documnent possibly you meant document. So effectively, your line of code will be:

Object properties = js.executeScript("return document.styleSheets");

However, this error message...

Exception in thread "main" org.openqa.selenium.WebDriverException: SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

...implies that the cssRules getter() method was blocked from accessing the cross-origin stylesheet.


Details

As per the discussion in Unable to access cssRules property DOMException: "CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet" even though your application may not have any cross-origin stylesheets still in case you are using , these cross-origin stylesheets are injected by the Ghostery browser extension.

So a quick solution would be to disable the Ghostery extension to solve the issue.

1
  • Hi, thanks for the information, I corrected the typo in my comment. Unfortunately, the typo is not the problem in my case. Jun 19, 2020 at 17:18
0

Your webpage project might load css for your document via javascript before the documents inline css is loaded. You might even have placed your css as <link src"cssfile.css"> which in perspective of css can already be seen a cross-origin access if there is other css already loaded. Well from here your document still has no stylesheet javascript could properly access. So you try to modify css rules before such document css even exists and as such fails and throws the cross-origin access security error because the browsers own native stylesheet is attempt to be modified then, which of course you don't want and also does not work.

solve

a) Sort your documents css before the particular error throwing js starts working on it.

b) give your document a stylesheet to work with, even if empty.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {} /* empty stylesheet0 solves the problem */
        </style>
        <!-- ..because the following line -->
        <link rel="stylesheet" type="text/css" href="external.css">
        <!-- does not create a document stylesheet on its own -->
        <script src="stylesheet_manipulating.js"></script>
    </head>
    <body>
    </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.