In a Facebook instant game I try to retrieve the player id, photo and signature - and then redirect to my own server which would verify the signature and then display the HTML5 game.
Here is the Javascript part of my index.html, which I upload as Facebook instant game bundle:
<script src="//connect.facebook.net/en_US/fbinstant.7.0.js"></script>
<script>
window.onload = function() {
FBInstant.initializeAsync().then(function() {
FBInstant.startGameAsync().then(onStart);
});
};
function onStart() {
FBInstant.player.getSignedPlayerInfoAsync('my_metadata')
.then(function (result) {
var lang = 'en';
var photo = FBInstant.player.getPhoto();
var sig = result.getSignature();
location.href =
'https://wordsbyfarber.com/' + lang +
'/facebook?sig=' + encodeURIComponent(sig) +
'&photo=' + encodeURIComponent(photo)
;
}).catch(ex => {
console.log(ex);
});
}
</script>
Then in the Settings / Advanced / Share Redirect Domain Allow List I add the domain of my game backend server:
However, this does not help - when the instant game is run, then in the console I see the error:
Refused to frame 'https://wordsbyfarber.com/' because it violates the following Content Security Policy directive: "frame-src *.doubleclick.net *.google.com *.facebook.com www.googleadservices.com *.fbsbx.com fbsbx.com data: www.instagram.com *.fbcdn.net https://paywithmybank.com".
And the iframe content served by my backend server is not displayed in the browser:
I understand, that Facebook is serving a Content Security Policy HTTP header not allowing my game backend server...
Is my setup possible for instant games? Have I overlooked some setting?