[PS-1918] Make autofill doc-scanner traverse into ShadowRoot (#4119)

* This commit implements the following main changes:

- Query elements by using a TreeWalker instead of `document.querySelector[All]`. The reason for this is that `querySelector[All]` doesn't traverse into elements with ShadowRoot.
- Recursively traverse into elements with `openOrClosedShadowRoot` or `Element.shadowRoot` (depending on browser support) inside TreeWalker loop.
- Use new query logic everywhere inside `autofill.js`. This also means we need to use filter functions to find elements with specific nodeNames and/or attributes instead of CSS selector strings.
- Add two new `instanceof Element` checks to prevent `Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'." errors`.

This change is fully backward compatible. If `openOrClosedShadowRoot` is not available it will always return undefined and we will never traverse into ShadowRoots just as the behavior was before this change.

* refactor: outsource recursive logic to accumulatingQueryDocAll

We don't want the `els` argument on the `queryDocAll` function because it's never used from outside the function itself. Thus the recursive logic is moved to `accumulatingQueryDocAll`.
Now `queryDocAll` creates an empty array and passes it to `accumulatingQueryDocAll` which recursively walks the document and all ShadowRoots and pushes all found nodes directly to the referenced array.

The decision to use a directly mutated array instead of `Array.concat(els)` or `Array.push(...els)` is for performance reasons. Pushing to the referenced array was 74% faster than using `Array.push` with spread operator and even 90% faster than using `Array.concat`.

Co-authored-by: Chad Miller <64046472+chadm-sq@users.noreply.github.com>

* refactor: extract input field relevance check into own function

Addresses CodeScene analysis violation "Bumpy Road Ahead" where conditional logic is checked for a nesting of 2 or deeper.

* refactor: use proper element attribute handling

- use el.type attribute instead of el.attribute.type on input elements. This makes sure we also get 'text' when type attribute is not explicitly specified
- use el.htmlFor attribute instead of el.attribute.for on label elements
- use `hasAttribute` and `getAttribute` methods instead of `attributes[]` which is discouraged by https://quirksmode.org/dom/core/#attributes
- improve readability of `isRelevantInputField`

---------

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Co-authored-by: Chad Miller <64046472+chadm-sq@users.noreply.github.com>
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

apps/browser/src/autofill/content/autofill.js

@@ -44,8 +44,102 @@
   11. Work on array of saved urls instead of just one to determine if we should autofill non-https sites
   12. Remove setting of attribute com.browser.browser.userEdited on user-inputs
   13. Handle null value URLs in urlNotSecure
+  14. Implement new HTML element query logic to be able to traverse into ShadowRoot
   */
 
+  /*
+   * `openOrClosedShadowRoot` is only available to WebExtensions.
+   * We need to use the correct implementation based on browser.
+   */
+  // START MODIFICATION
+  var getShadowRoot;
+
+  if (chrome.dom && chrome.dom.openOrClosedShadowRoot) {
+      // Chromium 88+
+      // https://developer.chrome.com/docs/extensions/reference/dom/
+      getShadowRoot = function (element) {
+          if (!(element instanceof HTMLElement)) {
+              return null;
+          }
+
+          return chrome.dom.openOrClosedShadowRoot(element);
+      };
+  } else {
+      getShadowRoot = function (element) {
+          // `openOrClosedShadowRoot` is currently available for Firefox 63+
+          // https://developer.mozilla.org/en-US/docs/Web/API/Element/openOrClosedShadowRoot
+          // Fallback to usual shadowRoot if it doesn't exist, which will only find open ShadowRoots, not closed ones.
+          // https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot#browser_compatibility
+          return element.openOrClosedShadowRoot || element.shadowRoot;
+      };
+  }
+
+  /*
+   * Returns elements like Document.querySelectorAll does, but traverses the document and shadow
+   * roots, yielding a visited node only if it passes the predicate in filterCallback.
+   */
+  function queryDocAll(doc, rootEl, filterCallback) {
+      var accumulatedNodes = [];
+
+      // mutates accumulatedNodes
+      accumulatingQueryDocAll(doc, rootEl, filterCallback, accumulatedNodes);
+
+      return accumulatedNodes;
+  }
+
+  function accumulatingQueryDocAll(doc, rootEl, filterCallback, accumulatedNodes) {
+      var treeWalker = doc.createTreeWalker(rootEl, NodeFilter.SHOW_ELEMENT);
+      var node;
+
+      while (node = treeWalker.nextNode()) {
+        if (filterCallback(node)) {
+            accumulatedNodes.push(node);
+        }
+
+        // If node contains a ShadowRoot we want to step into it and also traverse all child nodes inside.
+        var nodeShadowRoot = getShadowRoot(node);
+
+        if (!nodeShadowRoot) {
+          continue;
+        }
+
+        // recursively traverse into ShadowRoot
+        accumulatingQueryDocAll(doc, nodeShadowRoot, filterCallback, accumulatedNodes);
+    }
+  }
+
+  /*
+   * Returns an element like Document.querySelector does, but traverses the document and shadow
+   * roots, yielding a visited node only if it passes the predicate in filterCallback.
+   */
+  function queryDoc(doc, rootEl, filterCallback) {
+      var treeWalker = doc.createTreeWalker(rootEl, NodeFilter.SHOW_ELEMENT);
+      var node;
+
+      while (node = treeWalker.nextNode()) {
+          if (filterCallback(node)) {
+              return node;
+          }
+
+          // If node contains a ShadowRoot we want to step into it and also traverse all child nodes inside.
+          var nodeShadowRoot = getShadowRoot(node);
+
+          if (!nodeShadowRoot) {
+            continue;
+          }
+
+          // recursively traverse into ShadowRoot
+          var subQueryResult = queryDoc(doc, nodeShadowRoot, filterCallback);
+
+          if (subQueryResult) {
+              return subQueryResult;
+          }
+      }
+
+      return null;
+  }
+  // END MODIFICATION
+
   function collect(document, undefined) {
       // START MODIFICATION
       var isFirefox = navigator.userAgent.indexOf('Firefox') !== -1 || navigator.userAgent.indexOf('Gecko/') !== -1;
@@ -198,12 +292,22 @@
                   theLabels = Array.prototype.slice.call(el.labels);
               } else {
                   if (el.id) {
-                      theLabels = theLabels.concat(Array.prototype.slice.call(
-                          queryDoc(theDoc, 'label[for=' + JSON.stringify(el.id) + ']')));
+                      // START MODIFICATION
+                      var elId = JSON.stringify(el.id);
+                      var labelsByReferencedId = queryDocAll(theDoc, theDoc.body, function (node) {
+                          return node.nodeName === 'LABEL' && node.htmlFor === elId;
+                      });
+                      theLabels = theLabels.concat(labelsByReferencedId);
+                      // END MODIFICATION
                   }
 
                   if (el.name) {
-                      docLabel = queryDoc(theDoc, 'label[for=' + JSON.stringify(el.name) + ']');
+                      // START MODIFICATION
+                      var elName = JSON.stringify(el.name);
+                      docLabel = queryDocAll(theDoc, theDoc.body, function (node) {
+                          return node.nodeName === 'LABEL' && node.htmlFor === elName;
+                      });
+                      // END MODIFICATION
 
                       for (var labelIndex = 0; labelIndex < docLabel.length; labelIndex++) {
                           if (-1 === theLabels.indexOf(docLabel[labelIndex])) {
@@ -260,28 +364,21 @@
           function toLowerString(s) {
               return 'string' === typeof s ? s.toLowerCase() : ('' + s).toLowerCase();
           }
-
-          /**
-           * Query the document `doc` for elements matching the selector `selector`
-           * @param {Document} doc 
-           * @param {string} query 
-           * @returns {HTMLElement[]} An array of elements matching the selector
-           */
-          function queryDoc(doc, query) {
-              var els = [];
-              try {
-                  els = doc.querySelectorAll(query);
-              } catch (e) { }
-              return els;
-          }
-
+          // START MODIFICATION
+          // renamed queryDoc to queryDocAll and moved to top
+          // END MODIFICATION
           // end helpers
 
           var theView = theDoc.defaultView ? theDoc.defaultView : window,
               passwordRegEx = RegExp('((\\\\b|_|-)pin(\\\\b|_|-)|password|passwort|kennwort|(\\\\b|_|-)passe(\\\\b|_|-)|contraseña|senha|密码|adgangskode|hasło|wachtwoord)', 'i');
 
           // get all the docs
-          var theForms = Array.prototype.slice.call(queryDoc(theDoc, 'form')).map(function (formEl, elIndex) {
+          // START MODIFICATION
+          var formNodes = queryDocAll(theDoc, theDoc.body, function (el) {
+              return el.nodeName === 'FORM';
+          });
+          var theForms = formNodes.map(function (formEl, elIndex) {
+          // END MODIFICATION
               var op = {},
                   formOpId = '__form__' + elIndex;
 
@@ -440,7 +537,11 @@
           };
 
           // get proper page title. maybe they are using the special meta tag?
-          var theTitle = document.querySelector('[data-onepassword-title]')
+          // START MODIFICATION
+          var theTitle = queryDoc(theDoc, theDoc, function (node) {
+              return node.hasAttribute('data-onepassword-title');
+          });
+          // END MODIFICATION
           if (theTitle && theTitle.dataset[DISPLAY_TITLE_ATTRIBUE]) {
               pageDetails.displayTitle = theTitle.dataset.onepasswordTitle;
           }
@@ -556,7 +657,10 @@
           // walk the dom tree until we reach the top
           for (var elStyle; theEl && theEl !== document;) {
               // Calculate the style of the element
-              elStyle = el.getComputedStyle ? el.getComputedStyle(theEl, null) : theEl.style;
+              // START MODIFICATION
+              elStyle = el.getComputedStyle && theEl instanceof Element ? el.getComputedStyle(theEl, null) : theEl.style;
+              // END MODIFICATION
+
               // If there's no computed style at all, we're done, as we know that it's not hidden
               if (!elStyle) {
                   return true;
@@ -666,6 +770,28 @@
           }
       }
 
+      var ignoredInputTypes = {
+        hidden: true,
+        submit: true,
+        reset: true,
+        button: true,
+        image: true,
+        file: true,
+      };
+
+      /*
+       * inputEl MUST BE an instanceof HTMLInputElement, else inputEl.type.toLowerCase will throw an error
+       */
+      function isRelevantInputField(inputEl) {
+        if (inputEl.hasAttribute('data-bwignore')) {
+          return false;
+        }
+
+        const isIgnoredInputType = ignoredInputTypes.hasOwnProperty(inputEl.type.toLowerCase());
+
+        return !isIgnoredInputType;
+      }
+
       /**
        * Query `theDoc` for form elements that we can use for autofill, ranked by importance and limited by `limit`
        * @param {Document} theDoc The Document to query
@@ -674,13 +800,19 @@
        */
       function getFormElements(theDoc, limit) {
           // START MODIFICATION
-          var els = [];
-          try {
-              var elsList = theDoc.querySelectorAll('input:not([type="hidden"]):not([type="submit"]):not([type="reset"])' +
-                  ':not([type="button"]):not([type="image"]):not([type="file"]):not([data-bwignore]), select, ' +
-                  'span[data-bwautofill]');
-              els = Array.prototype.slice.call(elsList);
-          } catch (e) { }
+
+          var els = queryDocAll(theDoc, theDoc.body, function (el) {
+              switch (el.nodeName) {
+                  case 'SELECT':
+                      return true;
+                  case 'SPAN':
+                      return el.hasAttribute('data-bwautofill');
+                  case 'INPUT':
+                      return isRelevantInputField(el);
+                  default:
+                      return false;
+              }
+          });
 
           if (!limit || els.length <= limit) {
               return els;
@@ -710,8 +842,8 @@
           }
 
           return returnEls;
-          // END MODIFICATION
       }
+      // END MODIFICATION
 
       /**
        * Focus the element `el` and optionally restore its original value
@@ -740,6 +872,12 @@
       var markTheFilling = true,
           animateTheFilling = true;
 
+      function queryPasswordInputs() {
+        return queryDocAll(document, document.body, function (el) {
+          return el.nodeName === 'INPUT' && el.type.toLowerCase() === 'password';
+        })
+      }
+
       // Check if URL is not secure when the original saved one was
       function urlNotSecure(savedURLs) {
           var passwordInputs = null;
@@ -747,7 +885,7 @@
               return false;
           }
 
-          return savedURLs.some(url => url?.indexOf('https://') === 0) && 'http:' === document.location.protocol && (passwordInputs = document.querySelectorAll('input[type=password]'),
+          return savedURLs.some(url => url?.indexOf('https://') === 0) && 'http:' === document.location.protocol && (passwordInputs = queryPasswordInputs(),
               0 < passwordInputs.length && (confirmResult = confirm('Warning: This is an unsecured HTTP page, and any information you submit can potentially be seen and changed by others. This Login was originally saved on a secure (HTTPS) page.\n\nDo you still wish to fill this login?'),
                   0 == confirmResult)) ? true : false;
       }
@@ -1086,9 +1224,12 @@
        */
       function getAllFields() {
           var r = RegExp('((\\\\b|_|-)pin(\\\\b|_|-)|password|passwort|kennwort|passe|contraseña|senha|密码|adgangskode|hasło|wachtwoord)', 'i');
-          return Array.prototype.slice.call(selectAllFromDoc("input[type='text']")).filter(function (el) {
-              return el.value && r.test(el.value);
-          }, this);
+          return queryDocAll(document, document.body, function (el) {
+              return el.nodeName === 'INPUT' &&
+                  el.type.toLowerCase() === 'text' &&
+                  el.value &&
+                  r.test(el.value);
+          });
       }
 
       /**
@@ -1113,7 +1254,9 @@
               a: {
                   currentEl = el;
                   for (var owner = el.ownerDocument, owner = owner ? owner.defaultView : {}, theStyle; currentEl && currentEl !== document;) {
-                      theStyle = owner.getComputedStyle ? owner.getComputedStyle(currentEl, null) : currentEl.style;
+                      // START MODIFICATION
+                      theStyle = owner.getComputedStyle && currentEl instanceof Element ? owner.getComputedStyle(currentEl, null) : currentEl.style;
+                      // END MODIFICATION
                       if (!theStyle) {
                           currentEl = true;
                           break a;
@@ -1147,12 +1290,19 @@
           }
           try {
               // START MODIFICATION
-              var elements = Array.prototype.slice.call(selectAllFromDoc('input, select, button, ' +
-                  'span[data-bwautofill]'));
-              // END MODIFICATION
-              var filteredElements = elements.filter(function (o) {
-                  return o.opid == theOpId;
+              var filteredElements = queryDocAll(document, document.body, function (el) {
+                  switch (el.nodeName) {
+                      case 'INPUT':
+                      case 'SELECT':
+                      case 'BUTTON':
+                          return el.opid === theOpId;
+                      case 'SPAN':
+                          return el.hasAttribute('data-bwautofill') && el.opid === theOpId;
+                  }
+
+                  return false;
               });
+              // END MODIFICATION
               if (0 < filteredElements.length) {
                   theElement = filteredElements[0],
                       1 < filteredElements.length && console.warn('More than one element found with opid ' + theOpId);
@@ -1173,11 +1323,11 @@
        * @returns
        */
       function selectAllFromDoc(theSelector) {
-          var d = document, elements = [];
-          try {
-              elements = d.querySelectorAll(theSelector);
-          } catch (e) { }
-          return elements;
+          // START MODIFICATION
+          return queryDocAll(document, document, function(node) {
+              return node.matches(theSelector);
+          });
+          // END MODIFICATION
       }
 
       /**