0

I'm finishing a Facebook instant game and I have this API https://seustestes.com/api which I will feed with all the games data. I'm currently loading the games on localhost and it's working fine:

$.ajax({
    type: 'GET',
    url: api,
    success: function (data) {
        games = data;
        for (var k in games) {
            $('#container').append('<div class="card" style="width: 18rem;"> <img src="' + games[k].cover + '" class="card-img-top img-responsive"> <div class="card-body"> <h5 class="card-title">' + games[k].name + '</h5> <p class="card-text">' + games[k].title + '</p><button id="botao' + k + '" onClick="callTest(\'' + games[k].token + '\', \'Marciel\')" class="btn btn-primary">Jogar</button></div></div>');
        }
    }

});

But when I upload the game to Facebook and load it, it won't load the cover image showing the following error:

Refused to load the image 'http://18.219.0.84/img/simple/81e3c777bba96ec9c03085d9a93c3e70259c9d39d773b9de40c07517f5968149/cover.png' because it violates the following Content Security Policy directive: "img-src 'self' blob: data: *.facebook.com *.fbcdn.net *.google-analytics.com stats.g.doubleclick.net *.akamaihd.net *.giphy.com *.cloudfront.net *.amazonaws.com *.tenor.com *.googleapis.com *.firebaseapp.com *.firebaseio.com *.8686c.com *.cncovs.com *.aliyun.com *.aliyuncs.com *.wsdvs.com *.console.re *.akamaized.net *.kunlunar.com *.layabox.com *.windows.net *.msecnd.net *.anysdk.com usage.trackjs.com platform-lookaside.fbsbx.com *.cocos.com *.playfab.com *.hinet.net *.cloudinary.com *.imgur.com *.myqcloud.com *.tencentcs.com ".

At first I thought those domains were the only ones allowed to load images from, but then I've checked other games and they load images from all sort of domains, so I'm figuring it has something to do with my end.

My API is already allowing CORS. I'm kind of stuck in here.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Marciel Fonseca
  • 371
  • 1
  • 4
  • 19

2 Answers2

0

The Instant Games Content Security Policy does not allow you to load arbitrary images via the img tag. You can instead use the blob protocol if you insist on the img tag, or preferably use the canvas drawing APIs to draw images.

Chris Hawkins
  • 764
  • 4
  • 15
  • There are other games like mine using the img tag getting images from their api, Scrapee is one of them, using img tag provided from scrapee domain which is not listed in the whitelisted ones. Any idea how? – Marciel Fonseca Jan 12 '19 at 01:28
  • If possible, any examples using canvas drawing apis? – Marciel Fonseca Jan 12 '19 at 03:11
0

Try setting crossOrigin = "Anonymous" attribute to your image tag. Also you can use drawImage() of canvas. A sample code that downloads an image and converts it to base64code used by the FBInstant.shareAsync as a payload:

var image = new Image();
    image.crossOrigin = "Anonymous"; // img.cors must be after new Image()
    image.src = "cross origin photo url here"; //src initiates download
    image.addEventListener('load', function() {
        ctx.save();
        ctx.drawImage(image,25,25, 256,256, 135,110, 128,128);
        ctx.restore();
        base64Image = canvas.toDataURL();
    });

More details at MDN docs here. FYI: I created a on-the-fly canvas drawing image that dynamically gets player's profile photo, name and gamescore to share as a base64 image in the messenger thread during an instant game play. I was experiencing the same CORS problem but solved it and it's working on the live mode now.

sparsh
  • 1,438
  • 1
  • 15
  • 34
  • before I try your answer: I've changed my api to return the base64 string for the image but I think it's causing the api to slow down as it is too large, is it a real problem? It's working now but the response with only 2 images is taking 2 seconds to load, I'm guessing it will grow exponentially as more data is being returned, so my question is: returning the base64 from the api is an efficient solution? If so, then I'll stick with it as its working, if not I'll try your solution but not sure if facebook will accept the raw img url even with the anonymous crossorigin set on the tag – Marciel Fonseca Jan 15 '19 at 16:53