Issue 5650 - Apply emulation filters to shadow DOMs

lib/content/elemHideEmulation.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present 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 22 matching lines @@
   for (let i = 0; i < children.length; i++)
     if (children[i] == node)
       return i + 1;
   return 0;
 }
 
 function makeSelector(node, selector)
 {
   if (node == null)
     return null;
-  if (!node.parentElement)
+
+  // If this is the topmost element in a shadow DOM, climb up one more level
+  // and then use a ":host" prefix.
+  if (!node.parentElement && !(node.parentNode instanceof ShadowRoot))
   {
-    let newSelector = ":root";
+    let newSelector = node instanceof ShadowRoot ? ":host" : ":root";
     if (selector)
       newSelector += " > " + selector;
     return newSelector;
   }
   let idx = positionInParent(node);
   if (idx > 0)
   {
     let newSelector = `${node.tagName}:nth-child(${idx})`;
     if (selector)
       newSelector += " > " + selector;
-    return makeSelector(node.parentElement, newSelector);
+    return makeSelector(node.parentElement || node.parentNode, newSelector);
   }
 
   return selector;
 }
 
 function parseSelectorContent(content, startIndex)
 {
   let parens = 1;
   let quote = null;
   let i = startIndex;
@@ skipping 228 matching lines @@
       yield [selector, subtree];
   }
 };
 
 function isSelectorHidingOnlyPattern(pattern)
 {
   return pattern.selectors.some(s => s.preferHideWithSelector) &&
     !pattern.selectors.some(s => s.requiresHiding);
 }
 
-function ElemHideEmulation(addSelectorsFunc, hideElemsFunc)
+function ElemHideEmulation(document, root, addSelectorsFunc, hideElemsFunc)

[Manish Jethani, 2017/09/30 12:29:01]

It's best to pass these in the constructor as we need them early.

 {
   this.document = document;
+  this.root = root || document;
   this.addSelectorsFunc = addSelectorsFunc;
   this.hideElemsFunc = hideElemsFunc;
   this.observer = new MutationObserver(this.observe.bind(this));
+  this.shadowEmulations = new WeakMap();
+
+  if (this.root == this.document)

[Manish Jethani, 2017/09/30 12:29:01]

We have to listen for these events as early as possible, before any of the
site's code has had a chance to run. If not, the author code can simply add a
listener and call Event.stopPropagation on the event object. We're even
listening in capture mode so we get the event first, no matter what.

+  {
+    this.document.addEventListener("load", this.onLoad.bind(this), true);
+    this.document.addEventListener("shadowAttached",
+                                   this.onShadowAttached.bind(this), true);
+  }
 }
 
 ElemHideEmulation.prototype = {
   isSameOrigin(stylesheet)
   {
     try
     {
       return new URL(stylesheet.href).origin == this.document.location.origin;
     }
     catch (e)
@@ skipping 81 matching lines @@
     let selectors = [];
     let selectorFilters = [];
 
     let elements = [];
     let elementFilters = [];
 
     let cssStyles = [];
 
     let stylesheetOnlyChange = !!stylesheets;
     if (!stylesheets)
-      stylesheets = this.document.styleSheets;
+      stylesheets = this.root.styleSheets;
 
     for (let stylesheet of stylesheets)
     {
       // Explicitly ignore third-party stylesheets to ensure consistent behavior
       // between Firefox and Chrome.
       if (!this.isSameOrigin(stylesheet))
         continue;
 
       let rules = stylesheet.cssRules;
       if (!rules)
@@ skipping 29 matching lines @@
 
         pattern = patterns.shift();
 
         if (stylesheetOnlyChange &&
             !pattern.selectors.some(selector => selector.dependsOnStyles))
         {
           pattern = null;
           return processPatterns();
         }
         generator = evaluate(pattern.selectors, 0, "",
-                             this.document, cssStyles);
+                             this.root, cssStyles);
       }
       for (let selector of generator)
       {
         if (selector != null)
         {
           if (isSelectorHidingOnlyPattern(pattern))
           {
             selectors.push(selector);
             selectorFilters.push(pattern.text);
           }
           else
           {
-            for (let element of this.document.querySelectorAll(selector))
+            for (let element of this.root.querySelectorAll(selector))
             {
               elements.push(element);
               elementFilters.push(pattern.text);
             }
           }
         }
         if (performance.now() - cycleStart > MAX_SYNCHRONOUS_PROCESSING_TIME)
         {
           setTimeout(processPatterns, 0);
           return;
@@ skipping 67 matching lines @@
     }
     else
     {
       this._filteringInProgress = true;
       this._addSelectors(stylesheets, completion);
     }
   },
 
   onLoad(event)
   {
+    if (this.patterns.length == 0)
+      return;
+
     let stylesheet = event.target.sheet;
     if (stylesheet)
       this.queueFiltering([stylesheet]);
   },
 
+  onShadowAttached(event)
+  {
+    event.stopImmediatePropagation();

[Manish Jethani, 2017/09/30 12:29:01]

Prevent any author code from detecting even the presence of this event.

[lainverse, 2017/10/02 14:11:55]

What will stop page from sending own events with the same name and custom (and
potentially malicious) event.target?

Why do we even use event with predictable name in the firs place?

[Manish Jethani, 2017/10/02 14:28:11]

That's a good point, but the event would have to be dispatched off a DOM node
for it to be caught by us, and the node would have to have a shadowRoot
property. If it does, we only do something if we haven't already seen the same
shadow root.
We could namespace it, like "org.adblockplus::shadowAttached", so that there is
no unintentional conflict with the author's code, but I don't see why anyone
would deliberately degrade their site's performance when it has no actual effect
(the event would be a no-op if the target doesn't have a shadow root or if we've
already seen the shadow root).

But we could just add a random component to the name, I suppose, just to be
safe.

[lainverse, 2017/10/02 16:05:39]

What about a proper DOM element with Proxy with getter in place of shadowRoot
property? Even if event name would be random I'd recommend to use actual
shadowRoot getter instead of event.target.shadowRoot since any attempt to access
anything within it will trigger code in that getter. As I udnerstand event's
code might be postponed a bit and site may redefine shadowRoot with proxy or
just null.

[Manish Jethani, 2017/10/02 16:12:31]

A content script has its own copy of these APIs, a site cannot override these.
When we access event.target.shadowRoot, for example, our own wrapper for
Element.shadowRoot in the page does not get called, because that is a different
context.

+
+    if (this.patterns.length == 0)
+      return;
+
+    // The shadow root won't be available if it's a closed shadow root. Even
+    // though we override Element.attachShadow to create an open shadow root,
+    // it is possible that some other extension has overridden it before us to
+    // create a closed shadow root.
+    let shadowRoot = event.target.shadowRoot;
+    if (!shadowRoot)
+      return;
+
+    this.addShadowRoot(shadowRoot);
+  },
+
+  addShadowRoot(shadowRoot)
+  {
+    if (!this.shadowEmulations.has(shadowRoot))
+    {
+      let emulation = new ElemHideEmulation(this.document,
+                                            shadowRoot,
+                                            this.addSelectorsFunc,
+                                            this.hideElemsFunc);
+      this.shadowEmulations.set(shadowRoot, emulation);
+      emulation.apply(this.patterns, true);
+    }
+  },
+
+  findShadowRoots(node)
+  {
+    let shadowRoot = node.shadowRoot;
+    if (shadowRoot)
+      this.addShadowRoot(shadowRoot);
+
+    for (let child of node.children)
+      this.findShadowRoots(child);
+  },
+
   observe(mutations)
   {
+    for (let mutation of mutations)
+    {
+      // Find any preattached shadows.
+      for (let node of mutation.addedNodes)
+        this.findShadowRoots(node);
+    }
+
     this.queueFiltering();
   },
 
-  apply(patterns)
+  apply(patterns, parsed)
   {
-    this.patterns = [];
-    for (let pattern of patterns)
+    if (parsed)
     {
-      let selectors = this.parseSelector(pattern.selector);
-      if (selectors != null && selectors.length > 0)
-        this.patterns.push({selectors, text: pattern.text});
+      this.patterns = patterns;
+    }
+    else
+    {
+      this.patterns = [];
+      for (let pattern of patterns)
+      {
+        let selectors = this.parseSelector(pattern.selector);
+        if (selectors != null && selectors.length > 0)
+          this.patterns.push({selectors, text: pattern.text});
+      }
     }
 
     if (this.patterns.length > 0)
     {
       this.queueFiltering();
       this.observer.observe(
-        this.document,
+        this.root,
         {
           childList: true,
           attributes: true,
           characterData: true,
           subtree: true
         }
       );
-      this.document.addEventListener("load", this.onLoad.bind(this), true);
     }
   }
 };
 
 exports.ElemHideEmulation = ElemHideEmulation;