Issue 3699 - Patch DOM API in order to prevent disabling the injected stylesheet

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
@@ skipping 313 matching lines @@
   },
 
   disconnect: function()
   {
     this.document.removeEventListener("DOMContentLoaded", this.trace);
     this.observer.disconnect();
     clearTimeout(this.timeout);
   }
 };
 
-function runInPage(document, arg, fn)
-{
+function reinjectStyleSheetWhenRemoved(document, style)
+{
+  var MutationObserver = window.MutationObserver ||
+                         window.WebKitMutationObserver;
+  if (!MutationObserver)
+    return null;
+
+  var parentNode = style.parentNode;
+  var observer = new MutationObserver(function()
+  {
+    if (style.parentNode != parentNode)
+      parentNode.appendChild(style);
+  });
+
+  observer.observe(parentNode, {childList: true});
+  return observer;
+}
+
+function protectStyleSheet(document, style)
+{
+  var id = Math.random().toString(36).substr(2)
+  style.id = id;
+
+  var code = [
+    "(function()",
+    "{",
+    '  var style = document.getElementById("' + id + '") ||',
+    '              document.documentElement.shadowRoot.getElementById("' + id + '");',

[Sebastian Noack, 2016/03/18 17:58:54]

(Yes, I know that this line is 6 characters too long. But I don't see anyway to
make it shorter without impairing readability.)

[kzar, 2016/03/18 19:18:32]

Acknowledged.

+    '  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++)

[kzar, 2016/03/18 19:18:32]

Nit: Just re-use the existing `i` variable instead?

[Sebastian Noack, 2016/03/18 19:23:55]

I'm not sure whether it's a good idea to make the code here depend on a
unrelated variable declared in the headers of the previous loop.

+  {
+    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 + ".apply(this, index);",
+                "  }");
+    }
+  }
+
+  code.push("})();");
+
   var script = document.createElement("script");
   script.async = false;
-  script.textContent = "(" + fn + ")(" + arg + ");";
+  script.textContent = code.join("\n");
   document.documentElement.appendChild(script);
   document.documentElement.removeChild(script);
 }
 
-function protectStylesheet(document, style)
-{
-  var id = Math.random().toString(36).substr(2);
-  style.id = id;
-
-  runInPage(document, '"' + id + '"', function(id)
-  {
-    var style = document.getElementById(id) ||
-                document.documentElement.shadowRoot.getElementById(id);
-    style.removeAttribute("id");
-
-    var removeChild = Node.prototype.removeChild;
-    Node.prototype.removeChild = function(child)
-    {
-      if (child != style)
-        removeChild.call(this, child);
-    };
-
-    var remove = Element.prototype.remove;
-    if (remove)
-      Element.prototype.remove = function()
-      {
-        if (this != style)
-          remove.call(this);
-      };
-
-    var deleteRule = CSSStyleSheet.prototype.deleteRule;
-    CSSStyleSheet.prototype.deleteRule = function(index)
-    {
-      if (this != style.sheet)
-        deleteRule.call(this, index);
-    };
-
-    var removeRule = CSSStyleSheet.prototype.removeRule;
-    if (removeRule)
-      CSSStyleSheet.prototype.removeRule = function(index)
-      {
-        if (this != style.sheet)
-          removeRule.call(this, index);
-      };
-
-    Object.defineProperty(
-      style, 'disabled',
-      {
-        value: false,
-        enumerable: true
-      }
-    );
-
-    Object.defineProperty(
-      style.sheet, 'disabled',
-      {
-        value: false,
-        enumerable: true
-      }
-    );
-  });
-}
-
 function init(document)
 {
   var shadow = null;
   var style = null;
+  var observer = null;
   var tracer = null;
   var propertyFilters = new CSSPropertyFilters(window, addElemHideSelectors);
 
   // Use Shadow DOM if available to don't mess with web pages that rely on
   // the order of their own <style> tags (#309).
   //
   // However, creating a shadow root breaks running CSS transitions. So we
   // have to create the shadow root before transistions might start (#452).
   //
   // Also, using shadow DOM causes issues on some Google websites,
@@ skipping 18 matching lines @@
       style = document.createElement("style");
       (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;
 
-      protectStylesheet(document, style);
+      observer = reinjectStyleSheetWhenRemoved(document, style);
+      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 15 matching lines @@
 
   var updateStylesheet = function()
   {
     var selectors = null;
     var CSSPropertyFiltersLoaded = false;
 
     var checkLoaded = function()
     {
       if (!selectors || !CSSPropertyFiltersLoaded)
         return;
+
+      if (observer)
+        observer.disconnect();
+      observer = null;
 
       if (tracer)
         tracer.disconnect();
       tracer = null;
 
       if (style && style.parentElement)
         style.parentElement.removeChild(style);
       style = null;
 
       addElemHideSelectors(selectors.selectors);
@@ skipping 60 matching lines @@
   }, true);
 
   return updateStylesheet;
 }
 
 if (document instanceof HTMLDocument)
 {
   checkSitekey();
   window.updateStylesheet = init(document);
 }