0

I have a T-shirt designing app (running on fabric.js 1.7.14) that has been working fine on iOS Safari for quite some time. Now, when I am calling toDataURL on canvas element, Safari throws a security error. The page in question is here:

https://ideashirt.pl/projektuj/koszulka-t-shirt-basic-kolor-meska

The weirdest thing is it can't be reproduced locally. When I access my local server from my iPhone everything works fine (both http and https). But when you access the page on ideashirt.pl from Safari on an iPhone and add some text to the T-shirt, the script fails when you want to add a product to cart. When you refresh the page and don't modify the canvas, it works. The elements are added in the same way when you add them manually and when they are added from the session after a refresh. This makes me think that maybe fabric somehow taints the canvas for Safari when you modify the elements on canvas.

Mateusz Piwnicki
  • 35
  • 4
  • looks like CORS restriction, show the code of adding a external image to canvas – Stranger in the Q Jul 01 '19 at 16:13
  • Have a look at this answer: https://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception/41510086#41510086 – Synthetx Jul 01 '19 at 22:36
  • Thanks Synthetx, I think that you solution would also work. The thing is that CORS issue was caused by controls' images, not the actual images on the canvas. – Mateusz Piwnicki Jul 02 '19 at 14:31

1 Answers1

0

The problem was indeed CORS. We've recently migrated static content to Amazon and fabric controls images (for resize/rotate/delete) painted on the canvas were served from Cloudfront domain. It's weird that only Safari on iOS and some versions of FF were affected by that though. Thanks for all the help!

Mateusz Piwnicki
  • 35
  • 4