CSS CORS Issue

[ryanatearth]

I'm just starting to experiment with this library, as html2canvas is having some issues for me. The first thin I'm experiencing is a CSS CORS issue. The console debugger is throwing an error:

Error inlining remote css file SecurityError: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet

I'm not sure why this is happening, as any CSS that is associated with the DOM node I am trying to render to an image is only from my main domain. Not sure why a whole bunch of other CSS is trying to be parsed from this library. It appears that this library is trying to fetch and parse CSS files that are also included on the page, which I guess makes sense.

Is there a way to NOT have the library parse certain css files?

Here are a couple screenshots:

[lisaschumann]

I would second that. Is there not a way to just include specific styling rather than fetching it from the style sheets? Do not want to add crossorigin="anonymous" is possible.

[vivcat[bot]]

Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[lisaschumann]

I think this issue is still relevant!

[watzon]

This is definitely still an issue, does anyone have a workaround?

[Gamewise]

Yep still an issue for me. Any solutions that ppl have found?

[Gamewise]

Tried adding crossorigin="anonymous" to my css style links but that doesn't fix anything

[PixtonMustafa]

This issue also happens to me, any solution?

[koosvanderkolk]

Same issue here.

[imrids]

Issue also happens to me.

[rahmanramsi]

same issue to me

[ahmedmukhtar1133]

Also having the same issue.

[italomarcos1]

well be damned

[Gamewise]

Hey folks, so I recently starting self-hosting all CSS (Google fonts etc.) and it fixed the issue. Probably just as well cos I discovered it's now illegal (in EU) to call in Google fonts as per normal, so you might as well bite the bullet and self-host.

[longqioo]

the Same issue;When will it be settled? Big God

[born2net]

same issue here, too bad as no longer usable this lib.

[aleh-skrypko]

+1, unusable

[productdevbook]

same problem :/

[ljbqrn]

[Still] Same issue here.

[argarner]

Even after embedding custom fonts as base64 strings, and only using local custom css for the html-to-image component, it still queries all remote assets embedded in the document head and beyond my control.

This library sorely needs the addition of a new option, that prevents all remote assets from being queried and generates the output regardless of remote (CSS or CORS) errors. Something like loadRemoteAssets: bool or an array of remote domains that can be safely queried.

[walterwang]

Adding crossorigin fixed it for me:

  <link rel="icon" type="image/x-icon" href="favicon.ico" crossorigin>
  <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,500;0,600;0,700;0,800;1,300&display=swap" rel="stylesheet" crossorigin>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" crossorigin>

[brandoningli]

Any news on this? Still experiencing this issue.