Firefox error: "Uncaught DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet"

[JoshuaKGoldberg]

Recreating #278 but with a call stack:

SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
  at d/e.handlePrint/M.onload @ https://www.codecademy.com/webpack/252.4033dce2c049256b0fb3.chunk.js:1:4303

252.4033dce2c049256b0fb3.chunk.js.txt

The specific line that's throwing the error is https://github.com/gregnb/react-to-print/blob/c224cf7f03c7fc44478cafd60fef2a822d97adca/src/index.tsx#L376

Root cause: sheet.cssRules is getting blocked by Firefox: https://discourse.mozilla.org/t/webextensions-porting-access-to-cross-origin-document-stylesheets-cssrules/18359 / https://discourse.mozilla.org/t/accessing-some-fonts-css-style-sheet-via-stylesheet-throws-securityerror/38717.

I don't know how to work around this 😄 ... maybe log a warning and continue without the styles?

[MatthewHerbst]

Hi @JoshuaKGoldberg thanks so much for the report and big thanks for the links, that explains a lot. I've made a comment on https://bugzilla.mozilla.org/show_bug.cgi?id=1393022 so hopefully we can get an answer from the Firefox team soon, but I agree for now it would be nice if react-to-print could do its best to gracefully handle the error. I'll take a look at pushing a fix for that this weekend!

[MatthewHerbst]

@JoshuaKGoldberg I have this ready but have been having a hard time replicating/testing the exact error. Do you mind giving me the CSS content you have that's causing the problem? I tried replicating with the following but didn't see an error:

<style id="crossOriginImport">
  @import url("https://www.codecademy.com/webpack/5.2b8e4552d70cf8bdea04.chunk.css");
</style>

[JoshuaKGoldberg]

We haven't gotten around to reproducing this locally, but from knowing the call stack here are the repro steps:

1. Open Firefox with relatively restricted privacy settings
2. Log into codecademy.com as a user who's completed a course or path
3. Go to your profile on codecademy.com/profiles/me and click the Certificate button
4. Click the Save as PDF button

You need to be a Pro subscriber to do this so if you want, email me at [email protected] and I can set your account up if you have one / give you an account with that. 💝

Sorry I don't have anything more for you!

[MatthewHerbst]

@JoshuaKGoldberg I sent you an email but haven't heard back

[JoshuaKGoldberg]

Hey, sorry - I'm on vacation and not checking my work email often 😄. Responding now!

[MatthewHerbst]

Replying here to keep information available:

So, the node on https://discourse.mozilla.org/t/accessing-some-fonts-css-style-sheet-via-stylesheet-throws-securityerror/38717 that causes the error is

<link rel="stylesheet" href="https://www.apple.com/wss/fonts?families=SF+Pro,v1" type="text/css"></link>

When accessing it via document.styleSheets[1].cssRules I do indeed get the error: Uncaught DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

Interestingly, when I try to put that resource on my local test examples I get a completely different error, on both Chrome and Firefox: The resource from “https://www.apple.com/wss/fonts?families=SF+Mono,v2” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The other hard part is that <link> nodes are not handled by the problematic line of code in react-to-print, only <style> tags are. I'm able to replicate the 404 error, but not the error we care about, using an import in a <style> tag:

<style id="crossOriginImport">
    @import url("https://www.apple.com/wss/fonts?families=SF+Pro,v1");
</style>

For now going to ship the try/catch fix since I'm very confident that will solve the issue, though will still be looking for a way to create a local example for regression testing purposes.

[MatthewHerbst]

The fix for this has been published in v2.14.1, please let me know if you run into any other issues. Thanks so much for the debugging help!

[JoshuaKGoldberg]

Amazing, thanks so much!

cc @dreamwasp @jakemhiller