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

fix https://github.com/rrweb-io/rrweb-snapshot/issues/56

Browse Source 
safe access tagName of form element
This commit is contained in:
Yanzhen Yu
2020-12-21 12:37:13 +08:00
parent b6ca577f3e
commit 1cc7164f2c
3 changed files with 75 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/snapshot.ts
View File

@@ -18,8 +18,12 @@ function genId(): number {
return _id++; return _id++;
} }
function getValidTagName(tagName: string): string { function getValidTagName(element: HTMLElement): string {
const processedTagName = tagName.toLowerCase().trim(); if (element instanceof HTMLFormElement) {
return 'form';
}
const processedTagName = element.tagName.toLowerCase().trim();
if (tagNameRegex.test(processedTagName)) { if (tagNameRegex.test(processedTagName)) {
// if the tag name is odd and we cannot extract // if the tag name is odd and we cannot extract
@@ -223,7 +227,7 @@ function serializeNode(
blockClass, blockClass,
blockSelector, blockSelector,
); );
const tagName = getValidTagName((n as HTMLElement).tagName); const tagName = getValidTagName(n as HTMLElement);
let attributes: attributes = {}; let attributes: attributes = {};
for (const { name, value } of Array.from((n as HTMLElement).attributes)) { for (const { name, value } of Array.from((n as HTMLElement).attributes)) {
attributes[name] = transformAttribute(doc, name, value); attributes[name] = transformAttribute(doc, name, value);

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

@@ -102,32 +102,36 @@ exports[`[html file]: dynamic-stylesheet.html 1`] = `
exports[`[html file]: form-fields.html 1`] = ` exports[`[html file]: form-fields.html 1`] = `
"<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head> "<!DOCTYPE html><html xmlns=\\"http://www.w3.org/1999/xhtml\\" lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" /> <meta charset=\\"UTF-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" /> <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
<meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" /> <meta http-equiv=\\"X-UA-Compatible\\" content=\\"ie=edge\\" />
<title>form fields</title> <title>form fields</title>
</head><body> </head> <body>
<form> <form>
<label for=\\"text\\"> <label for=\\"text\\">
<input type=\\"text\\" value=\\"1\\" /> <input type=\\"text\\" value=\\"1\\" />
</label> </label>
<label for=\\"radio\\"> <label for=\\"radio\\">
<input type=\\"radio\\" checked=\\"\\" /> <input type=\\"radio\\" checked=\\"\\" />
</label> </label>
<label for=\\"checkbox\\"> <label for=\\"checkbox\\">
<input type=\\"checkbox\\" checked=\\"\\" /> <input type=\\"checkbox\\" checked=\\"\\" />
</label> </label>
<label for=\\"textarea\\"> <label for=\\"textarea\\">
<textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea> <textarea name=\\"\\" id=\\"\\" cols=\\"30\\" rows=\\"10\\">1234</textarea>
</label> </label>
<label for=\\"select\\"> <label for=\\"select\\">
<select name=\\"\\" id=\\"\\" value=\\"2\\"> <select name=\\"\\" id=\\"\\" value=\\"2\\">
<option value=\\"1\\">1</option> <option value=\\"1\\">1</option>
<option value=\\"2\\" selected=\\"\\">2</option> <option value=\\"2\\" selected=\\"\\">2</option>
</select> </select>
</label> </label>
</form><noscript>SCRIPT_PLACEHOLDER</noscript> <label>
</body></html>" <input name=\\"tagName\\" />
</label>
</form>
<noscript>SCRIPT_PLACEHOLDER</noscript></body></html>"
`; `;
exports[`[html file]: hover.html 1`] = ` exports[`[html file]: hover.html 1`] = `

75
test/html/form-fields.html
View File

@@ -1,41 +1,42 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <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>form fields</title>
</head>
<head> <body>
<meta charset="UTF-8"> <form>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <label for="text">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <input type="text" />
<title>form fields</title> </label>
</head> <label for="radio">
<input type="radio" />
<body> </label>
<form> <label for="checkbox">
<label for="text"> <input type="checkbox" />
<input type="text"> </label>
</label> <label for="textarea">
<label for="radio"> <textarea name="" id="" cols="30" rows="10"></textarea>
<input type="radio"> </label>
</label> <label for="select">
<label for="checkbox"> <select name="" id="">
<input type="checkbox"> <option value="1">1</option>
</label> <option value="2">2</option>
<label for="textarea"> </select>
<textarea name="" id="" cols="30" rows="10"></textarea> </label>
</label> <label>
<label for="select"> <input name="tagName" />
<select name="" id=""> </label>
<option value="1">1</option> </form>
<option value="2">2</option> </body>
</select> <script>
</label> document.querySelector('input[type="text"]').value = '1';
</form> document.querySelector('input[type="radio"]').checked = true;
</body> document.querySelector('input[type="checkbox"]').checked = true;
<script> document.querySelector('textarea').value = '1234';
document.querySelector('input[type="text"]').value = '1'; document.querySelector('select').value = '2';
document.querySelector('input[type="radio"]').checked = true; </script>
document.querySelector('input[type="checkbox"]').checked = true;
document.querySelector('textarea').value = '1234';
document.querySelector('select').value = '2';
</script>
</html> </html>