question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SecurityError when using Data URIs css backgrounds on iOS 10+ Safari/Chrome

See original GitHub issue

Hello,

It seems on iOS 10.3+ html2canvas throws errors when calling ctx.toDataURL() if the page contains any inlined images css background using data URIs.

Error : SecurityError (Dom Exception 18). The operation is unsecure.

To reproduce : https://jsfiddle.net/es26hhdx/

It seems to work ok in iOS 9 and android, only safari and chrome mobile on iOS 10 are affected with the problem so far.

It is weird that those local css background data - URIs cause CORS issues as i would think they are used by the lib as local images.

Could you guys think of any workaround (apart from not using data URIs) ?

thanks

-seb

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
pukara-prabhucommented, Feb 17, 2020

The main problem is if you have driven the image from css class. example : background: url(“…/assets/images/”).

Remove this reference and add it as image tag in the html it will work

2reactions
leahwhittakercommented, Nov 21, 2017

@niklasvh We’ve run into this issue as well. I’m glad to see you’ve fixed the issue. Any idea when the fix will be released?

Read more comments on GitHub >

github_iconTop Results From Across the Web

iPhone - Data URI's (css background images) only work when ...
I am wondering if the carrier is blocking data URI schemes or plain does not support it. I would try to tether the...
Read more >
Safari Technology Preview Release Notes - Apple Developer
Safari Extensions. Fixed an issue where browser.tabs sometimes returned an incorrect URL for pinned tabs. Bug Fixes. Fixed the ...
Read more >
68568 - Canvas: SOP error when using getImageData after ...
However, current version of Chrome seems to block all access to pixel data as soon as any SVG image is drawn into the...
Read more >
Most ColdFusion Examples Of EncodeForCSS() Are Broken
First, let's just dispense with the idea that we can use encodeForCss() for any kind of color, whether it be color or background-color...
Read more >
HTMLCanvasElement.toDataURL() - Web APIs | MDN
The HTMLCanvasElement.toDataURL() method returns a data URL containing a representation of the image in the format specified by the type ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found