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);

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

@@ -106,7 +106,7 @@ exports[`[html file]: form-fields.html 1`] = `
<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\\" />
@@ -126,8 +126,12 @@ exports[`[html file]: form-fields.html 1`] = `
<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`] = `

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

@@ -1,23 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<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> </head>
<body> <body>
<form> <form>
<label for="text"> <label for="text">
<input type="text"> <input type="text" />
</label> </label>
<label for="radio"> <label for="radio">
<input type="radio"> <input type="radio" />
</label> </label>
<label for="checkbox"> <label for="checkbox">
<input type="checkbox"> <input type="checkbox" />
</label> </label>
<label for="textarea"> <label for="textarea">
<textarea name="" id="" cols="30" rows="10"></textarea> <textarea name="" id="" cols="30" rows="10"></textarea>
@@ -28,14 +27,16 @@
<option value="2">2</option> <option value="2">2</option>
</select> </select>
</label> </label>
<label>
<input name="tagName" />
</label>
</form> </form>
</body> </body>
<script> <script>
document.querySelector('input[type="text"]').value = '1'; document.querySelector('input[type="text"]').value = '1';
document.querySelector('input[type="radio"]').checked = true; document.querySelector('input[type="radio"]').checked = true;
document.querySelector('input[type="checkbox"]').checked = true; document.querySelector('input[type="checkbox"]').checked = true;
document.querySelector('textarea').value = '1234'; document.querySelector('textarea').value = '1234';
document.querySelector('select').value = '2'; document.querySelector('select').value = '2';
</script> </script>
</html> </html>