-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Better masking of option/radio/checkbox values #1164
base: master
Are you sure you want to change the base?
Conversation
🦋 Changeset detectedLatest commit: b310e6f The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
packages/rrweb-snapshot/src/utils.ts
Outdated
// Handle `option` like `select | ||
if (tagName.toLowerCase() === 'option') { | ||
tagName = 'select'; | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This method always gets an upper case tagName, keeping it upper case would save us one toLowerCase
call, slightly improving performance
// Handle `option` like `select | |
if (tagName.toLowerCase() === 'option') { | |
tagName = 'select'; | |
} | |
// Handle `option` like `select | |
if (tagName === 'OPTION') { | |
tagName = 'SELECT'; | |
} | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I wasn't quite sure here myself, as sometimes tagNames are passed as lowercase, sometimes as uppercase strings 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oops, actually it is not always lowercase (which nicely the tests caught!).
I've actually changed the type to use Uppercase
to ensure that the correct case is passed in. This is supported since TS 4.1, is this OK?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry for the late review. There are so many changes to the Jest snapshot files so I took some time to check them.
I may find an issue with masking radio/checkbox elements. It would be nice to check them. I'm willing to merge this PR after then.
@@ -7955,17 +8174,26 @@ exports[`record integration tests should not record input values if maskAllInput | |||
\\"type\\": 3, | |||
\\"data\\": { | |||
\\"source\\": 5, | |||
\\"text\\": \\"off\\", | |||
\\"text\\": \\"radio-on\\", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I may find a bug for masking radio input. In this test, the value "radio-on" is masked in the full snapshot however its actual value is exposed in the input mutation event here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
found the culprit and fixed it! 🎉
\\"type\\": 3, | ||
\\"data\\": { | ||
\\"source\\": 5, | ||
\\"text\\": \\"radio-off\\", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here.
5026175
to
f36b26c
Compare
4a07be3
to
9aa9fbf
Compare
I rebased & updated this PR on latest master! |
9aa9fbf
to
b310e6f
Compare
This PR improves masking via
maskAllInputs
for:<option>
elements as part of<select>
<input type="checkbox">
<input type="radio">
What is masked
For radio/checkbox, we only mask the
value="xxx"
attribute. So for example:becomes
If no value is specified, nothing is added.
For
option
tags, we mask both thevalue
attribute on them (so they also match the value of theselect
), as well as the content of the option - this is IMHO more in line with text input masking than to leave the displayed text.becomes