Drop support for caching xlink:href attributes

xlink:href is deprecated Most modern browsers rewrite `xlink:href` to `href` which is currently supported Tested in Firefox, Safari & Chrome
rrweb-io · Dec 15, 2023 · 29d4480 · 29d4480
1 parent b82e3a8
commit 29d4480
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 10 deletions.
diff --git a/packages/rrweb-snapshot/src/utils.ts b/packages/rrweb-snapshot/src/utils.ts
@@ -366,9 +366,9 @@ export const CACHEABLE_ELEMENT_ATTRIBUTE_COMBINATIONS = new Map([
   ['TH', new Set(['background'])],
   ['TBODY', new Set(['background'])],
   ['THEAD', new Set(['background'])],
-  ['image', new Set(['href', 'xlink:href'])],
-  ['feImage', new Set(['href', 'xlink:href'])],
-  ['cursor', new Set(['href', 'xlink:href'])],
+  ['image', new Set(['href'])],
+  ['feImage', new Set(['href'])],
+  ['cursor', new Set(['href'])],
 ]);
 
 export function isAttributeCacheable(n: Element, attribute: string): boolean {

diff --git a/packages/rrweb/src/replay/asset-manager/index.ts b/packages/rrweb/src/replay/asset-manager/index.ts
@@ -224,7 +224,6 @@ export default class AssetManager implements RebuildAssetManagerInterface {
 
           if (!attributeUnchanged) return; // attribute was changed since we started loading the asset
 
-          // TODO: use setAttributeNS for svg, see rrdom's diff for example
           node.setAttribute(attribute, status.url);
         }),
       );

diff --git a/packages/rrweb/test/record/asset.test.ts b/packages/rrweb/test/record/asset.test.ts
@@ -603,13 +603,13 @@ describe('asset caching', function (this: ISuite) {
             <input type="image" id="image" alt="Login" src="{SERVER_URL}/html/assets/robot.png?input-type-image" />
             <iframe src="{SERVER_URL}/html/assets/robot.png?iframe"></iframe>
             <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
-              <image href="{SERVER_URL}/html/assets/robot.png?svg" xlink:href="{SERVER_URL}/html/assets/robot.png?svg2" width="100" height="100" />
+              <image href="{SERVER_URL}/html/assets/robot.png?svg" width="100" height="100" />
                 <defs>
                 <filter id="image">
-                  <feImage href="{SERVER_URL}/html/assets/robot.png?svg3" xlink:href="{SERVER_URL}/html/assets/robot.png?svg4" />
+                  <feImage href="{SERVER_URL}/html/assets/robot.png?svg2" />
                 </filter>
               </defs>
-              <cursor href="{SERVER_URL}/html/assets/robot.png?svg5" xlink:href="{SERVER_URL}/html/assets/robot.png?svg6" >
+              <cursor href="{SERVER_URL}/html/assets/robot.png?svg3"  >
               <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);" />
               </cursor>
             </svg>
@@ -645,9 +645,6 @@ describe('asset caching', function (this: ISuite) {
       '{SERVER_URL}/html/assets/robot.png?svg',
       '{SERVER_URL}/html/assets/robot.png?svg2',
       '{SERVER_URL}/html/assets/robot.png?svg3',
-      '{SERVER_URL}/html/assets/robot.png?svg4',
-      '{SERVER_URL}/html/assets/robot.png?svg5',
-      '{SERVER_URL}/html/assets/robot.png?svg6',
       '{SERVER_URL}/html/assets/robot.png?table',
       '{SERVER_URL}/html/assets/robot.png?td',
     ].forEach((u) => {
-Original file line number
+Diff line change
@@ Expand Up @@
               if (!attributeUnchanged) return; // attribute was changed since we started loading the asset
-              // TODO: use setAttributeNS for svg, see rrdom's diff for example
               node.setAttribute(attribute, status.url);
             }),
           );
@@ Expand Down @@