Facebook Instant Games Content Security Policy (SOLVED)

oleggelezcovs · May 16, 2018, 10:41am

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?

britzl · May 14, 2018, 5:47am

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

oleggelezcovs · May 14, 2018, 6:01am

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

britzl · May 14, 2018, 6:30am

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

oleggelezcovs · May 14, 2018, 7:56am

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>

Mathias_Westerdahl · May 14, 2018, 7:59am

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

oleggelezcovs · May 14, 2018, 8:00am

I use 1.2.126

Mathias_Westerdahl · May 14, 2018, 8:24am

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

britzl · May 14, 2018, 9:27am

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

oleggelezcovs · May 14, 2018, 12:39pm

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

Mathias_Westerdahl · May 14, 2018, 2:22pm

But it fixed the WebGL error, right?

oleggelezcovs · May 14, 2018, 2:23pm

Yes webgl error disappear

britzl · May 14, 2018, 2:38pm

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?

oleggelezcovs · May 14, 2018, 3:02pm

Yes, we use facebook web hosting

britzl · May 14, 2018, 5:21pm

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?

oleggelezcovs · May 14, 2018, 7:45pm

We send you invite, login to facebook and accept it

britzl · May 14, 2018, 8:58pm

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.

oleggelezcovs · May 15, 2018, 4:17am

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

britzl · May 15, 2018, 4:21am

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.

oleggelezcovs · May 16, 2018, 9:03am

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