CODEWITHSUNDEEP
jsonfacebook
diogorighi
diogorighi

Reputation: 381

Facebook Pixel script overriding global JSON

When loading the latest version of fbevents.js for Facebook Pixel the JSON global object is being overrided. I don't know why this is happening, but this broke some applications that was using the JSON implemented by MooTools (they add encode and decode to JSON global object). I did some tests and verified that the problem was introduced on version 2.9.42.

On the version 2.9.41 the problem don't occur.

Testing 2.9.41

enter image description here

The code for the test is below: (change the ID for yours) You can change the fbevents version using the v param

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-nocompat.js"></script>
    <!-- Facebook Pixel Code -->
    <script>
      !(function (f, b, e, v, n, t, s) {
        if (f.fbq) return;
        n = f.fbq = function () {
          n.callMethod
            ? n.callMethod.apply(n, arguments)
            : n.queue.push(arguments);
        };
        if (!f._fbq) f._fbq = n;
        n.push = n;
        n.loaded = !0;
        n.version = "2.0";
        n.queue = [];
        t = b.createElement(e);
        t.async = !0;
        t.src = v;
        s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s);
      })(
        window,
        document,
        "script",
        "https://connect.facebook.net/en_US/fbevents.js?v=2.9.42"
      );
      fbq("init", "YOUR_ID");
      fbq("track", "PageView");
    </script>
    <noscript>
      <img
        height="1"
        width="1"
        src="https://www.facebook.com/tr?id=YOUR_ID&ev=PageView
  &noscript=1"
      />
    </noscript>
    <script>
      console.log("Version 2.9.42: ", JSON);
      console.log("JSON before FB execute: ", JSON);
      setTimeout(function () {
        console.log("JSON after FB execute: ", JSON);
      }, 3000);
    </script>
  </body>
</html>

Upvotes: 1

Views: 567

Answers (1)

diogorighi
diogorighi

Reputation: 381

I was researching on this and found something interesting.

The code inside fbevents.js didn't mess with the global scope, but another script was loaded, and this script is changing the global JSON.

The script is on this URL: https://connect.facebook.net/signals/config/1718502398417441?v=2.9.42&r=stable

You can open this and search for j.JSON=n. If you prettify the file, add spaces. It also adds JSON3 to the global scope. You can test typing window.JSON3.

See image for details:

enter image description here

That's my guess for now.

Edit 2:

You can also load different versions of this javascript file using the v parameter.

If you compare https://connect.facebook.net/signals/config/1718502398417441?v=2.9.41&r=stable and https://connect.facebook.net/signals/config/1718502398417441?v=2.9.42&r=stable

you can verify that the code on the image above was introduced on this version.

Upvotes: 1

Related Questions