xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extended text masking function to include relevant HTMLElement (#1310)

Browse Source 
* Extends maskTextFn to pass the HTMLElement to the deciding function

---------

Authored-by: benjackwhite <benjackwhite@users.noreply.github.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
This commit is contained in:
Ben White
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 5e47fac5d0
commit db334d2405
8 changed files with 403 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/swift-dancers-rest.md Normal file
View File

@@ -0,0 +1,6 @@
---
'rrweb-snapshot': minor
'rrweb': minor
---
Extends maskTextFn to pass the HTMLElement to the deciding function

2
packages/rrweb-snapshot/src/snapshot.ts
View File

@@ -575,7 +575,7 @@ function serializeTextNode(
needMaskingText(n, maskTextClass, maskTextSelector) needMaskingText(n, maskTextClass, maskTextSelector)
) { ) {
textContent = maskTextFn textContent = maskTextFn
? maskTextFn(textContent) ? maskTextFn(textContent, n.parentElement)
: textContent.replace(/[\S]/g, '*'); : textContent.replace(/[\S]/g, '*');
} }

2
packages/rrweb-snapshot/src/types.ts
View File

@@ -153,7 +153,7 @@ export type DataURLOptions = Partial<{
quality: number; 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 MaskInputFn = (text: string, element: HTMLElement) => string;
export type KeepIframeSrcFn = (src: string) => boolean; export type KeepIframeSrcFn = (src: string) => boolean;

4
packages/rrweb/src/record/mutation.ts
View File

@@ -30,6 +30,7 @@ import {
isSerializedStylesheet, isSerializedStylesheet,
inDom, inDom,
getShadowHost, getShadowHost,
closestElementOfNode,
} from '../utils'; } from '../utils';
type DoubleLinkedListNode = { type DoubleLinkedListNode = {
@@ -508,6 +509,7 @@ export default class MutationBuffer {
switch (m.type) { switch (m.type) {
case 'characterData': { case 'characterData': {
const value = m.target.textContent; const value = m.target.textContent;
if ( if (
!isBlocked(m.target, this.blockClass, this.blockSelector, false) && !isBlocked(m.target, this.blockClass, this.blockSelector, false) &&
value !== m.oldValue value !== m.oldValue
@@ -520,7 +522,7 @@ export default class MutationBuffer {
this.maskTextSelector, this.maskTextSelector,
) && value ) && value
? this.maskTextFn ? this.maskTextFn
? this.maskTextFn(value) ? this.maskTextFn(value, closestElementOfNode(m.target))
: value.replace(/[\S]/g, '*') : value.replace(/[\S]/g, '*')
: value, : value,
node: m.target, node: m.target,

27
packages/rrweb/src/utils.ts
View File

@@ -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 closestElementOfNode(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 * Checks if the given element set to be blocked by rrweb
* @param node - node to check * @param node - node to check
@@ -232,11 +249,11 @@ export function isBlocked(
if (!node) { if (!node) {
return false; return false;
} }
const el: HTMLElement | null = const el = closestElementOfNode(node);
node.nodeType === node.ELEMENT_NODE
? (node as HTMLElement) if (!el) {
: node.parentElement; return false;
if (!el) return false; }
try { try {
if (typeof blockClass === 'string') { if (typeof blockClass === 'string') {

354
packages/rrweb/test/__snapshots__/integration.test.ts.snap
View File

@@ -7109,9 +7109,29 @@ exports[`record integration tests should mask texts 1`] = `
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\", \\"textContent\\": \\"\\\\n\\\\n \\",
\\"id\\": 35 \\"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, \\"type\\": 2,
\\"tagName\\": \\"script\\", \\"tagName\\": \\"script\\",
@@ -7120,15 +7140,15 @@ exports[`record integration tests should mask texts 1`] = `
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 37 \\"id\\": 40
} }
], ],
\\"id\\": 36 \\"id\\": 39
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\",
\\"id\\": 38 \\"id\\": 41
} }
], ],
\\"id\\": 16 \\"id\\": 16
@@ -7387,9 +7407,29 @@ exports[`record integration tests should mask texts using maskTextFn 1`] = `
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\", \\"textContent\\": \\"\\\\n\\\\n \\",
\\"id\\": 35 \\"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, \\"type\\": 2,
\\"tagName\\": \\"script\\", \\"tagName\\": \\"script\\",
@@ -7398,15 +7438,15 @@ exports[`record integration tests should mask texts using maskTextFn 1`] = `
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 37 \\"id\\": 40
} }
], ],
\\"id\\": 36 \\"id\\": 39
}, },
{ {
\\"type\\": 3, \\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\",
\\"id\\": 38 \\"id\\": 41
} }
], ],
\\"id\\": 16 \\"id\\": 16
@@ -16237,6 +16277,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`] = ` exports[`record integration tests will serialize node before record 1`] = `
"[ "[
{ {

4
packages/rrweb/test/html/mask-text.html
View File

@@ -16,5 +16,9 @@
<div>mask3</div> <div>mask3</div>
</div> </div>
</div> </div>
<p data-unmask-example="true">
unmask1
</p>
</body> </body>
</html> </html>

20
packages/rrweb/test/integration.test.ts
View File

@@ -1170,6 +1170,26 @@ describe('record integration tests', function (this: ISuite) {
assertSnapshot(snapshots); 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, '*');
},
}),
);
const snapshots = (await page.evaluate(
'window.snapshots',
)) as eventWithTime[];
assertSnapshot(snapshots);
});
it('can mask character data mutations', async () => { it('can mask character data mutations', async () => {
const page: puppeteer.Page = await browser.newPage(); const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank'); await page.goto('about:blank');