Facebook Instant Games loading remote images during the game doesn't work

Question

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?

Answer 1

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);
                });