From fbe73b238737713f547c14c289a81a3aa3cc3fd1 Mon Sep 17 00:00:00 2001 From: Ben White Date: Tue, 26 Sep 2023 09:25:48 +0200 Subject: [PATCH 01/12] Extended masking function to allow passing custom fn --- packages/rrweb-snapshot/src/snapshot.ts | 2 +- packages/rrweb-snapshot/src/types.ts | 2 +- packages/rrweb/src/record/mutation.ts | 5 ++++- packages/rrweb/src/utils.ts | 27 ++++++++++++++++++++----- packages/rrweb/test/html/mask-text.html | 4 ++++ packages/rrweb/test/integration.test.ts | 25 +++++++++++++++++++++++ 6 files changed, 57 insertions(+), 8 deletions(-) diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index 02619296c8..0963e6cfef 100644 --- a/packages/rrweb-snapshot/src/snapshot.ts +++ b/packages/rrweb-snapshot/src/snapshot.ts @@ -575,7 +575,7 @@ function serializeTextNode( needMaskingText(n, maskTextClass, maskTextSelector) ) { textContent = maskTextFn - ? maskTextFn(textContent) + ? maskTextFn(textContent, n.parentElement) : textContent.replace(/[\S]/g, '*'); } diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts index 9edb4dd6d4..e573dfc1e0 100644 --- a/packages/rrweb-snapshot/src/types.ts +++ b/packages/rrweb-snapshot/src/types.ts @@ -153,7 +153,7 @@ export type DataURLOptions = Partial<{ quality: number; }>; -export type MaskTextFn = (text: string) => string; +export type MaskTextFn = (text: string, element: HTMLElement | null) => string; export type MaskInputFn = (text: string, element: HTMLElement) => string; export type KeepIframeSrcFn = (src: string) => boolean; diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 097d1a8fd5..d3c33e70c0 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -30,6 +30,7 @@ import { isSerializedStylesheet, inDom, getShadowHost, + getElementFromNode, } from '../utils'; type DoubleLinkedListNode = { @@ -508,6 +509,8 @@ export default class MutationBuffer { switch (m.type) { case 'characterData': { const value = m.target.textContent; + const el = getElementFromNode(m.target) + if ( !isBlocked(m.target, this.blockClass, this.blockSelector, false) && value !== m.oldValue @@ -520,7 +523,7 @@ export default class MutationBuffer { this.maskTextSelector, ) && value ? this.maskTextFn - ? this.maskTextFn(value) + ? this.maskTextFn(value, el) : value.replace(/[\S]/g, '*') : value, node: m.target, diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts index 604c8810e2..f476562037 100644 --- a/packages/rrweb/src/utils.ts +++ b/packages/rrweb/src/utils.ts @@ -215,6 +215,23 @@ export function getWindowWidth(): number { ); } +/** + * Returns the given node as an HTMLElement if it is one, otherwise the parent node as an HTMLElement + * @param node - node to check + * @returns HTMLElement or null + */ + +export function getElementFromNode(node: Node | null,): HTMLElement | null { + if (!node) { + return null; + } + const el: HTMLElement | null = + node.nodeType === node.ELEMENT_NODE + ? (node as HTMLElement) + : node.parentElement; + return el +} + /** * Checks if the given element set to be blocked by rrweb * @param node - node to check @@ -232,11 +249,11 @@ export function isBlocked( if (!node) { return false; } - const el: HTMLElement | null = - node.nodeType === node.ELEMENT_NODE - ? (node as HTMLElement) - : node.parentElement; - if (!el) return false; + const el = getElementFromNode(node) + + if (!el) { + return false + } try { if (typeof blockClass === 'string') { diff --git a/packages/rrweb/test/html/mask-text.html b/packages/rrweb/test/html/mask-text.html index 2abaaaa511..135034b6af 100644 --- a/packages/rrweb/test/html/mask-text.html +++ b/packages/rrweb/test/html/mask-text.html @@ -16,5 +16,9 @@
mask3
+ +

+ unmask1 +

diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index edfc8a97af..0fccd169f0 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -1170,6 +1170,31 @@ describe('record integration tests', function (this: ISuite) { assertSnapshot(snapshots); }); + it('should unmask texts using maskTextFn', async () => { + const page: puppeteer.Page = await browser.newPage(); + await page.goto('about:blank'); + await page.setContent( + getHtml.call(this, 'mask-text.html', { + maskTextSelector: '*', + maskTextFn: (t: string, el: HTMLElement) => { + return el.matches('[data-unmask-example="true"]') ? t : t.replace(/[a-z]/g, '*'); + }, + }), + ); + + await page.type('#password', 'secr3t'); + + // Change type to text (simulate "show password") + await page.click('#show-password'); + await page.type('#password', 'XY'); + await page.click('#show-password'); + + const snapshots = (await page.evaluate( + 'window.snapshots', + )) as eventWithTime[]; + assertSnapshot(snapshots); + }); + it('can mask character data mutations', async () => { const page: puppeteer.Page = await browser.newPage(); await page.goto('about:blank'); From de32a2eb29040faa314fd411d34f62eaf6e8fdf7 Mon Sep 17 00:00:00 2001 From: benjackwhite Date: Tue, 26 Sep 2023 07:27:33 +0000 Subject: [PATCH 02/12] Apply formatting changes --- packages/rrweb/src/record/mutation.ts | 2 +- packages/rrweb/src/utils.ts | 8 ++++---- packages/rrweb/test/integration.test.ts | 4 +++- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index d3c33e70c0..a6b4cb4e4c 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -509,7 +509,7 @@ export default class MutationBuffer { switch (m.type) { case 'characterData': { const value = m.target.textContent; - const el = getElementFromNode(m.target) + const el = getElementFromNode(m.target); if ( !isBlocked(m.target, this.blockClass, this.blockSelector, false) && diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts index f476562037..024de09e30 100644 --- a/packages/rrweb/src/utils.ts +++ b/packages/rrweb/src/utils.ts @@ -221,7 +221,7 @@ export function getWindowWidth(): number { * @returns HTMLElement or null */ -export function getElementFromNode(node: Node | null,): HTMLElement | null { +export function getElementFromNode(node: Node | null): HTMLElement | null { if (!node) { return null; } @@ -229,7 +229,7 @@ export function getElementFromNode(node: Node | null,): HTMLElement | null { node.nodeType === node.ELEMENT_NODE ? (node as HTMLElement) : node.parentElement; - return el + return el; } /** @@ -249,10 +249,10 @@ export function isBlocked( if (!node) { return false; } - const el = getElementFromNode(node) + const el = getElementFromNode(node); if (!el) { - return false + return false; } try { diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 0fccd169f0..631dca43bf 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -1177,7 +1177,9 @@ describe('record integration tests', function (this: ISuite) { getHtml.call(this, 'mask-text.html', { maskTextSelector: '*', maskTextFn: (t: string, el: HTMLElement) => { - return el.matches('[data-unmask-example="true"]') ? t : t.replace(/[a-z]/g, '*'); + return el.matches('[data-unmask-example="true"]') + ? t + : t.replace(/[a-z]/g, '*'); }, }), ); From b633efa10fa9e43ba16b327a428ac32babbde650 Mon Sep 17 00:00:00 2001 From: Ben White Date: Tue, 26 Sep 2023 09:40:00 +0200 Subject: [PATCH 03/12] Fix tests --- .../__snapshots__/integration.test.ts.snap | 363 +++++++++++++++++- packages/rrweb/test/integration.test.ts | 7 - 2 files changed, 355 insertions(+), 15 deletions(-) diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index c95ec53a5f..7c1dad8e90 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -7109,9 +7109,29 @@ exports[`record integration tests should mask texts 1`] = ` }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\", + \\"textContent\\": \\"\\\\n\\\\n \\", \\"id\\": 35 }, + { + \\"type\\": 2, + \\"tagName\\": \\"p\\", + \\"attributes\\": { + \\"data-unmask-example\\": \\"true\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n unmask1\\\\n \\", + \\"id\\": 37 + } + ], + \\"id\\": 36 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\", + \\"id\\": 38 + }, { \\"type\\": 2, \\"tagName\\": \\"script\\", @@ -7120,15 +7140,15 @@ exports[`record integration tests should mask texts 1`] = ` { \\"type\\": 3, \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 37 + \\"id\\": 40 } ], - \\"id\\": 36 + \\"id\\": 39 }, { \\"type\\": 3, \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", - \\"id\\": 38 + \\"id\\": 41 } ], \\"id\\": 16 @@ -7387,9 +7407,29 @@ exports[`record integration tests should mask texts using maskTextFn 1`] = ` }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\", + \\"textContent\\": \\"\\\\n\\\\n \\", \\"id\\": 35 }, + { + \\"type\\": 2, + \\"tagName\\": \\"p\\", + \\"attributes\\": { + \\"data-unmask-example\\": \\"true\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n unmask1\\\\n \\", + \\"id\\": 37 + } + ], + \\"id\\": 36 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\", + \\"id\\": 38 + }, { \\"type\\": 2, \\"tagName\\": \\"script\\", @@ -7398,15 +7438,15 @@ exports[`record integration tests should mask texts using maskTextFn 1`] = ` { \\"type\\": 3, \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 37 + \\"id\\": 40 } ], - \\"id\\": 36 + \\"id\\": 39 }, { \\"type\\": 3, \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", - \\"id\\": 38 + \\"id\\": 41 } ], \\"id\\": 16 @@ -9210,6 +9250,15 @@ exports[`record integration tests should not record input values if dynamically \\"isChecked\\": false, \\"id\\": 21 } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 3, + \\"id\\": 21, + \\"x\\": 27.5, + \\"y\\": 0 + } } ]" `; @@ -16237,6 +16286,304 @@ exports[`record integration tests should record webgl canvas mutations 1`] = ` ]" `; +exports[`record integration tests should unmask texts using maskTextFn 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"http-equiv\\": \\"X-UA-Compatible\\", + \\"content\\": \\"ie=edge\\" + }, + \\"childNodes\\": [], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"M*** ****\\", + \\"id\\": 13 + } + ], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 14 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 17 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"p\\", + \\"attributes\\": { + \\"class\\": \\"rr-mask\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"****1\\", + \\"id\\": 19 + } + ], + \\"id\\": 18 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 20 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"class\\": \\"rr-mask\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 22 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"****2\\", + \\"id\\": 24 + } + ], + \\"id\\": 23 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 25 + } + ], + \\"id\\": 21 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 26 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"data-masking\\": \\"true\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 28 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 30 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"****3\\", + \\"id\\": 32 + } + ], + \\"id\\": 31 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 33 + } + ], + \\"id\\": 29 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 34 + } + ], + \\"id\\": 27 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n \\", + \\"id\\": 35 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"p\\", + \\"attributes\\": { + \\"data-unmask-example\\": \\"true\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n unmask1\\\\n \\", + \\"id\\": 37 + } + ], + \\"id\\": 36 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\", + \\"id\\": 38 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 40 + } + ], + \\"id\\": 39 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 41 + } + ], + \\"id\\": 16 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + } +]" +`; + exports[`record integration tests will serialize node before record 1`] = ` "[ { diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 0fccd169f0..5d684d2fed 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -1182,13 +1182,6 @@ describe('record integration tests', function (this: ISuite) { }), ); - await page.type('#password', 'secr3t'); - - // Change type to text (simulate "show password") - await page.click('#show-password'); - await page.type('#password', 'XY'); - await page.click('#show-password'); - const snapshots = (await page.evaluate( 'window.snapshots', )) as eventWithTime[]; From 52881803b54d81044d97cbc3b08879f9f0df7cac Mon Sep 17 00:00:00 2001 From: Ben White Date: Tue, 26 Sep 2023 09:44:44 +0200 Subject: [PATCH 04/12] Added changeset --- .changeset/swift-dancers-rest.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/swift-dancers-rest.md diff --git a/.changeset/swift-dancers-rest.md b/.changeset/swift-dancers-rest.md new file mode 100644 index 0000000000..bcedf6c875 --- /dev/null +++ b/.changeset/swift-dancers-rest.md @@ -0,0 +1,6 @@ +--- +'rrweb-snapshot': minor +'rrweb': minor +--- + +Extends maskTextFn to pass the HTMLElement to the deciding function From dd2a4c2d0dee96d757a6c5e2e966a88077da166d Mon Sep 17 00:00:00 2001 From: Ben White Date: Tue, 26 Sep 2023 10:24:48 +0200 Subject: [PATCH 05/12] Fix --- .../rrweb/test/__snapshots__/integration.test.ts.snap | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index 7c1dad8e90..e320254111 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -9250,15 +9250,6 @@ exports[`record integration tests should not record input values if dynamically \\"isChecked\\": false, \\"id\\": 21 } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 3, - \\"id\\": 21, - \\"x\\": 27.5, - \\"y\\": 0 - } } ]" `; From e38e6e7a49ef6e12212d07dc36d16c2e4b860535 Mon Sep 17 00:00:00 2001 From: Ben White Date: Fri, 6 Oct 2023 12:00:58 +0200 Subject: [PATCH 06/12] Update packages/rrweb/src/record/mutation.ts Co-authored-by: Justin Halsall --- packages/rrweb/src/record/mutation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index a6b4cb4e4c..9af2201830 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -523,7 +523,7 @@ export default class MutationBuffer { this.maskTextSelector, ) && value ? this.maskTextFn - ? this.maskTextFn(value, el) + ? this.maskTextFn(value, getElementFromNode(m.target)) : value.replace(/[\S]/g, '*') : value, node: m.target, From e997fc1972bb4bc26e8b328bff695b0c815fa0af Mon Sep 17 00:00:00 2001 From: Ben White Date: Fri, 6 Oct 2023 12:01:03 +0200 Subject: [PATCH 07/12] Update packages/rrweb/src/record/mutation.ts Co-authored-by: Justin Halsall --- packages/rrweb/src/record/mutation.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 9af2201830..d5c0de2d97 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -509,7 +509,6 @@ export default class MutationBuffer { switch (m.type) { case 'characterData': { const value = m.target.textContent; - const el = getElementFromNode(m.target); if ( !isBlocked(m.target, this.blockClass, this.blockSelector, false) && From bd8fb9283bd4fbd7bfa7e8daf02bbaf9f74cf1a6 Mon Sep 17 00:00:00 2001 From: Ben White Date: Fri, 13 Oct 2023 12:35:36 +0200 Subject: [PATCH 08/12] Update packages/rrweb/src/record/mutation.ts Co-authored-by: Eoghan Murray --- packages/rrweb/src/record/mutation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index d5c0de2d97..3df70154b5 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -30,7 +30,7 @@ import { isSerializedStylesheet, inDom, getShadowHost, - getElementFromNode, + closestElementOfNode, } from '../utils'; type DoubleLinkedListNode = { From 4d540efa000bc2133aa89c5878ccd1678bf229c0 Mon Sep 17 00:00:00 2001 From: Ben White Date: Fri, 13 Oct 2023 12:35:45 +0200 Subject: [PATCH 09/12] Update packages/rrweb/src/record/mutation.ts Co-authored-by: Eoghan Murray --- packages/rrweb/src/record/mutation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index 3df70154b5..bbc38c8c16 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -522,7 +522,7 @@ export default class MutationBuffer { this.maskTextSelector, ) && value ? this.maskTextFn - ? this.maskTextFn(value, getElementFromNode(m.target)) + ? this.maskTextFn(value, getClosestElementForNode(m.target)) : value.replace(/[\S]/g, '*') : value, node: m.target, From 60f42d4750756c38f0156cb1aab85cbb1aa3bd8b Mon Sep 17 00:00:00 2001 From: Ben White Date: Fri, 13 Oct 2023 12:36:13 +0200 Subject: [PATCH 10/12] Update packages/rrweb/src/utils.ts --- packages/rrweb/src/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts index 024de09e30..5f41910ae5 100644 --- a/packages/rrweb/src/utils.ts +++ b/packages/rrweb/src/utils.ts @@ -221,7 +221,7 @@ export function getWindowWidth(): number { * @returns HTMLElement or null */ -export function getElementFromNode(node: Node | null): HTMLElement | null { +export function closestElementOfNode(node: Node | null): HTMLElement | null { if (!node) { return null; } From f31142af02cc0a0d088aff2eecf5f4c7a9828aaf Mon Sep 17 00:00:00 2001 From: Ben White Date: Fri, 13 Oct 2023 12:36:19 +0200 Subject: [PATCH 11/12] Update packages/rrweb/src/utils.ts Co-authored-by: Eoghan Murray --- packages/rrweb/src/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts index 5f41910ae5..f426689d2f 100644 --- a/packages/rrweb/src/utils.ts +++ b/packages/rrweb/src/utils.ts @@ -249,7 +249,7 @@ export function isBlocked( if (!node) { return false; } - const el = getElementFromNode(node); + const el = closestElementOfNode(node); if (!el) { return false; From 0c264205a40e8f28a75f2735a84084a29bb7f6fd Mon Sep 17 00:00:00 2001 From: Ben White Date: Fri, 13 Oct 2023 12:37:39 +0200 Subject: [PATCH 12/12] Fix --- packages/rrweb/src/record/mutation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts index bbc38c8c16..80943d96ab 100644 --- a/packages/rrweb/src/record/mutation.ts +++ b/packages/rrweb/src/record/mutation.ts @@ -522,7 +522,7 @@ export default class MutationBuffer { this.maskTextSelector, ) && value ? this.maskTextFn - ? this.maskTextFn(value, getClosestElementForNode(m.target)) + ? this.maskTextFn(value, closestElementOfNode(m.target)) : value.replace(/[\S]/g, '*') : value, node: m.target,