Facebook Instant Games Content Security Policy (SOLVED)


#1

Hi, I created the first game on Defold for the facebook instant gamers. Upload it on facebook, after downloading resources - the game does not start.

In chrome an error
Failed to load resource: net :: ERR_BLOCKED_BY_CLIENT
index.html? psev = 1 & source = fbinstant-843549845850124 & IsMobileWeb = 0: 1 Refreshed to the frame ‘https://staticxx.facebook.com/’ because it violates the following Security Policy directive: "frame-src ‘self’ blob: zynga .com *. zynga.com ".

in Firefox, the error is about the same
Content Security Policy: Page settings blocked the download of the resource https://staticxx.facebook.com/connect/xd_arbiter/r/RQ7NiRXMcYA.js?version=42#channel=f39a0c84a6a21e2&origin=https%3A%2F%2Fapps-843549845850124.apps.fbsbx .com (“frame-src”).

What does it have to do with the project settings on facebook or with something else?


#2

Are you using the index.html from extension-fbinstant?


#3

No, i am use original index.html and add single line

<script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script>

as described in the manual


#4

That line should already be in the index.html file. Can you please share the entire file here please?


#5

Sorry, i found original error

uncaught exception: Assertion failed: 0, at: ../src/opengl/graphics_opengl.cpp,815,NewVertexBuffer at 
jsStackTrace@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:1:21724
 stackTrace@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:1:21907 ___assert_fail@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:1:1618406 _C@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:11:1 oW@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:6:1 DX@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:6:1 pj@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:7:1 yj@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:7:1 uj@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:7:1 kj@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:7:1 Gh@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:7:1 callMain@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/Tap%20To%20Fly.js:24:15348 _preloadAndCallMain@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/dmloader.js:595:17 onArchiveLoaded@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/dmloader.js:483:13 onPieceLoaded@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/dmloader.js:175:21 requestPiece/xhr.onload@https://apps-843549845850124.apps.fbsbx.com/instant-bundle/1660600584023903/2225302064148369/dmloader.js:126:13

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<title>Tap To Fly 0.0</title>
		<style>
			.canvas-app-container {
			  background: rgb(255,255,255) no-repeat center url("try_game.png");
			  /* A positioned parent for loading visuals */
			  position: relative;
			}

			.canvas-app-container:-webkit-full-screen {
			  /* Auto width and height in Safari/Chrome fullscreen. */
			  width: auto;
			  height: auto;
			}

			.canvas-app-canvas {
				max-height: 100vh;
				max-width: 100%;
			}

			.canvas-app-progress {
			  position: absolute;
			  background-color: rgb(245, 245, 245);
			  height: 20px;
			  /* Progress same width as canvas. */
			  width: 1536px;
			  bottom: 0px;
			}

			.canvas-app-progress-bar {
			  font-size: 12px;
			  height: 20px;
			  color: rgb(255, 255, 255);
			  background-color: rgb(30, 100, 234);
			  text-align: center;
			  line-height: 20px;
			}

			.button {
			  color: #fff;
			  background-color: #1e64ea;
			  border-color: transparent;
			  padding: 10px 20px;
			}
		</style>

		
	</head>

	<body>
    <script src="https://connect.facebook.net/en_US/fbinstant.6.1.js"></script>

    <div id="fb-root"></div>

	<div id="app-container" class="canvas-app-container">
	    <canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="1536" height="2048"></canvas>
	</div>

	<button id="fullscreen" class="button">Fullscreen</button>

	<!-- -->
	  
	  <script type='text/javascript' src="dmloader.js"></script>
	  <script type='text/javascript' src="Tap To Fly.js" async onload=""></script>
	<!-- -->

	<script type='text/javascript'>
        Progress.updateProgress = function (percentage, text) {
            FBInstant.setLoadingProgress(percentage);
        }

        // Do early initialization of FBInstant
        // This is required to be able to properly update the loading
        // progress above.
        FBInstant.initializeAsync().then(function() {
            // This will be checked by the FBInstant Defold extension
            Module._fbinstant_inited = true;
        });

		var extra_params = {
			archive_location_filter: function( path ) {
				return ("archive" + path + "");
			},
            
			splash_image: "splash_image.png",
			custom_heap_size: 268435456
		}

        Module.runApp("canvas", extra_params);

	    /* Fullscreen button */
	    document.getElementById("fullscreen").onclick = function (e) {
	      Module.toggleFullscreen();
	    };
	</script>
</body>
</html>


#6

Hi @oleggelezcovs!
This looks like an error we fixed in the last release (1.2.127)
What version are you using?


#7

I use 1.2.126


#8

Then, I think you should try 1.2.127 to see if that issue didn’t go away.


#9

I would recommend that you use the index.html that is part of the extension. This one: https://github.com/defold/extension-fbinstant/blob/master/fbinstant/index.html

It’s here:

indexhtml

Copy it to your project and point to it from game.project


#10

I update Defold to *.127 and use new index.html from fbinstant
Error the same


#11

But it fixed the WebGL error, right?


#12

Yes webgl error disappear


#13

Ok, hmm, that must have something to do with how you’ve set up FB Instant Games in the FB Dev Admin panel. Are you using the Web Hosting provided for instant games or are you hosting the content yourself?


#14

Yes, we use facebook web hosting






#15

The screenshots above doesn’t show the Webhosting section of Instant Games. Perhaps you can invite me (fbid 100000908084763) as a tester of your app?


#16

We send you invite, login to facebook and accept it


#17

Thanks got the invite and I can reproduce the error. Are you making any calls to any external services? The mention in the Chrome dev console about zynga.com puzzles me. Any idea where it’s coming from? I’d also post a question to the Facebook Instant Games Developer group.


#18

No, we do not use any services, it’s just a game - check how it works. Links to zynga domains may be a Facebook bug


#19

I see. Well, I’d reach out to the Facebook Instant Games Developer group for help with this issue. I’ve tested the unreleased Instant Games that I’ve created and also the Classic Solitaire game by @AGulev and they are all working.


#20

For instant games need set Facebook App Id in the section of game.project??
Capture