search

getsentry / rrweb

record and replay the web
https://www.rrweb.io/
Other
9 stars 5 forks source link

fix: Mask `<option>` values for selects & radio/checkbox `value` #75

Closed mydea closed 1 year ago

mydea commented 1 year ago

This ensures we mask <option> when selects should be masked.

We mask both the value attribute as well as the text content of the <option>.

note that due to how masking work, the replay may not look completely correct. E.g. if you have the following:

<select name="" id="" value="BB">
  <option value="AA">A</option>
  <option value="BB">My B</option>
</select>

it is masked to:

<select name="" id="" value="**">
  <option value="**">*</option>
  <option value="**">****</option>
</select>

since technically both options have the same "value" now, when a user selects an option it may not reflect the longer text in the select box. However, I'd say that is OK, and better than to leak the values.

In addition, this also makes sure to mask value of radio/checkbox inputs. Note this only affects value='****' of these elements when maskAllInputs=true, not the content of their labels (which is masked via maskAllText: true).

Closes https://github.com/getsentry/rrweb/issues/74

See https://sentry-sdks.sentry.io/replays/javascript-vue-replays:7189262e513742719dbce6e5fe4556aa/?query=&referrer=%2Freplays%2F&statsPeriod=14d&yAxis=count%28%29 for a replay in action.

mydea commented 1 year ago

Also made a PR upstream for this: https://github.com/rrweb-io/rrweb/pull/1164