google chrome - "Tainted canvases may not be loaded" Cross domain issue with WebGL textures -
i've learnt lot in last 48 hours cross domain policies, apparently not enough.
following on this question. html5 game supports facebook login. i'm trying download profile pictures of people's friends. in html5 version of game following error in chrome.
detailmessage: "com.google.gwt.core.client.javascriptexception: (securityerror) ↵ stack: error: failed execute 'teximage2d' on 'webglrenderingcontext': tainted canvases may not loaded.
as understand it, error occurs because i'm trying load image different domain, can worked around access-control-allow-origin header, detailed in this question.
the url i'm trying download is
https://graph.facebook.com/1387819034852828/picture?width=150&height=150
looking @ network tab in chrome can see has required access-control-allow-origin header , responds 302 redirect new url. url varies, guess depending on load balancing, here's example url.
this url has access-control-allow-origin header. don't understand why failing.
being facebook, , fact thousands of apps, games , websites display users profile pictures, i'm assuming possible. i'm aware can bounce through own server, i'm not sure why should have to.
answer
i got cross domain image loading working in libgdx following code (which pretty hacky , i'm sure can improved). i've not managed working assetdownloader yet. i'll work out eventually.
public void downloadpixmap(final string url, final downloadpixmapresponse response) { final rootpanel root = rootpanel.get("embed-html"); final image img = new image(url); img.getelement().setattribute("crossorigin", "anonymous"); img.addloadhandler(new loadhandler() { @override public void onload(loadevent event) { htmllauncher.application.getpreloader().images.put(url, imageelement.as(img.getelement())); response.downloadcomplete(new pixmap(gdx.files.internal(url))); root.remove(img); } }); root.add(img); } interface downloadpixmapresponse { void downloadcomplete(pixmap pixmap); void downloadfailed(throwable e); }
are setting crossorigin attribute on img before requesting it?
var img = new image(); img.crossorigin = "anonymous"; img.src = "https://graph.facebook.com/1387819034852828/picture?width=150&height=150"; it's working me when question asked. unfortunately url above no longer points i've changed in example below
var img = new image(); img.crossorigin = "anonymous"; // comment out see fail img.onload = uploadtex; img.src = "https://i.imgur.com/zkmnxce.png"; function uploadtex() { var gl = document.createelement("canvas").getcontext("webgl"); var tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); try { gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, img); log("done: ", gl.geterror()); } catch (e) { log("failed use image because of security:", e); } } function log() { var div = document.createelement("div"); div.innerhtml = array.prototype.join.call(arguments, " "); document.body.appendchild(div); }<body></body>how check you're receiving headers
open devtools, pick network tab, reload page, select image in question, @ both request headers , response headers.
the request should show browser sent origin: header
the response should show received
access-control-allow-methods: get, options, ... access-control-allow-origin: * note, both response and request must show entries above. if request missing origin: didn't set img.crossorigin , browser not let use image if response said ok.
if request has origin: header , response not have other headers server did not give permission use image display it. in other words work in image tag , can draw canvas can't use in webgl , 2d canvas draw become tainted , todataurl , getimagedata stop working
Comments
Post a Comment