Issue 1727 - Prevent circumvention via WebSocket

include.preload.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2016 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 var SELECTOR_GROUP_SIZE = 200;
+var id = Math.random().toString(36).substr(2);
 
 var typeMap = {
   "img": "IMAGE",
   "input": "IMAGE",
   "picture": "IMAGE",
   "audio": "MEDIA",
   "video": "MEDIA",
   "frame": "SUBDOCUMENT",
   "iframe": "SUBDOCUMENT",
   "object": "OBJECT",
@@ skipping 312 matching lines @@
   var observer = new MutationObserver(function()
   {
     if (style.parentNode != parentNode)
       parentNode.appendChild(style);
   });
 
   observer.observe(parentNode, {childList: true});
   return observer;
 }
 
-function protectStyleSheet(document, style, script)
-{
-  var id = Math.random().toString(36).substr(2);
+function runInPage(fn, arg)
+{
+  var script = document.createElement("script");
+  script.type = "application/javascript";
+  script.async = false;
+  script.textContent = "(" + fn + ")(" + JSON.stringify(arg) + ");";
+  document.documentElement.appendChild(script);
+  document.documentElement.removeChild(script);
+}
+
+function protectStyleSheet(document, style)
+{
   style.id = id;
 
-  var code = [
-    "(function()",
-    "{",
-    '  var style = document.getElementById("' + id + '") ||',
-    '              document.documentElement.shadowRoot.getElementById("' + id + '");',
-    '  style.removeAttribute("id");'
-  ];
-
-  var disableables = ["style", "style.sheet"];
-  for (var i = 0; i < disableables.length; i++)
-  {
-    code.push("  Object.defineProperty(" + disableables[i] + ', "disabled", '
-                                         + "{value: false, enumerable: true});");
-  }
-
-  var methods = ["deleteRule", "removeRule"];
-  for (var j = 0; j < methods.length; j++)
-  {
-    var method = methods[j];
-    if (method in CSSStyleSheet.prototype)
-    {
-      var origin = "CSSStyleSheet.prototype." + method;
-      code.push("  var " + method + " = " + origin + ";",
-                "  " + origin + " = function(index)",
-                "  {",
-                "    if (this != style.sheet)",
-                "      " + method + ".call(this, index);",
-                "  }");
-    }
-  }
-
-  code.push("})();");
-
-  script.textContent += code.join("\n");
+  runInPage(function(id)
+  {
+    var style = document.getElementById(id) ||
+                document.documentElement.shadowRoot.getElementById(id);
+    style.removeAttribute("id");
+
+    var disableables = [style, style.sheet];
+    for (var i = 0; i < disableables.length; i++)
+      Object.defineProperty(disableables[i], "disabled",
+                            {value: false, enumerable: true});
+
+    ["deleteRule", "removeRule"].forEach(function(method)
+    {
+      var original = CSSStyleSheet.prototype[method];
+      CSSStyleSheet.prototype[method] = function(index)
+      {
+        if (this != style.sheet)
+          original.call(this, index);
+      };
+    });
+  }, id);
 }
 
 // Neither Chrome[1] nor Safari allow us to intercept WebSockets, and therefore
 // some ad networks are misusing them as a way to serve adverts and circumvent
-// us. As a workaround we wrap WebSocket, closing connections that would have
-// otherwise been blocked.
+// us. As a workaround we wrap WebSocket, preventing blocked WebSocket
+// connections from being opened.
 // [1] - https://bugs.chromium.org/p/chromium/issues/detail?id=129353
-function wrapWebSocket(script)
+function wrapWebSocket()
 {
   if (typeof WebSocket == "undefined")
     return;
 
-  var eventName = "abpws-" + Math.random().toString().substr(2);

[Sebastian Noack, 2016/07/01 17:03:39]

Instead of duplicating this logic, perhaps just assign the random string to a
global variable? It doesn't matter if it's the same.

[kzar, 2016/07/06 16:39:19]

Done.

+  var eventName = "abpws-" + id;
 
   document.addEventListener(eventName, function(event)
   {
     ext.backgroundPage.sendMessage({
       type: "websocket-request",
       url: event.detail.url
     }, function (block)
     {
       document.dispatchEvent(
         new CustomEvent(eventName + "-" + event.detail.url, {detail: block})
       );
     });
   });
 
-  function wrapper(eventName)
-  {
-    var originalWebSocket = WebSocket;
-    var readyStates = {
-      CLOSED: {value: 3, enumerable: true},
-      CLOSING: {value: 2, enumerable: true},
-      OPEN: {value: 1, enumerable: true},
-      CONNECTING: {value: 0, enumerable: true}
-    };
-
-    WebSocket = function(url, protocol)
-    {
-      var blocked = false;
-      var websocket;

[Sebastian Noack, 2016/07/01 17:03:39]

Since you access this variable before it might get set, please initialize with
null.

[kzar, 2016/07/06 16:39:19]

Done.

-      var websocketProperties = {

[Sebastian Noack, 2016/07/01 17:03:39]

It seems you don't need to hard-code that properties but can get the list by
Object.getOwnPropertyNames(WebSocket.prototype), though obviously not the
default values without actually creating a WebSocket.

[kzar, 2016/07/06 16:39:19]

Done.

-        attributes: {
-          url: url,
-          protocol: protocol,
-          readyState: readyStates.CONNECTING,
-          bufferedAmount: 0,
-          extensions: "",
-          binaryType: "blob",
-          onopen: null,
-          onerror: null,
-          onclose: null,
-          onmessage: null
-        },
-        methods: ["close", "send", "addEventListener", "removeEventListener"]
-      };
-      var properties = Object.create(null);
-      var queue = [];
-
-      for (var key in websocketProperties.attributes)
-      {
-        properties[key] = function(key, defaultValue)
-        {
-          return {
-            enumerable: true,

[Sebastian Noack, 2016/07/01 17:03:40]

Instead hard-coding metadata like "enumerable" you could get them from the
original descriptor to ensure consistent behavior:

  Object.getOwnPropertyDescriptor(WebSocket.prototype, key)

[kzar, 2016/07/06 16:39:19]

Done.

-            get: function()
-            {
-              if (blocked && key == "readyState")
-                return readyStates.CLOSED;
-              return websocket ? websocket[key] : defaultValue;
-            },
-            set: function(value)
-            {
-              if (websocket)
-                return websocket[key] = value;

[Sebastian Noack, 2016/07/01 17:03:40]

Why do you return in a setter?

[kzar, 2016/07/06 16:39:20]

Because the return value for an assignment is usually the value assigned.

[Sebastian Noack, 2016/08/08 16:42:53]

An assignment operation returns it's right-hand value regardless of what the
setter returns.

[kzar, 2016/08/08 18:19:05]

Ah, I didn't know that!

-              else
-              {
-                queue.push(["set", key, value]);
-                return value;
-              }
-            }
-          };
-        }(key, websocketProperties.attributes[key]);
-      }
-      for (var i = 0; i < websocketProperties.methods.length; i += 1)
-      {
-        var method = websocketProperties.methods[i];
-        properties[method] = (function(method)
-        {
-          return {
-            enumerable: true,
-            value: function()
-            {
-              if (websocket)
-                websocket[method].apply(websocket, arguments);
-              else
-                queue.push(["call", method, arguments]);
-            }
-          };
-        }(method));
-      }
-      Object.defineProperties(this, properties);

[Sebastian Noack, 2016/07/01 17:03:40]

Note that those properties (in Chrome at least) are not on the WebSocket object
but on it's prototype. So please consider doing the same, to avoid side effects.
At the very least websites could easily detect that hack otherwise.

[kzar, 2016/07/06 16:39:20]

Done.

-
-      function processQueue()
-      {
-        for (var i = 0; i < queue.length; i += 1)
-        {
-          var action = queue[i][0];
-          var key = queue[i][1];
-          var value = queue[i][2];
-          switch (action)
-          {
-            case "set":
-              websocket[key] = value;
-              break;
-            case "call":
-              websocket[key].apply(websocket, value);
-              break;
-          }
-        }
-        queue = undefined;
-      }
-
+  runInPage(function(eventName)
+  {
+    // As far as possible we must track everything we use that could be
+    // sabotaged by the website later in order to circumvent us.
+    var RealWebSocket = WebSocket;
+    var closeWebSocket = Function.prototype.call.bind(RealWebSocket.prototype.close);
+    var addEventListener = document.addEventListener.bind(document);
+    var removeEventListener = document.removeEventListener.bind(document);
+    var dispatchEvent = document.dispatchEvent.bind(document);
+    var CustomEvent = window.CustomEvent;
+
+    function checkRequest(url, callback)
+    {
       var incomingEventName = eventName + "-" + url;
       function listener(event)
       {
-        blocked = event.detail;
+        callback(event.detail);
+        removeEventListener(incomingEventName, listener);
+      }
+      addEventListener(incomingEventName, listener);
+
+      dispatchEvent(new CustomEvent(eventName, {
+        detail: {url: url}
+      }));
+    }
+
+    WebSocket = function WrappedWebSocket(url, protocols)
+    {
+      // Throw correct exceptions if the constructor is used improperly.
+      if (!(this instanceof WrappedWebSocket)) return RealWebSocket();
+      if (arguments.length < 1) return new RealWebSocket();
+
+      var websocket = new RealWebSocket(url, protocols);
+
+      checkRequest(websocket.url, function(blocked)
+      {
         if (blocked)
-          queue = undefined;
-        else
-        {
-          websocket = new originalWebSocket(url, protocol);
-          processQueue();
-        }
-
-        document.removeEventListener(incomingEventName, listener);
-      }
-      document.addEventListener(incomingEventName, listener);
-
-      document.dispatchEvent(new CustomEvent(eventName, {
-        detail: {url: url, protocol: protocol}
-      }));
-    };
-    WebSocket.prototype = Object.create(window.EventTarget.prototype, readyStates);

[Sebastian Noack, 2016/07/01 17:03:40]

Can't you simply reuse the original parent prototype?

  WebSocket.prototype = Object.getPrototypeOf(originalWebSocket.prototype)

[kzar, 2016/07/06 16:39:20]

Done. (Good point as it is different in Safari.)

-    Object.defineProperties(WebSocket, readyStates);
-  }
-
-  script.textContent += "(" + wrapper.toString() + ")(\"" + eventName + "\");";

[Sebastian Noack, 2016/07/01 17:03:40]

This is inconsistent with how we generate the code to prevent messing with the
stylesheet where we use plain string concatenation, while we convert a function
to a string here. I don't mind either way, but would you mind to keep it
consistent?

[kzar, 2016/07/06 16:39:19]

Done, however wasn't sure how to test the code above still works.

+          closeWebSocket(websocket);
+      });
+
+      return websocket;
+    }.bind();
+
+    Object.defineProperties(WebSocket, {
+      CONNECTING: {value: RealWebSocket.CONNECTING, enumerable: true},
+      OPEN: {value: RealWebSocket.OPEN, enumerable: true},
+      CLOSING: {value: RealWebSocket.CLOSING, enumerable: true},
+      CLOSED: {value: RealWebSocket.CLOSED, enumerable: true},
+      prototype: {value: RealWebSocket.prototype}
+    });
+
+    RealWebSocket.prototype.constructor = WebSocket;
+  }, eventName);
 }
 
 function init(document)
 {
   var shadow = null;
   var style = null;
   var observer = null;
   var tracer = null;
 
-  // Scripts to be injected into the page, executed at the end of initialization
-  var script = document.createElement("script");
-  script.async = false;
-
-  wrapWebSocket(script);
+  wrapWebSocket();
 
   function getPropertyFilters(callback)
   {
     ext.backgroundPage.sendMessage({
       type: "filters.get",
       what: "cssproperties"
     }, callback);
   }
   var propertyFilters = new CSSPropertyFilters(window, getPropertyFilters,
                                                addElemHideSelectors);
@@ skipping 28 matching lines @@
       (shadow || document.head || document.documentElement).appendChild(style);
 
       // It can happen that the frame already navigated to a different
       // document while we were waiting for the background page to respond.
       // In that case the sheet property will stay null, after addind the
       // <style> element to the shadow DOM.
       if (!style.sheet)
         return;
 
       observer = reinjectStyleSheetWhenRemoved(document, style);
-      if (script)

[Sebastian Noack, 2016/07/01 17:03:39]

Sorry, I didn't notice that this a different code path. So I guess it actually
makes more sense to inject the scripts separately. Besides, the worse code
locality this change prevents the stylesheet to be protected if it's updated
later.

[kzar, 2016/07/06 16:39:19]

Done.

-        protectStyleSheet(document, style, script);
+      protectStyleSheet(document, style);
     }
 
     // If using shadow DOM, we have to add the ::content pseudo-element
     // before each selector, in order to match elements within the
     // insertion point.
     if (shadow)
     {
       var preparedSelectors = [];
       for (var i = 0; i < selectors.length; i++)
       {
@@ skipping 94 matching lines @@
           if (!contentWindow.collapsing)
             Array.prototype.forEach.call(
               contentDocument.querySelectorAll(Object.keys(typeMap).join(",")),
               checkCollapse
             );
         }
       }
     }
   }, true);
 
-  document.documentElement.appendChild(script);
-  document.documentElement.removeChild(script);
-  script = undefined;
-
   return updateStylesheet;
 }
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   window.updateStylesheet = init(document);
 }