Add ability to mask passwords (#494)
* add ability to mask passwords * remove duplicate mask snapshot * make sure only one click happens at a time
This commit is contained in:
Justin Halsall
54
guide.md
54
guide.md
@@ -135,28 +135,28 @@ setInterval(save, 10 * 1000);
|
||||
|
||||
The parameter of `rrweb.record` accepts the following options.
|
||||
|
||||
| key | default | description |
|
||||
| ---------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| emit | required | the callback function to get emitted events |
|
||||
| checkoutEveryNth | - | take a full snapshot after every N events<br />refer to the [checkout](#checkout) chapter |
|
||||
| checkoutEveryNms | - | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter |
|
||||
| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
|
||||
| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
|
||||
| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
|
||||
| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
|
||||
| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
|
||||
| maskAllInputs | false | mask all input content as \* |
|
||||
| maskInputOptions | {} | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
|
||||
| maskInputFn | - | customize mask input content recording logic |
|
||||
| maskTextFn | - | customize mask text content recording logic |
|
||||
| slimDOMOptions | {} | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91) |
|
||||
| inlineStylesheet | true | whether to inline the stylesheet in the events |
|
||||
| hooks | {} | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
|
||||
| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
|
||||
| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
|
||||
| recordCanvas | false | whether to record the canvas element |
|
||||
| collectFonts | false | whether to collect fonts in the website |
|
||||
| recordLog | false | whether to record console output, refer to the [console recipe](./docs/recipes/console.md) |
|
||||
| key | default | description |
|
||||
| ---------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| emit | required | the callback function to get emitted events |
|
||||
| checkoutEveryNth | - | take a full snapshot after every N events<br />refer to the [checkout](#checkout) chapter |
|
||||
| checkoutEveryNms | - | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter |
|
||||
| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
|
||||
| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
|
||||
| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
|
||||
| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
|
||||
| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
|
||||
| maskAllInputs | false | mask all input content as \* |
|
||||
| maskInputOptions | { password: true } | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L72) |
|
||||
| maskInputFn | - | customize mask input content recording logic |
|
||||
| maskTextFn | - | customize mask text content recording logic |
|
||||
| slimDOMOptions | {} | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb-snapshot/blob/6728d12b3cddd96951c86d948578f99ada5749ff/src/types.ts#L91) |
|
||||
| inlineStylesheet | true | whether to inline the stylesheet in the events |
|
||||
| hooks | {} | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
|
||||
| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
|
||||
| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
|
||||
| recordCanvas | false | whether to record the canvas element |
|
||||
| collectFonts | false | whether to collect fonts in the website |
|
||||
| recordLog | false | whether to record console output, refer to the [console recipe](./docs/recipes/console.md) |
|
||||
|
||||
#### Privacy
|
||||
|
||||
@@ -164,9 +164,9 @@ You may find some contents on the webpage which are not willing to be recorded,
|
||||
|
||||
- An element with the class name `.rr-block` will not be recorded. Instead, it will replay as a placeholder with the same dimension.
|
||||
- An element with the class name `.rr-ignore` will not record its input events.
|
||||
- `input[type="password"]` will be ignored as default.
|
||||
- Mask options to mask the content in input elements.
|
||||
- A text of elements with the class name `.rr-mask` and its children will be masked.
|
||||
- `input[type="password"]` will be masked by default.
|
||||
- All text of elements with the class name `.rr-mask` and their children will be masked.
|
||||
|
||||
#### Checkout
|
||||
|
||||
@@ -294,7 +294,7 @@ The replayer accepts options as its constructor's second parameter, and it has t
|
||||
| showDebug | false | whether to print debug messages during replay |
|
||||
| blockClass | 'rr-block' | element with the class name will display as a blocked area |
|
||||
| liveMode | false | whether to enable live mode |
|
||||
| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
|
||||
| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
|
||||
| triggerFocus | true | whether to trigger focus during replay |
|
||||
| UNSAFE_replayCanvas | false | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
|
||||
| mouseTail | true | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
|
||||
@@ -380,8 +380,8 @@ The rrweb-replayer also re-expose the event listener via a `component.addEventLi
|
||||
|
||||
And there are three rrweb-replayer event will be emitted in the same way:
|
||||
|
||||
| Event | Description | Value |
|
||||
| ---------------------- | -------------------------------- | ----------------------- |
|
||||
| Event | Description | Value |
|
||||
| ---------------------- | -------------------------------- | ----------- |
|
||||
| ui-update-current-time | current time has changed | { payload } |
|
||||
| ui-update-player-state | current player state has changed | { payload } |
|
||||
| ui-update-progress | current progress has changed | { payload } |
|
||||
|
||||
Reference in New Issue
Block a user