fix highlight-mask image obfuscation

packages/rrdom-nodejs/package.json

@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@highlight-run/rrdom": "0.1.17",
-    "@highlight-run/rrweb-snapshot": "1.1.28",
+    "@highlight-run/rrweb-snapshot": "1.1.30",
     "cssom": "^0.5.0",
     "cssstyle": "^2.3.0",
     "nwsapi": "^2.2.0"

packages/rrdom/package.json

@@ -46,7 +46,7 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "@highlight-run/rrweb-snapshot": "1.1.28"
+    "@highlight-run/rrweb-snapshot": "1.1.30"
   },
   "gitHead": "d5751f9e6c52a7734597c8595caa763d0f4dd4ad"
 }

packages/rrweb-player/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb-player",
-  "version": "0.7.24",
+  "version": "0.7.25",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
@@ -23,7 +23,7 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "@highlight-run/rrweb": "2.1.2",
+    "@highlight-run/rrweb": "2.1.7",
     "@tsconfig/svelte": "^1.0.1"
   },
   "scripts": {

packages/rrweb-snapshot/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb-snapshot",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",

packages/rrweb-snapshot/src/snapshot.ts

@@ -677,9 +677,8 @@ function serializeElementNode(
     enableStrictPrivacy,
     rootId,
   } = options;
-  let needBlock =
-    _isBlockedElement(n, blockClass, blockSelector) ||
-    _isBlockedElement(n, maskTextClass, null);
+  let needBlock = _isBlockedElement(n, blockClass, blockSelector);
+  const needMask = _isBlockedElement(n, maskTextClass, null);
   const tagName = getValidTagName(n);
   let attributes: attributes = {};
   const len = n.attributes.length;
@@ -784,7 +783,13 @@ function serializeElementNode(
     }
   }
   // save image offline
-  if (tagName === 'img' && inlineImages && !needBlock) {
+  if (
+    tagName === 'img' &&
+    inlineImages &&
+    !needBlock &&
+    !needMask &&
+    !enableStrictPrivacy
+  ) {
     if (!canvasService) {
       canvasService = doc.createElement('canvas');
       canvasCtx = canvasService.getContext('2d');
@@ -835,14 +840,16 @@ function serializeElementNode(
     }
   }
   // block element
-  if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
+  if (needBlock || needMask || (tagName === 'img' && enableStrictPrivacy)) {
     const { width, height } = n.getBoundingClientRect();
     attributes = {
       class: attributes.class,
       rr_width: `${width}px`,
       rr_height: `${height}px`,
     };
-    needBlock = true;
+    if (enableStrictPrivacy) {
+      needBlock = true;
+    }
   }
   // iframe
   if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src as string)) {
@@ -853,9 +860,6 @@ function serializeElementNode(
     }
     delete attributes.src; // prevent auto loading
   }
-  if (needBlock && tagName === 'img') {
-    delete attributes.src; // delete image src
-  }
 
   return {
     type: NodeType.Element,
@@ -864,6 +868,7 @@ function serializeElementNode(
     childNodes: [],
     isSVG: isSVGElement(n as Element) || undefined,
     needBlock,
+    needMask,
     rootId,
   };
 }
@@ -1082,7 +1087,10 @@ export function serializeNodeWithId(
   let strictPrivacy = enableStrictPrivacy;
   if (serializedNode.type === NodeType.Element) {
     recordChild = recordChild && !serializedNode.needBlock;
-    strictPrivacy = !!serializedNode.needBlock;
+    strictPrivacy =
+      enableStrictPrivacy ||
+      !!serializedNode.needBlock ||
+      !!serializedNode.needMask;
 
     /** Highlight Code Begin */
     // Remove the image's src if enableStrictPrivacy.
@@ -1093,8 +1101,9 @@ export function serializeNodeWithId(
     }
     /** Highlight Code End */
 
-    // this property was not needed in replay side
+    // these properties was not needed in replay side
     delete serializedNode.needBlock;
+    delete serializedNode.needMask;
     const shadowRoot = (n as HTMLElement).shadowRoot;
     if (shadowRoot && isNativeShadowDom(shadowRoot))
       serializedNode.isShadowHost = true;

packages/rrweb-snapshot/src/types.ts

@@ -30,6 +30,7 @@ export type elementNode = {
   childNodes: serializedNodeWithId[];
   isSVG?: true;
   needBlock?: boolean;
+  needMask?: boolean;
 };
 
 export type textNode = {

packages/rrweb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@highlight-run/rrdom": "0.1.17",
-    "@highlight-run/rrweb-snapshot": "1.1.28",
+    "@highlight-run/rrweb-snapshot": "1.1.30",
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
     "base64-arraybuffer": "^1.0.1",

yarn.lock

@@ -517,24 +517,6 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@highlight-run/[email protected]":
-  version "1.1.25"
-  resolved "https://registry.yarnpkg.com/@highlight-run/rrweb-snapshot/-/rrweb-snapshot-1.1.25.tgz#7327d326d634f861457a6cfd012ca2ff84ce8e37"
-  integrity sha512-KLyFRmB3BolxvaQ7eF19OT1sIgxxZl/MsdKZOHTrXeRF7rt14ujMki3+1WuDBeGS2a1PTooMW6ac+vZps4xwLg==
-
-"@highlight-run/[email protected]":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@highlight-run/rrweb/-/rrweb-2.1.2.tgz#96772d9f651a1a3a12b0ae16738d3857f63a8760"
-  integrity sha512-PVuPaHfEwTYiTrZSBMCqq6873SEKnYJImNE6eEu2q8MzwQdOUj2gDDSThcsuXwXZQII9kiKnDJfwN4NwCEIYCw==
-  dependencies:
-    "@highlight-run/rrdom" "0.1.17"
-    "@highlight-run/rrweb-snapshot" "1.1.25"
-    "@types/css-font-loading-module" "0.0.7"
-    "@xstate/fsm" "^1.4.0"
-    base64-arraybuffer "^1.0.1"
-    fflate "^0.4.4"
-    mitt "^3.0.0"
-
 "@humanwhocodes/config-array@^0.9.2":
   version "0.9.5"
   resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz"