3

Game is onboarded, I receive the state of the user and all is just ready to go. I am trying to build a quiz game. I am fetching all the information from a remote server which includes image assets on a question basis. I can fetch the remote data but I cannot display the image. It seems that facebook is blocking them.

I tried to add a CSP header to the image server with a Content-Security-Policy: img-src *.fbsbx.com. Also tried * before that. It all does not seem to work. The only thing which works is to upload the image asset to facebook's hosting.

There is no information from Facebook's side. Anybody here got some information?

fightbulc
  • 140
  • 8
  • Browser console say anything regarding those images you are trying to load? – misorude Oct 01 '18 at 13:58
  • @misorude the issue only comes up when the I am testing the app on the phone. So no way to see what's going on unless you have a suggestion? – fightbulc Oct 01 '18 at 14:22
  • Does this mean Facebook’s terrible in-app browser? Debugging when something goes wrong inside that one, is really a pain in the …; if it was in a normal browser, you might perhaps be able to do remote debugging by connection a phone to your desktop computer. At least I’d check what your server’s log files have to say, access & error - do the requests for those images even reach your server, and if so, do they get answered successfully? Could get you a bit closer to figuring out what is going on maybe. – misorude Oct 01 '18 at 14:33

1 Answers1

3

Based on this post (Instant Games Content Security Policy) it seems that Facebook Instant Games is blocking certain media. They do allow though working with blobs. So I am fetching the image as a blob and convert it to to a data object which can be set on an image.

            fetch(imageUrl)
                .then(function (response) {
                    return response.blob();
                })
                .then(function (myBlob) {
                    let myImage = document.getElementById('my-image');
                    myImage.src = URL.createObjectURL(myBlob);
                });
fightbulc
  • 140
  • 8