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

resolve #1 add ignore and block strategy for privacy purpose

Browse Source
This commit is contained in:
Yanzhen Yu
2018-12-02 23:23:21 +08:00
parent 78967192fc
commit 2c9db926c0
6 changed files with 324 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -54,6 +54,6 @@
}, },
"dependencies": { "dependencies": {
"mitt": "^1.1.3", "mitt": "^1.1.3",
"rrweb-snapshot": "^0.6.8" "rrweb-snapshot": "^0.6.10"
} }
} }

7
src/record/observer.ts
View File

@@ -291,6 +291,7 @@ const HOOK_PROPERTIES: Array<[HTMLElement, string]> = [
[HTMLSelectElement.prototype, 'value'], [HTMLSelectElement.prototype, 'value'],
[HTMLTextAreaElement.prototype, 'value'], [HTMLTextAreaElement.prototype, 'value'],
]; ];
const IGNORE_CLASS = 'rr-ignore';
const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap(); const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap();
function initInputObserver(cb: inputCallback): listenerHandler { function initInputObserver(cb: inputCallback): listenerHandler {
function eventHandler(event: Event) { function eventHandler(event: Event) {
@@ -303,6 +304,12 @@ function initInputObserver(cb: inputCallback): listenerHandler {
return; return;
} }
const type: string | undefined = (target as HTMLInputElement).type; const type: string | undefined = (target as HTMLInputElement).type;
if (
type === 'password' ||
(target as HTMLElement).classList.contains(IGNORE_CLASS)
) {
return;
}
const text = (target as HTMLInputElement).value; const text = (target as HTMLInputElement).value;
let isChecked = false; let isChecked = false;
if (type === 'radio' || type === 'checkbox') { if (type === 'radio' || type === 'checkbox') {

2
src/replay/styles/inject-style.ts
View File

@@ -1,5 +1,5 @@
const rules: string[] = [ const rules: string[] = [
'iframe { background: #ccc }', 'iframe, .rr-block { background: #ccc }',
'noscript { display: none !important; }', 'noscript { display: none !important; }',
]; ];

282
test/__snapshots__/integration.test.ts.snap
View File

@@ -1200,6 +1200,288 @@ exports[`form 1`] = `
]" ]"
`; `;
exports[`ignore 1`] = `
"[
{
\\"type\\": 0,
\\"data\\": {},
\\"timestamp\\": 1542268800000
},
{
\\"type\\": 1,
\\"data\\": {},
\\"timestamp\\": 1542268800000
},
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
},
\\"timestamp\\": 1542268800000
},
{
\\"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\\": \\"ignore fields\\",
\\"id\\": 13
}
],
\\"id\\": 12
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 14
}
],
\\"id\\": 4
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n\\\\n \\",
\\"id\\": 15
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 17
},
{
\\"type\\": 2,
\\"tagName\\": \\"form\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 19
},
{
\\"type\\": 2,
\\"tagName\\": \\"label\\",
\\"attributes\\": {
\\"for\\": \\"password\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\" \\",
\\"id\\": 21
},
{
\\"type\\": 2,
\\"tagName\\": \\"input\\",
\\"attributes\\": {
\\"type\\": \\"password\\"
},
\\"childNodes\\": [],
\\"id\\": 22
},
{
\\"type\\": 3,
\\"textContent\\": \\" \\",
\\"id\\": 23
}
],
\\"id\\": 20
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 24
},
{
\\"type\\": 2,
\\"tagName\\": \\"label\\",
\\"attributes\\": {
\\"for\\": \\"ignore text\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\" \\",
\\"id\\": 26
},
{
\\"type\\": 2,
\\"tagName\\": \\"input\\",
\\"attributes\\": {
\\"type\\": \\"text\\",
\\"class\\": \\"rr-ignore\\"
},
\\"childNodes\\": [],
\\"id\\": 27
},
{
\\"type\\": 3,
\\"textContent\\": \\" \\",
\\"id\\": 28
}
],
\\"id\\": 25
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 29
}
],
\\"id\\": 18
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\",
\\"id\\": 30
},
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 32
}
],
\\"id\\": 31
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\",
\\"id\\": 33
}
],
\\"id\\": 16
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
},
\\"timestamp\\": 1542268800000
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 5,
\\"id\\": 22
},
\\"timestamp\\": 1542268800000
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 6,
\\"id\\": 22
},
\\"timestamp\\": 1542268800000
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 2,
\\"type\\": 5,
\\"id\\": 27
},
\\"timestamp\\": 1542268800000
}
]"
`;
exports[`select2 1`] = ` exports[`select2 1`] = `
"[ "[
{ {

16
test/html/ignore.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ignore fields</title>
</head>
<body>
<form>
<label for="password"> <input type="password" /> </label>
<label for="ignore text"> <input type="text" class="rr-ignore" /> </label>
</form>
</body>
</html>

17
test/integration.test.ts
View File

@@ -230,4 +230,21 @@ describe('record integration tests', () => {
); );
assert(result.pass, result.pass ? '' : result.report()); assert(result.pass, result.pass ? '' : result.report());
}).timeout(10000); }).timeout(10000);
it('should not record input events on ignored elements', async () => {
const page: puppeteer.Page = await this.browser.newPage();
await page.goto('about:blank');
await page.setContent(getHtml.call(this, 'ignore.html'));
await page.type('input[type="password"]', 'password');
await page.type('.rr-ignore', 'secret');
const snapshots = await page.evaluate('window.snapshots');
const result = matchSnapshot(
stringifySnapshots(snapshots),
__filename,
'ignore',
);
assert(result.pass, result.pass ? '' : result.report());
});
}); });