Sync from source repo branch (#4)

* Fix up the 'should replace the existing DOM nodes on iframe navigation with `isAttachIframe`' test (rrweb-io#1636) - it was working for me when the test was run in isolation (`-t` option), but when the entire cross-origin-iframes test was run, the change of iframe contents didn't seem to happen in time * [chore]: Update actions/upload-artifact to v4 (rrweb-io#1643) * update actions/upload-artifact to v4 --------- Co-authored-by: Eoghan Murray <[email protected]> * Fix a code path where masking could be skipped on textareas (rrweb-io#1599) * Fixes rrweb-io#1596 * [chore] Cache yarn packages for CI (rrweb-io#1646) * [chore] Cache yarn packages for CI * Cache yarn in release.yml * [chore] Update deprecated download artifact on CI (rrweb-io#1647) * I'm merging even though ESLint is stlll failing in Github Actions as I believe it's running actions _without_ this PR applied yet --------- Co-authored-by: Eoghan Murray <[email protected]> Co-authored-by: Kevin Townsend <[email protected]> Co-authored-by: Justin Halsall <[email protected]>
Midpath-Software · Feb 5, 2025 · 3e6ea35 · 3e6ea35
1 parent b6585e6
commit 3e6ea35
Show file tree

Hide file tree

Showing 12 changed files with 1,012 additions and 7 deletions.
diff --git a/.changeset/blank-dev-changset.md b/.changeset/blank-dev-changset.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/dirty-pets-fly.md b/.changeset/dirty-pets-fly.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/fuzzy-mugs-march.md b/.changeset/fuzzy-mugs-march.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/lucky-donuts-hammer.md b/.changeset/lucky-donuts-hammer.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/textarea-inner-html.md b/.changeset/textarea-inner-html.md
@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+#1596 Add masking for innerText mutations on textarea elements
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
@@ -19,6 +19,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
+          cache: 'yarn'
 
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -19,6 +19,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
+          cache: 'yarn'
 
       - name: Install Dependencies
         run: |

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -533,10 +533,18 @@ export default class MutationBuffer {
       this.attributes.push(item);
       this.attributeMap.set(textarea, item);
     }
-    item.attributes.value = Array.from(
+    const value = Array.from(
       dom.childNodes(textarea),
       (cn) => dom.textContent(cn) || '',
     ).join('');
+    item.attributes.value = maskInputValue({
+      element: textarea,
+      maskInputOptions: this.maskInputOptions,
+      tagName: textarea.tagName,
+      type: getInputType(textarea),
+      value,
+      maskInputFn: this.maskInputFn,
+    });
   };
 
   private processMutation = (m: mutationRecord) => {

diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -9964,6 +9964,21 @@ exports[`record integration tests > should not record input values if dynamicall
         {
           \\"parentId\\": 14,
           \\"nextId\\": 16,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"textarea\\",
+            \\"attributes\\": {
+              \\"id\\": \\"textarea\\",
+              \\"size\\": \\"50\\",
+              \\"value\\": \\"*************************\\"
+            },
+            \\"childNodes\\": [],
+            \\"id\\": 21
+          }
+        },
+        {
+          \\"parentId\\": 14,
+          \\"nextId\\": 21,
           \\"node\\": {
             \\"type\\": 2,
             \\"tagName\\": \\"input\\",
@@ -9973,7 +9988,7 @@ exports[`record integration tests > should not record input values if dynamicall
               \\"value\\": \\"**********************\\"
             },
             \\"childNodes\\": [],
-            \\"id\\": 21
+            \\"id\\": 22
           }
         }
       ]
@@ -9985,6 +10000,15 @@ exports[`record integration tests > should not record input values if dynamicall
       \\"source\\": 5,
       \\"text\\": \\"**********************\\",
       \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*************************\\",
+      \\"isChecked\\": false,
       \\"id\\": 21
     }
   },
@@ -9993,7 +10017,7 @@ exports[`record integration tests > should not record input values if dynamicall
     \\"data\\": {
       \\"source\\": 2,
       \\"type\\": 5,
-      \\"id\\": 21
+      \\"id\\": 22
     }
   },
   {
@@ -10002,7 +10026,7 @@ exports[`record integration tests > should not record input values if dynamicall
       \\"source\\": 5,
       \\"text\\": \\"***********************\\",
       \\"isChecked\\": false,
-      \\"id\\": 21
+      \\"id\\": 22
     }
   },
   {
@@ -10011,7 +10035,7 @@ exports[`record integration tests > should not record input values if dynamicall
       \\"source\\": 5,
       \\"text\\": \\"************************\\",
       \\"isChecked\\": false,
-      \\"id\\": 21
+      \\"id\\": 22
     }
   },
   {
@@ -10020,8 +10044,109 @@ exports[`record integration tests > should not record input values if dynamicall
       \\"source\\": 5,
       \\"text\\": \\"*************************\\",
       \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 6,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 5,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**************************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"***************************\\",
+      \\"isChecked\\": false,
       \\"id\\": 21
     }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"****************************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"**********************************************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 22
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 5,
+      \\"text\\": \\"*************************************************\\",
+      \\"isChecked\\": false,
+      \\"id\\": 21
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 22,
+          \\"attributes\\": {
+            \\"value\\": \\"**********************************************************************************************\\"
+          }
+        },
+        {
+          \\"id\\": 21,
+          \\"attributes\\": {
+            \\"value\\": \\"*************************************************************************************************\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [
+        {
+          \\"id\\": 21,
+          \\"attributes\\": {
+            \\"value\\": \\"****************************************************************\\"
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"adds\\": []
+    }
   }
 ]"
 `;

diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
@@ -783,9 +783,46 @@ describe('record integration tests', function (this: ISuite) {
 
       const nextElement = document.querySelector('#one')!;
       nextElement.parentNode!.insertBefore(el, nextElement);
+
+      const ta = document.createElement('textarea');
+      ta.size = 50;
+      ta.id = 'textarea';
+      ta.setAttribute('size', '50');
+      ta.value = 'textarea should be masked';
+
+      nextElement.parentNode!.insertBefore(ta, nextElement);
     });
 
     await page.type('#input', 'moo');
+    await page.type('#textarea', 'boo');
+
+    await page.evaluate(() => {
+      const el = document.querySelector('input');
+      el.value = 'input attribute mutation should also be masked';
+
+      const ta = document.querySelector('textarea');
+      ta.value = 'textarea attribute mutation should also be masked';
+    });
+
+    await page.evaluate(() => {
+      const el = document.querySelector('input');
+      el.setAttribute(
+        'value',
+        "input attribute mutation should also be masked (even though the new value doesn't take effect)",
+      );
+
+      const ta = document.querySelector('textarea');
+      ta.setAttribute(
+        'value',
+        "textarea attribute mutation should also be masked (even though the new value doesn't take effect)",
+      );
+    });
+
+    await page.evaluate(() => {
+      const ta = document.querySelector('textarea');
+      ta.innerText =
+        'textarea attribute mutation via innerText should also be masked ';
+    });
 
     await assertSnapshot(page);
   });