1665035 - Unable to play games on dckids.com with ETP - Standard enabled

Status: VERIFIED FIXED

(Core :: Privacy: Anti-Tracking, defect, P2)

Description

[Oana Arbuzov [:oanaarbuzov]]

Attachment: ETP_StandardvsDisabled.png

Environment:
Browser / Version: Firefox Nightly
Operating System: Windows

Steps to reproduce:

1. Navigate to https://www.dckids.com/fr-fr/
2. Click "Jeux" tab.
3. Select a game from the list.
4. Click "Jeu" button.
5. Observe behavior.

Expected Behavior:
Game starts and can be played.

Actual Behavior:
Game doesn't start. Black screen is displayed.

Notes:

1. Screenshot attached.
2. The issue is not reproducible with ETP disabled.

Comment 1

[Tim Huang[:timhuang]]

The reason for this breakage is twofold, none is related to ETP, though.

The games cannot be played when either

• Strict list is used
• Or dFPI is enabled

The game can still be played if you only enable ETP without the strict list. And blocking or partitioning cloutfront.net is the reason why it breaks the game.

Comment 2

[Johann Hofmann [:johannh]]

If it's Cloudfront is this the same root cause as bug 1659394 maybe?

Comment 3

[Dimi Lee [:dimi]]

(In reply to Johann Hofmann [:johannh] from comment #2)

If it's Cloudfront is this the same root cause as bug 1659394 maybe?

Yes, but I guess we still have to reach out these two sites individually because they are the ones that serve the content and have the ability to use storage access API?

Comment 4

[Steven Englehardt [:englehardt]]

So the breakage seems to depend on the game, but a bunch of games are totally broken in Firefox for reasons other than ETP.

For the batman game in question, ETP is the cause. Specifically the game is loaded from the cloudfront CDN (on the level2 list) and attempts to use localStorage. A snippet from https://d3qlaywcwingl6.cloudfront.net/2020-09-02/game/content/batman-caped-crusader-chase-200805/js/game.js:

        PlayerData.prototype.load = function () {
            var base64String = localStorage.getItem(this.localStorageKey);
            if (base64String != '' && base64String != null) {
                var jsonText = window.atob(base64String);
                this._saveData = new F84.SaveData();
                var saveData = (JSON.parse(jsonText));
                for (var key in saveData)
                    this._saveData[key] = saveData[key];
            }
            else {
                this._saveData = new F84.SaveData();
            }
        };

The breakage can be fixed by giving this specific cloudfront host temporary, partitioned localStorage access via the pref privacy.restrict3rdpartystorage.partitionedHosts (Note this is different than the partitioning provided by dFPI). Appending d3qlaywcwingl6.cloudfront.net/ to that pref will fix the batman game. Note that it won't necessarily give the user a great experience since any save data will be wiped when the in-memory storage is cleared.

That said, other games still don't work. For example, the comic creator game fails with an access denied error because the request to https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/cookies.html returns a 403, presumably because no cookies are attached to the request.

This happens through the following code path in https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/game.js:

 k.validateCookies = function () {
    return null != w.Browser.getLocalStorage() && null != w.Browser.getSessionStorage() && null != navigator.cookieEnabled && navigator.cookieEnabled
  };
  k.init = A.runGame = function (a) {
    if (k.validateBrowser()) if (k.validateCookies()) {
      var e = k.getDocument();
      k.container = e.createElement('div');
      window.tabindex = '0';
      k.container.style.position = 'absolute';
      k.container.className = 'container';
      k.container.style.marginTop = '0px';
      k.container.style.width = k.CANVAS_WIDTH_LANDSCAPE + 'px';
      k.container.style.height = k.CANVAS_HEIGHT_LANDSCAPE + 'px';
      a.appendChild(k.container);
      k.dataBaseUrl = k.getContainer().parentElement.getAttribute('data-base-url');
      k.dataWidth = q.parseFloat(k.getContainer().parentElement.getAttribute('data-width'));
      k.dataHeight = q.parseFloat(k.getContainer().parentElement.getAttribute('data-height'));
      a = k.getQueryStringValue(k.getWindow().location.href, 'locale');
      '' == a && (null != k.getWindow().frameElement && k.getWindow().frameElement.hasAttribute('data-locale')) && (a = q.string(k.getWindow().frameElement.getAttribute('data-locale')), a = a.toLowerCase());
      '' == a && (a = 'en-us');
      k.dataLocale = a;
      k._prevDataWidth = k.dataWidth;
      k._prevDataHeight = k.dataHeight;
      b.managers.SoundManager.init();
      k.gameManager = new b.GameManager('CHANGE_ME_game_id', new c.boot.BootState);
      k.gameManager.init();
      window.requestAnimFrame = function () {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (a) {
          window.setTimeout(k.update, 1000 / (b.GameManager.isMobile() ? k.TARGET_FPS_MOBILE : k.TARGET_FPS))
        }
      }();
      k.update()
    } else window.location.href = 'cookies.html';
     else window.location.href = 'unsupported.html'
  };

Here validateCookies fails because navigator.cookieEnabled returns false for trackers. We could add a webcompat intervention to spoof true for this. However, when ETP is disabled this game is still broken and loops on the following error:

Uncaught TypeError: can't access property "length", c is undefined
    onMouseMoved https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/game.js:322
    d https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/game.js:1
    init https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/game.js:319
    addManager https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/game.js:60
    init https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/game.js:529
    init https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/game.js:53
    runGame https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/game.js:5
    onload https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/gameTracking.js:34
    gameStart https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/js/gameTracking.js:34
    onload https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/DCStoryMaker-Correct/Source/Default/Game/index.html?locale=fr-fr:180

A couple other games have similar non-ETP related failures, so it seems like they just don't test their site in Firefox. There might be more webcompat shims that could help fix these non-ETP issues, but I'll stop here for now.

Comment 5

[Steven Englehardt [:englehardt]]

The final error in Comment 4 is actually caused by bad platform detection. I'm testing on Linux, and their script includes the following mobile detection function:

    b.GameManager.isMobile = function() {
        k.getWindow();
        var a = k.getWindow().navigator.platform;
        return -1 != a.indexOf("iPhone") || -1 != a.indexOf("iPod") || -1 != a.indexOf("iPad") || -1 != a.indexOf("android") || -1 != a.indexOf("Linux") ? !0 : !1
    };

Thus, Linux desktop devices are incorrectly flagged as mobile devices. This can be fixed with yet another intervention.

Testing with an intervention for window.cookieEnabled and window.navigator.platform I am able to play all but four of the games, which have the following errors:

Flight School

Uncaught (in promise) TypeError: Fullscreen request denied game.js:309:3
Uncaught Could not find string: CHARACTER_SELECT_FLIGHT_SUITS game.js:293:384

Shadow Combat

Uncaught TypeError: can't access property "volume", this.vc is undefined
    setVolume https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/BatmanShadowCombat/Source/Default/Game/js/game.js:317
    oQ https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/BatmanShadowCombat/Source/Default/Game/js/game.js:315
    ne https://d3qlaywcwingl6.cloudfront.net/content/DC/Html5Game/BatmanShadowCombat/Source/Default/Game/js/game.js:315

Super hero matchup / hero creator: Have a bunch of 403 errors when loading the french assets. I suspect these are simply missing or have incorrect permissions on the server. The english versions load just fine.

Comment 6

[Steven Englehardt [:englehardt]]

I've written an intervention that fixes the ETP cookieEnabled issue described in Comment 4 and the platform detection issue described in Comment 5. See: https://github.com/englehardt/webcompat-interventions/tree/master/bug_1665035.

Note that when ETP is enabled you'll also need the patch from Bug 1677144 to fully fix the breakage. This breakage is only visible when ETP level 2 cookie blocking is enabled (currently Nightly-only). We plan to enable Level 2 cookie blocking in ETP Strict mode on all release channels in Firefox 85.

Dennis: Are you comfortable including this fix in the Firefox 85 webcompat release? (i.e., Bug 1663980)

Comment 7

[Steven Englehardt [:englehardt]]

Hey Ksenia! Is it possible to have the intervention I drafted up in Comment 6 included in v18 of the webcompat addon?

Comment 8

[Dennis Schubert [:denschub]]

(sorry, I was on PTO - back today)

This appears to be a low-rank site (~1mio according to Alexa), but since this is "an official thing", that's probably still worth including - and reaching out to.

Comment 9

[Ksenia Berezina [:ksenia]]

Yeah, I've included the intervention to v18 and will be shipping it in the next couple days

Comment 10

[Steven Englehardt [:englehardt]]

Verified fixed by intervention in Bug 1663980.

Comment 11

[Hani Yacoub, Desktop QA]

Verified as fixed on Windows 10 x64, macOS 11.4 and on Ubuntu 20.04.