wip: add a chase like form (shadow elements in iframe)

duckduckgo · dbajpeyi · Jul 19, 2024 · Jul 4, 2024 · Jul 8, 2024 · Jul 11, 2024
commit 91c4a8f7a06bfe2cd64d62eee5bf356a3379c1db
diff --git a/dist/autofill-debug.js b/dist/autofill-debug.js
diff --git a/dist/autofill.js b/dist/autofill.js
diff --git a/integration-test/pages/index.html b/integration-test/pages/index.html
@@ -20,6 +20,7 @@
     <li><a href="login-poor-form.html">login-poor-form.html</a></li>
     <li><a href="signup.html">signup.html</a></li>
     <li><a href="select-input.html">select-input.html</a></li>
+    <li><a href="shadow-in-iframe/form.html">shadow-in-iframe/form.html</a></li>
 </ul>
 </body>
 </html>
diff --git a/integration-test/pages/shadow-in-iframe/form-in-iframe.html b/integration-test/pages/shadow-in-iframe/form-in-iframe.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Shadow Elements Example</title>
+    <p>The following form is embedded in an iframe</p>
+</head>
+<body>
+    <h1>Shadow Elements Example</h1>
+    <iframe src="shadow-elements.html" width="100%" height="400"></iframe>
+</body>
+</html>
diff --git a/integration-test/pages/shadow-in-iframe/shadow-elements.html b/integration-test/pages/shadow-in-iframe/shadow-elements.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Shadow DOM Form</title>
+</head>
+<body>
+    <p>Replicating secure.chase.com: each of the following form elements are within a shadow root that is open. 
+        The form element itself is not in a shadow root
+    </p>
+    <form>
+        <div id="usernameRoot"></div>
+        <div id="passwordRoot"></div>
+        <div id="submitRoot" type="submit">Sign up</div>
+    </form>
+
+    <script>
+        // Create shadow roots for username and password inputs
+        const usernameRoot = document.getElementById('usernameRoot').attachShadow({ mode: 'open' });
+        const passwordRoot = document.getElementById('passwordRoot').attachShadow({ mode: 'open' });
+        const submitRoot = document.getElementById('submitRoot').attachShadow({ mode: 'open' });
+
+        // Create username input element
+        const usernameInput = document.createElement('input');
+        usernameInput.type = 'text';
+        usernameInput.placeholder = 'Username';
+        usernameRoot.appendChild(usernameInput);
+
+        // Create password input element
+        const passwordInput = document.createElement('input');
+        passwordInput.type = 'password';
+        passwordInput.placeholder = 'Password';
+        passwordRoot.appendChild(passwordInput);
+
+       // Create a submit button
+        const submitButton = document.createElement('button');
+        submitButton.textContent = 'Submit';
+        submitRoot.appendChild(submitButton);
+
+        // Add event listener to submit button
+        submitButton.addEventListener('click', function(event) {
+            event.preventDefault();
+            alert('Username: ' + usernameInput.value + '\nPassword: ' + passwordInput.value);
+        }); 
+
+    </script>
+
+</body>
+</html>
diff --git a/src/Scanner.js b/src/Scanner.js
@@ -140,26 +140,26 @@
        logPerformance('initial_scanner')
        this.mutObs.observe(document.documentElement, { childList: true, subtree: true })
    }



    // Function to find shadow roots in the document
    findShadowRoots(node) {
        const shadowRoots = [];

        // Recursive function to traverse the DOM
        function traverse(node) {
            // Check if the node has a shadow root
            if (node.shadowRoot) {
                shadowRoots.push(node.shadowRoot);
            }

            // Traverse child nodes
            node.childNodes.forEach(child => traverse(child));

            // Traverse shadow DOM if exists
            if (node.shadowRoot) {
                node.shadowRoot.childNodes.forEach(child => traverse(child));
            }
        }

@@ -216,11 +216,11 @@
             console.log("DEEP adding whole context as input", context)
             this.addInput(context)
         } else {
-            // const inputs = context.querySelectorAll(this.matching.cssSelector('formInputsSelectorWithoutSelect'))
-            const shadowRoots = this.findAllShadowHosts()
-            console.log("DEEP shadowRoots", shadowRoots)
-            const inputs = this.findInputsInShadowRoots(shadowRoots);
-            console.log("DEEP inputs", inputs)
+            const inputs = context.querySelectorAll(this.matching.cssSelector('formInputsSelectorWithoutSelect'))
+            // const shadowRoots = this.findAllShadowHosts()
+            // console.log("DEEP shadowRoots", shadowRoots)
+            // const inputs = this.findInputsInShadowRoots(shadowRoots);
+            // console.log("DEEP inputs", inputs)
             if (inputs.length > this.options.maxInputsPerPage) {
                 this.stopScanner(`Too many input fields in the given context (${inputs.length}), stop scanning`, context)
                 return this
@@ -314,7 +314,6 @@
         if (this.stopped) return
 
         const parentForm = this.getParentForm(input)
-        console.log("DEEP parent form", parentForm);
 
         if (parentForm instanceof HTMLFormElement && this.forms.has(parentForm)) {
             const foundForm = this.forms.get(parentForm)
@@ -412,7 +411,6 @@
      */
     processChangedElements () {
         if (this.rescanAll) {
-            console.log('DEEP rescan all')
             this.findEligibleInputs(document)
             return
         }

diff --git a/swift-package/Resources/assets/autofill-debug.js b/swift-package/Resources/assets/autofill-debug.js
diff --git a/swift-package/Resources/assets/autofill.js b/swift-package/Resources/assets/autofill.js