Facebook Instant games won't allow my API images to be loaded

Question

I'm finishing a facebook instant game and I have this api https://seustestes.com/api wich 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 kinda stuck in here.

Answer 1

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.

Answer 2

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.