I've read somewhere that Facebook have cross enabled for Profile Pictures. I'm not sure about albums and other stuff, but in fact Facebook is including the header Access-Control-Allow-Origin: * on every one of the URLs that I have tested to far.
I've tried the standard Profile picture URL
https://graph.facebook.com/PROFILE_ID/picture?width=25&height=25
And well as Akamai urls:
https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash3/...
(The latter are returned by https://graph.facebook.com/PROFILE_ID/photos)
My app is basically doing things such as:
var img = new Image;
img.src = "https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash3/...";
img.crossOrigin = "Anonymous";
img.onload = function() {
ctx.drawImage(img, x, y);
}
// Above code will be repeated several times
// And mixed with code that manipulates ctx
// Finally generetes data
var generatedImage = canvas.toDataURL();
// And post if back to Facebook
Everything seems to be working fine with my code (tested on all major browsers), but there are a lot of users reporting intermittent bugs when uploading the canvas content back to Facebook. Unfortunately I couldn't yet get a tech savvy user to report something with a proper error description. Now I can't reproduce the problem (or even know what the problem is).
What I know so far is that by writing a server side proxy to serve Facebook images as if they were local the bugs apparently go away, so, it left me wondering, before I start digging into bizarre cross-browser issues, mysterious error messages such as OAuthException: An unknown error has occurred., tainted cavas, etc, I first have to go back to the basics:
Is CORS enabled for every single picture exposed through Graph API? (A link to the official documentation or a reliable source would be nice).
