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

do not transform xlink:href when the value is an id

Browse Source 
close #566, #741
This commit is contained in:
Yanzhen Yu
2021-10-31 11:24:41 +08:00
parent e039b5ca74
commit 18d66dca7c
4 changed files with 108 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/rrweb-snapshot/src/snapshot.ts
View File

@@ -13,6 +13,7 @@ import {
documentNode,
} from './types';
import { isElement, isShadowRoot, maskInputValue } from './utils';
import { values } from 'puppeteer/DeviceDescriptors';
let _id = 1;
const tagNameRegex = RegExp('[^a-z0-9-_:]');
@@ -218,7 +219,10 @@ export function transformAttribute(
value: string,
): string {
// relative path in attribute
if (name === 'src' || ((name === 'href' || name === 'xlink:href') && value)) {
if (name === 'src' || (name === 'href' && value)) {
return absoluteToDoc(doc, value);
} else if (name === 'xlink:href' && value && value[0] !== '#') {
// xlink:href starts with # is an id pointer
return absoluteToDoc(doc, value);
} else if (
name === 'background' &&
@@ -384,15 +388,15 @@ function serializeNode(
return {
type: NodeType.Document,
childNodes: [],
compatMode: (n as HTMLDocument).compatMode, // probably "BackCompat"
compatMode: (n as HTMLDocument).compatMode, // probably "BackCompat"
rootId,
}
};
} else {
return {
type: NodeType.Document,
childNodes: [],
rootId,
}
};
}
case n.DOCUMENT_TYPE_NODE:
return {
@@ -514,7 +518,7 @@ function serializeNode(
// preserve the src attribute so a decision can be taken at replay time
attributes.rr_src = attributes.src;
}
delete attributes.src; // prevent auto loading
delete attributes.src; // prevent auto loading
}
return {
type: NodeType.Element,

33
packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
View File

@@ -402,6 +402,39 @@ exports[`integration tests [html file]: shadow-dom.html 1`] = `
</body></html>"
`;
exports[`integration tests [html file]: svg.html 1`] = `
"<!DOCTYPE html><html><head>
<title>IcoMoon - SVG Icons</title>
<meta charset=\\"utf-8\\" />
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" />
</head>
<body>
<div class=\\"clearfix mhl ptl\\">
<h1 class=\\"mvm mtn fgc1\\">Grid Size: 0</h1>
<div class=\\"glyph fs1\\">
<div class=\\"clearfix pbs\\">
<svg xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"Icon Icon-behance\\">
<use xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xlink:href=\\"http://localhost:3030/images/symbol-defs.svg#Icon-behance\\"/></svg><span class=\\"name\\"> Icon-behance</span>
</div>
</div>
<div class=\\"glyph fs1\\">
<div class=\\"clearfix pbs\\">
<svg xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"Icon Icon-linkedin\\">
<use xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xlink:href=\\"http://localhost:3030/images/symbol-defs.svg#Icon-linkedin\\"/></svg><span class=\\"name\\"> Icon-linkedin</span>
</div>
</div>
</div>
<svg xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 -1035.6284324052635 9227.414882379479 1501.846702397534\\">
<defs>
<path id=\\"MJMAIN-39\\" stroke-width=\\"10\\" d=\\"M352 287Q304 211 232 211Q154 211 104 270T44 396Q42 412 42 436V444Q42 537 111 606Q171 666 243 666Q245 666 249 666T257 665H261Q273 665 286 663T323 651T370 619T413 560Q456 472 456 334Q456 194 396 97Q361 41 312 10T208 -22Q147 -22 108 7T68 93T121 149Q143 149 158 135T173 96Q173 78 164 65T148 49T135 44L131 43Q131 41 138 37T164 27T206 22H212Q272 22 313 86Q352 142 352 280V287ZM244 248Q292 248 321 297T351 430Q351 508 343 542Q341 552 337 562T323 588T293 615T246 625Q208 625 181 598Q160 576 154 546T147 441Q147 358 152 329T172 282Q197 248 244 248Z\\"/>
</defs>
<g stroke=\\"black\\" fill=\\"black\\" stroke-width=\\"0\\" transform=\\"matrix(1 0 0 -1 0 0)\\">
<use xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" xlink:href=\\"#MJMAIN-39\\" x=\\"394\\" y=\\"0\\"/>
</g>
</svg>
</body></html>"
`;
exports[`integration tests [html file]: video.html 1`] = `
"<!DOCTYPE html><html lang=\\"en\\"><head>
<meta charset=\\"UTF-8\\" />

54
packages/rrweb-snapshot/test/html/svg.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>IcoMoon - SVG Icons</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 0</h1>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="Icon Icon-behance">
<use xlink:href="../images/symbol-defs.svg#Icon-behance"></use></svg
><span class="name"> Icon-behance</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="Icon Icon-linkedin">
<use
xlink:href="../images/symbol-defs.svg#Icon-linkedin"
></use></svg
><span class="name"> Icon-linkedin</span>
</div>
</div>
</div>
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 -1035.6284324052635 9227.414882379479 1501.846702397534"
>
<defs>
<path
id="MJMAIN-39"
stroke-width="10"
d="M352 287Q304 211 232 211Q154 211 104 270T44 396Q42 412 42 436V444Q42 537 111 606Q171 666 243 666Q245 666 249 666T257 665H261Q273 665 286 663T323 651T370 619T413 560Q456 472 456 334Q456 194 396 97Q361 41 312 10T208 -22Q147 -22 108 7T68 93T121 149Q143 149 158 135T173 96Q173 78 164 65T148 49T135 44L131 43Q131 41 138 37T164 27T206 22H212Q272 22 313 86Q352 142 352 280V287ZM244 248Q292 248 321 297T351 430Q351 508 343 542Q341 552 337 562T323 588T293 615T246 625Q208 625 181 598Q160 576 154 546T147 441Q147 358 152 329T172 282Q197 248 244 248Z"
></path>
</defs>
<g
stroke="black"
fill="black"
stroke-width="0"
transform="matrix(1 0 0 -1 0 0)"
>
<use
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="#MJMAIN-39"
x="394"
y="0"
></use>
</g>
</svg>
</body>
</html>

12
packages/rrweb-snapshot/test/images/symbol-defs.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="Icon-behance" viewBox="0 0 32 32">
<title>behance</title>
<path d="M27.657 9.6c0.343 0 0.571-0.229 0.571-0.571v-1.6c0-0.343-0.229-0.571-0.571-0.571h-6.629c-0.343 0-0.571 0.229-0.571 0.571v1.6c0 0.343 0.229 0.571 0.571 0.571h6.629zM24.571 14.171c1.371 0 2.514 0.686 3.2 1.829h-6.4c0.686-1.143 1.829-1.829 3.2-1.829zM32 18.171c0-4.229-3.314-7.657-7.429-7.657s-7.429 3.429-7.429 7.657c0 4.229 3.314 7.657 7.429 7.657 2.514 0 4.8-1.257 6.171-3.429 0.229-0.229 0.343-0.571 0.457-0.8s0-0.457-0.229-0.457h-3.657c-0.114 0-0.114 0-0.229 0.114-0.686 0.686-1.486 1.029-2.514 1.029-1.829 0-3.314-1.371-3.657-3.2h10.4c0.457 0 0.686-0.343 0.686-0.686v-0.229zM9.943 21.943h-6.4v-5.143h6.4c1.371 0 2.514 1.143 2.514 2.514 0.114 1.486-1.029 2.629-2.514 2.629zM3.543 9.714h5.371c1.029 0 1.829 0.8 1.829 1.829s-0.8 1.829-1.829 1.829h-5.371v-3.657zM13.486 14.4c0.571-0.914 0.914-1.943 0.8-2.971 0-2.971-2.514-5.257-5.486-5.257h-8.114c-0.343 0-0.686 0.343-0.686 0.686v18.171c0 0.343 0.343 0.686 0.686 0.686h9.257c3.429 0 6.286-2.743 6.286-6.171-0.114-2.171-1.143-4-2.743-5.143z"></path>
</symbol>
<symbol id="Icon-linkedin" viewBox="0 0 32 32">
<title>linkedin</title>
<path d="M32 19.52v11.84h-6.88v-11.040c0-2.72-0.96-4.64-3.52-4.64-1.92 0-3.040 1.28-3.52 2.56-0.16 0.48-0.16 1.12-0.16 1.6v11.52h-6.88c0 0 0.16-18.72 0-20.64h6.88v2.88c0 0 0 0 0 0v0 0c0.96-1.44 2.56-3.36 6.24-3.36 4.48 0 7.84 2.88 7.84 9.28zM3.84 0.64c-2.24 0-3.84 1.6-3.84 3.68 0 1.92 1.44 3.52 3.84 3.52v0c2.4 0 3.84-1.6 3.84-3.52 0-2.080-1.44-3.68-3.84-3.68zM0.48 31.36h6.88v-20.64h-6.88v20.64z"></path>
</symbol>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB