atoponce/webpassgen

Stylesheet can't be loaded when accessed locally (file://) (CORS)

Closed this issue · 1 comments

Mirrored a local copy and clicked around to try this out. When clicking Dark Mode, getting a:
Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules at :1:25 error on latest chrome.

Upon review this appears to be due to the accessing of the stylesheet interface (css.rules[0]) locally (which for whatever reason, they decided should be a violation of CORS even when the index.html is served via file://).

Being what the function is doing with Dark Mode, this would seemingly be easily fixed by including both dark and light mode in the stylesheet and just activating using a selector. Happy to do a PR if you'd like.

(For many apps this wouldn't really be an issue, but given the security concerns with PW generation, it's probably fairly common for people to download and attempt to run locally without standing up a server. At first glance, don't see any other issues that would would make this not run perfectly fine locally?)

Refs:
https://stackoverflow.com/questions/48753691/cannot-access-cssrules-from-local-css-file-in-chrome-64/49160760#49160760
https://stackoverflow.com/questions/49161159/uncaught-domexception-failed-to-read-the-rules-property-from-cssstylesheet

Ah, interesting. I was aware of Chrome not allowing the theme switching when served via the file:// protocol, but I was not aware there was a solution. I figured it would require running a local web server, and serving from there (E.G., python3 -m http.server 8000).

I'm not familiar with how to design a clean solution, so a PR would be great.