Why Can\'t I Access CSS Rules from a Local File in Chrome 64?

Cannot Access CSS Rules from Local CSS File in Chrome 64

Recently, web developers have encountered an issue where accessing CSS rules from a local CSS file is not possible in Chrome version 64. This issue can be attributed to security changes implemented in the browser.

The Problem

In the past, Chrome would allow developers to access CSS rules from local files. However, with version 64, this functionality has been restricted. When attempting to access the cssRules property of a stylesheet, developers encounter an undefined response or an error.

<code class="html"><script>
window.onload = function() {
  try {
    alert(document.styleSheets[0]); // works
    alert(document.styleSheets[0].cssRules); // undefined
  } catch (e) {
    alert(e); // error
  }
}
</script>

<link rel='stylesheet' href='myStyle.css'>

<!-- myStyle.css -->
body {
  background-color: green;
}</code>

Solutions

To address this issue, developers have identified several workarounds:

1. Serve the files online or from localhost: By hosting the HTML and CSS files on a server or using localhost, the CORS policy is not enforced, and CSS rules can be accessed.
2. Use other browsers: Other browsers such as Internet Explorer, Microsoft Edge, and Firefox do not currently enforce the same CORS restriction.
3. Command-line option: Chrome provides a command-line option --allow-file-access-from-files that allows access to CSS rules from local files. This option should be used cautiously.

Explanation

The root cause of this issue lies in a change in Chrome's security rules. Chrome now adheres to the Cross-Origin Resource Sharing (CORS) policy, which restricts access to resources from different origins. Since local files have a different origin than the HTML file, accessing CSS rules from these files violates the CORS policy.

Open Issues

While the implementation of the CORS policy in Chrome improves security, it has also created some open issues:

• The only way to detect if a stylesheet is inaccessible from JavaScript is through a try/catch block.
• There may be an implementation issue in Chrome that breaks certain workarounds.
• The CSS Object Model specification is still in "Working Draft" status, leaving room for future changes.

The above is the detailed content of Why Can\'t I Access CSS Rules from a Local File in Chrome 64?. For more information, please follow other related articles on the PHP Chinese website!