Cross Pen images
Just lately we had been having a discussion with Keith Wyland on Twitter. Keith ended up being trying to utilizing and pictures in a Pen he was focusing on. He kept getting a security error:
Uncaught SecurityError: an endeavor was built to break-through the security policy regarding the individual representative.
So he asked us if CodePen PRO's investment Hosting function would help with this, because he thought the issue may be pertaining to cross-domain safety. We had beenn't yes, really, but we forked his Pen and moved the picture possessions to the PRO resource Hosting. It did not appear to clean up the issue. We do set appropriate cross-origin headers for many our offered possessions. Therefore, for instance, you are able to Ajax all of them not a problem. That was just area of the problem here though. Others part had to do with a "tainted fabric". Keith in fact typed a blog post about it very trip. And he writes:
Obviously, once you pull-in a resource from an outside domain, or cross-domain, and employ it regarding fabric, the canvas becomes "tainted" and certainly will no more permit you to pull data from it.
var img = brand-new Image; // This src needs the perfect headers img.src = This makes it work img.crossOrigin = "unknown";
Look at Pen Canvas toDataURL with CrossOrigin by Keith Wyland (@keithwyland) on CodePen
Unless you understand black icon in the exact middle of the circle, it may need to do with (one thing weird associated with) caching. Attempt orifice DevTools and loading the web page with those open. And any tips on the reason why that might be the situation, tell us!