Skip to content

Commit 9cd28b7

Browse files
eoghanmurrayeoghanmurray
authored
Fix a code path where masking could be skipped on textareas (#1599)
* Fixes #1596
1 parent fb0f8f1 commit 9cd28b7

File tree

4 files changed

+180
-5
lines changed

4 files changed

+180
-5
lines changed

‎.changeset/textarea-inner-html.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"rrweb": patch
3+
---
4+
5+
#1596 Add masking for innerText mutations on textarea elements

‎packages/rrweb/src/record/mutation.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -533,10 +533,18 @@ export default class MutationBuffer {
533533
this.attributes.push(item);
534534
this.attributeMap.set(textarea, item);
535535
}
536-
item.attributes.value = Array.from(
536+
const value = Array.from(
537537
dom.childNodes(textarea),
538538
(cn) => dom.textContent(cn) || '',
539539
).join('');
540+
item.attributes.value = maskInputValue({
541+
element: textarea,
542+
maskInputOptions: this.maskInputOptions,
543+
tagName: textarea.tagName,
544+
type: getInputType(textarea),
545+
value,
546+
maskInputFn: this.maskInputFn,
547+
});
540548
};
541549

542550
private processMutation = (m: mutationRecord) => {

‎packages/rrweb/test/__snapshots__/integration.test.ts.snap

+129-4
Original file line numberDiff line numberDiff line change
@@ -9964,6 +9964,21 @@ exports[`record integration tests > should not record input values if dynamicall
99649964
{
99659965
\\"parentId\\": 14,
99669966
\\"nextId\\": 16,
9967+
\\"node\\": {
9968+
\\"type\\": 2,
9969+
\\"tagName\\": \\"textarea\\",
9970+
\\"attributes\\": {
9971+
\\"id\\": \\"textarea\\",
9972+
\\"size\\": \\"50\\",
9973+
\\"value\\": \\"*************************\\"
9974+
},
9975+
\\"childNodes\\": [],
9976+
\\"id\\": 21
9977+
}
9978+
},
9979+
{
9980+
\\"parentId\\": 14,
9981+
\\"nextId\\": 21,
99679982
\\"node\\": {
99689983
\\"type\\": 2,
99699984
\\"tagName\\": \\"input\\",
@@ -9973,7 +9988,7 @@ exports[`record integration tests > should not record input values if dynamicall
99739988
\\"value\\": \\"**********************\\"
99749989
},
99759990
\\"childNodes\\": [],
9976-
\\"id\\": 21
9991+
\\"id\\": 22
99779992
}
99789993
}
99799994
]
@@ -9985,6 +10000,15 @@ exports[`record integration tests > should not record input values if dynamicall
998510000
\\"source\\": 5,
998610001
\\"text\\": \\"**********************\\",
998710002
\\"isChecked\\": false,
10003+
\\"id\\": 22
10004+
}
10005+
},
10006+
{
10007+
\\"type\\": 3,
10008+
\\"data\\": {
10009+
\\"source\\": 5,
10010+
\\"text\\": \\"*************************\\",
10011+
\\"isChecked\\": false,
998810012
\\"id\\": 21
998910013
}
999010014
},
@@ -9993,7 +10017,7 @@ exports[`record integration tests > should not record input values if dynamicall
999310017
\\"data\\": {
999410018
\\"source\\": 2,
999510019
\\"type\\": 5,
9996-
\\"id\\": 21
10020+
\\"id\\": 22
999710021
}
999810022
},
999910023
{
@@ -10002,7 +10026,7 @@ exports[`record integration tests > should not record input values if dynamicall
1000210026
\\"source\\": 5,
1000310027
\\"text\\": \\"***********************\\",
1000410028
\\"isChecked\\": false,
10005-
\\"id\\": 21
10029+
\\"id\\": 22
1000610030
}
1000710031
},
1000810032
{
@@ -10011,7 +10035,7 @@ exports[`record integration tests > should not record input values if dynamicall
1001110035
\\"source\\": 5,
1001210036
\\"text\\": \\"************************\\",
1001310037
\\"isChecked\\": false,
10014-
\\"id\\": 21
10038+
\\"id\\": 22
1001510039
}
1001610040
},
1001710041
{
@@ -10020,8 +10044,109 @@ exports[`record integration tests > should not record input values if dynamicall
1002010044
\\"source\\": 5,
1002110045
\\"text\\": \\"*************************\\",
1002210046
\\"isChecked\\": false,
10047+
\\"id\\": 22
10048+
}
10049+
},
10050+
{
10051+
\\"type\\": 3,
10052+
\\"data\\": {
10053+
\\"source\\": 2,
10054+
\\"type\\": 6,
10055+
\\"id\\": 22
10056+
}
10057+
},
10058+
{
10059+
\\"type\\": 3,
10060+
\\"data\\": {
10061+
\\"source\\": 2,
10062+
\\"type\\": 5,
10063+
\\"id\\": 21
10064+
}
10065+
},
10066+
{
10067+
\\"type\\": 3,
10068+
\\"data\\": {
10069+
\\"source\\": 5,
10070+
\\"text\\": \\"**************************\\",
10071+
\\"isChecked\\": false,
10072+
\\"id\\": 21
10073+
}
10074+
},
10075+
{
10076+
\\"type\\": 3,
10077+
\\"data\\": {
10078+
\\"source\\": 5,
10079+
\\"text\\": \\"***************************\\",
10080+
\\"isChecked\\": false,
1002310081
\\"id\\": 21
1002410082
}
10083+
},
10084+
{
10085+
\\"type\\": 3,
10086+
\\"data\\": {
10087+
\\"source\\": 5,
10088+
\\"text\\": \\"****************************\\",
10089+
\\"isChecked\\": false,
10090+
\\"id\\": 21
10091+
}
10092+
},
10093+
{
10094+
\\"type\\": 3,
10095+
\\"data\\": {
10096+
\\"source\\": 5,
10097+
\\"text\\": \\"**********************************************\\",
10098+
\\"isChecked\\": false,
10099+
\\"id\\": 22
10100+
}
10101+
},
10102+
{
10103+
\\"type\\": 3,
10104+
\\"data\\": {
10105+
\\"source\\": 5,
10106+
\\"text\\": \\"*************************************************\\",
10107+
\\"isChecked\\": false,
10108+
\\"id\\": 21
10109+
}
10110+
},
10111+
{
10112+
\\"type\\": 3,
10113+
\\"data\\": {
10114+
\\"source\\": 0,
10115+
\\"texts\\": [],
10116+
\\"attributes\\": [
10117+
{
10118+
\\"id\\": 22,
10119+
\\"attributes\\": {
10120+
\\"value\\": \\"**********************************************************************************************\\"
10121+
}
10122+
},
10123+
{
10124+
\\"id\\": 21,
10125+
\\"attributes\\": {
10126+
\\"value\\": \\"*************************************************************************************************\\"
10127+
}
10128+
}
10129+
],
10130+
\\"removes\\": [],
10131+
\\"adds\\": []
10132+
}
10133+
},
10134+
{
10135+
\\"type\\": 3,
10136+
\\"data\\": {
10137+
\\"source\\": 0,
10138+
\\"texts\\": [],
10139+
\\"attributes\\": [
10140+
{
10141+
\\"id\\": 21,
10142+
\\"attributes\\": {
10143+
\\"value\\": \\"****************************************************************\\"
10144+
}
10145+
}
10146+
],
10147+
\\"removes\\": [],
10148+
\\"adds\\": []
10149+
}
1002510150
}
1002610151
]"
1002710152
`;

‎packages/rrweb/test/integration.test.ts

+37
Original file line numberDiff line numberDiff line change
@@ -783,9 +783,46 @@ describe('record integration tests', function (this: ISuite) {
783783

784784
const nextElement = document.querySelector('#one')!;
785785
nextElement.parentNode!.insertBefore(el, nextElement);
786+
787+
const ta = document.createElement('textarea');
788+
ta.size = 50;
789+
ta.id = 'textarea';
790+
ta.setAttribute('size', '50');
791+
ta.value = 'textarea should be masked';
792+
793+
nextElement.parentNode!.insertBefore(ta, nextElement);
786794
});
787795

788796
await page.type('#input', 'moo');
797+
await page.type('#textarea', 'boo');
798+
799+
await page.evaluate(() => {
800+
const el = document.querySelector('input');
801+
el.value = 'input attribute mutation should also be masked';
802+
803+
const ta = document.querySelector('textarea');
804+
ta.value = 'textarea attribute mutation should also be masked';
805+
});
806+
807+
await page.evaluate(() => {
808+
const el = document.querySelector('input');
809+
el.setAttribute(
810+
'value',
811+
"input attribute mutation should also be masked (even though the new value doesn't take effect)",
812+
);
813+
814+
const ta = document.querySelector('textarea');
815+
ta.setAttribute(
816+
'value',
817+
"textarea attribute mutation should also be masked (even though the new value doesn't take effect)",
818+
);
819+
});
820+
821+
await page.evaluate(() => {
822+
const ta = document.querySelector('textarea');
823+
ta.innerText =
824+
'textarea attribute mutation via innerText should also be masked ';
825+
});
789826

790827
await assertSnapshot(page);
791828
});

0 commit comments

Comments
 (0)