@highlight-run/rrweb 2.1.3 → 2.1.6

package/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js

@@ -571,8 +571,8 @@ function serializeTextNode(n, options) {
 }
 function serializeElementNode(n, options) {
     var doc = options.doc, blockClass = options.blockClass, blockSelector = options.blockSelector, inlineStylesheet = options.inlineStylesheet, _a = options.maskInputOptions, maskInputOptions = _a === void 0 ? {} : _a, maskInputFn = options.maskInputFn, maskTextClass = options.maskTextClass, _b = options.dataURLOptions, dataURLOptions = _b === void 0 ? {} : _b, inlineImages = options.inlineImages, recordCanvas = options.recordCanvas, keepIframeSrcFn = options.keepIframeSrcFn, _c = options.newlyAddedElement, newlyAddedElement = _c === void 0 ? false : _c, enableStrictPrivacy = options.enableStrictPrivacy, rootId = options.rootId;
-    var needBlock = _isBlockedElement(n, blockClass, blockSelector) ||
-        _isBlockedElement(n, maskTextClass, blockSelector);
+    var needBlock = _isBlockedElement(n, blockClass, blockSelector);
+    var needMask = _isBlockedElement(n, maskTextClass, null);
     var tagName = getValidTagName(n);
     var attributes = {};
     var len = n.attributes.length;
@@ -646,7 +646,7 @@ function serializeElementNode(n, options) {
             }
         }
     }
-    if (tagName === 'img' && inlineImages) {
+    if (tagName === 'img' && inlineImages && !needBlock && !needMask) {
         if (!canvasService) {
             canvasService = doc.createElement('canvas');
             canvasCtx = canvasService.getContext('2d');
@@ -687,14 +687,16 @@ function serializeElementNode(n, options) {
             attributes.rr_scrollTop = n.scrollTop;
         }
     }
-    if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
+    if (needBlock || needMask || (tagName === 'img' && enableStrictPrivacy)) {
         var _d = n.getBoundingClientRect(), width = _d.width, height = _d.height;
         attributes = {
             "class": attributes["class"],
             rr_width: "".concat(width, "px"),
             rr_height: "".concat(height, "px")
         };
-        needBlock = true;
+        if (enableStrictPrivacy) {
+            needBlock = true;
+        }
     }
     if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src)) {
         if (!n.contentDocument) {
@@ -709,6 +711,7 @@ function serializeElementNode(n, options) {
         childNodes: [],
         isSVG: isSVGElement(n) || undefined,
         needBlock: needBlock,
+        needMask: needMask,
         rootId: rootId
     };
 }
@@ -839,14 +842,20 @@ function serializeNodeWithId(n, options) {
         onSerialize(n);
     }
     var recordChild = !skipChild;
+    var strictPrivacy = enableStrictPrivacy;
     if (serializedNode.type === NodeType.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
-        if (serializedNode.needBlock && serializedNode.tagName === 'img') {
+        strictPrivacy =
+            enableStrictPrivacy ||
+                !!serializedNode.needBlock ||
+                !!serializedNode.needMask;
+        if (strictPrivacy && serializedNode.tagName === 'img') {
             var clone = n.cloneNode();
             clone.src = '';
             mirror.add(clone, serializedNode);
         }
         delete serializedNode.needBlock;
+        delete serializedNode.needMask;
         var shadowRoot = n.shadowRoot;
         if (shadowRoot && isNativeShadowDom(shadowRoot))
             serializedNode.isShadowHost = true;
@@ -882,7 +891,7 @@ function serializeNodeWithId(n, options) {
             onStylesheetLoad: onStylesheetLoad,
             stylesheetLoadTimeout: stylesheetLoadTimeout,
             keepIframeSrcFn: keepIframeSrcFn,
-            enableStrictPrivacy: enableStrictPrivacy
+            enableStrictPrivacy: strictPrivacy
         };
         for (var _i = 0, _m = Array.from(n.childNodes); _i < _m.length; _i++) {
             var childN = _m[_i];

package/lib/record/rrweb-record.js

@@ -573,8 +573,8 @@ function serializeTextNode(n, options) {
 }
 function serializeElementNode(n, options) {
     var doc = options.doc, blockClass = options.blockClass, blockSelector = options.blockSelector, inlineStylesheet = options.inlineStylesheet, _a = options.maskInputOptions, maskInputOptions = _a === void 0 ? {} : _a, maskInputFn = options.maskInputFn, maskTextClass = options.maskTextClass, _b = options.dataURLOptions, dataURLOptions = _b === void 0 ? {} : _b, inlineImages = options.inlineImages, recordCanvas = options.recordCanvas, keepIframeSrcFn = options.keepIframeSrcFn, _c = options.newlyAddedElement, newlyAddedElement = _c === void 0 ? false : _c, enableStrictPrivacy = options.enableStrictPrivacy, rootId = options.rootId;
-    var needBlock = _isBlockedElement(n, blockClass, blockSelector) ||
-        _isBlockedElement(n, maskTextClass, blockSelector);
+    var needBlock = _isBlockedElement(n, blockClass, blockSelector);
+    var needMask = _isBlockedElement(n, maskTextClass, null);
     var tagName = getValidTagName(n);
     var attributes = {};
     var len = n.attributes.length;
@@ -648,7 +648,7 @@ function serializeElementNode(n, options) {
             }
         }
     }
-    if (tagName === 'img' && inlineImages) {
+    if (tagName === 'img' && inlineImages && !needBlock && !needMask) {
         if (!canvasService) {
             canvasService = doc.createElement('canvas');
             canvasCtx = canvasService.getContext('2d');
@@ -689,14 +689,16 @@ function serializeElementNode(n, options) {
             attributes.rr_scrollTop = n.scrollTop;
         }
     }
-    if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
+    if (needBlock || needMask || (tagName === 'img' && enableStrictPrivacy)) {
         var _d = n.getBoundingClientRect(), width = _d.width, height = _d.height;
         attributes = {
             "class": attributes["class"],
             rr_width: "".concat(width, "px"),
             rr_height: "".concat(height, "px")
         };
-        needBlock = true;
+        if (enableStrictPrivacy) {
+            needBlock = true;
+        }
     }
     if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src)) {
         if (!n.contentDocument) {
@@ -711,6 +713,7 @@ function serializeElementNode(n, options) {
         childNodes: [],
         isSVG: isSVGElement(n) || undefined,
         needBlock: needBlock,
+        needMask: needMask,
         rootId: rootId
     };
 }
@@ -841,14 +844,20 @@ function serializeNodeWithId(n, options) {
         onSerialize(n);
     }
     var recordChild = !skipChild;
+    var strictPrivacy = enableStrictPrivacy;
     if (serializedNode.type === NodeType.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
-        if (serializedNode.needBlock && serializedNode.tagName === 'img') {
+        strictPrivacy =
+            enableStrictPrivacy ||
+                !!serializedNode.needBlock ||
+                !!serializedNode.needMask;
+        if (strictPrivacy && serializedNode.tagName === 'img') {
             var clone = n.cloneNode();
             clone.src = '';
             mirror.add(clone, serializedNode);
         }
         delete serializedNode.needBlock;
+        delete serializedNode.needMask;
         var shadowRoot = n.shadowRoot;
         if (shadowRoot && isNativeShadowDom(shadowRoot))
             serializedNode.isShadowHost = true;
@@ -884,7 +893,7 @@ function serializeNodeWithId(n, options) {
             onStylesheetLoad: onStylesheetLoad,
             stylesheetLoadTimeout: stylesheetLoadTimeout,
             keepIframeSrcFn: keepIframeSrcFn,
-            enableStrictPrivacy: enableStrictPrivacy
+            enableStrictPrivacy: strictPrivacy
         };
         for (var _i = 0, _m = Array.from(n.childNodes); _i < _m.length; _i++) {
             var childN = _m[_i];

package/lib/rrweb-all.js

@@ -575,8 +575,8 @@ function serializeTextNode(n, options) {
 }
 function serializeElementNode(n, options) {
     var doc = options.doc, blockClass = options.blockClass, blockSelector = options.blockSelector, inlineStylesheet = options.inlineStylesheet, _a = options.maskInputOptions, maskInputOptions = _a === void 0 ? {} : _a, maskInputFn = options.maskInputFn, maskTextClass = options.maskTextClass, _b = options.dataURLOptions, dataURLOptions = _b === void 0 ? {} : _b, inlineImages = options.inlineImages, recordCanvas = options.recordCanvas, keepIframeSrcFn = options.keepIframeSrcFn, _c = options.newlyAddedElement, newlyAddedElement = _c === void 0 ? false : _c, enableStrictPrivacy = options.enableStrictPrivacy, rootId = options.rootId;
-    var needBlock = _isBlockedElement(n, blockClass, blockSelector) ||
-        _isBlockedElement(n, maskTextClass, blockSelector);
+    var needBlock = _isBlockedElement(n, blockClass, blockSelector);
+    var needMask = _isBlockedElement(n, maskTextClass, null);
     var tagName = getValidTagName$1(n);
     var attributes = {};
     var len = n.attributes.length;
@@ -650,7 +650,7 @@ function serializeElementNode(n, options) {
             }
         }
     }
-    if (tagName === 'img' && inlineImages) {
+    if (tagName === 'img' && inlineImages && !needBlock && !needMask) {
         if (!canvasService) {
             canvasService = doc.createElement('canvas');
             canvasCtx = canvasService.getContext('2d');
@@ -691,14 +691,16 @@ function serializeElementNode(n, options) {
             attributes.rr_scrollTop = n.scrollTop;
         }
     }
-    if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
+    if (needBlock || needMask || (tagName === 'img' && enableStrictPrivacy)) {
         var _d = n.getBoundingClientRect(), width = _d.width, height = _d.height;
         attributes = {
             "class": attributes["class"],
             rr_width: "".concat(width, "px"),
             rr_height: "".concat(height, "px")
         };
-        needBlock = true;
+        if (enableStrictPrivacy) {
+            needBlock = true;
+        }
     }
     if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src)) {
         if (!n.contentDocument) {
@@ -713,6 +715,7 @@ function serializeElementNode(n, options) {
         childNodes: [],
         isSVG: isSVGElement(n) || undefined,
         needBlock: needBlock,
+        needMask: needMask,
         rootId: rootId
     };
 }
@@ -843,14 +846,20 @@ function serializeNodeWithId(n, options) {
         onSerialize(n);
     }
     var recordChild = !skipChild;
+    var strictPrivacy = enableStrictPrivacy;
     if (serializedNode.type === NodeType$2.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
-        if (serializedNode.needBlock && serializedNode.tagName === 'img') {
+        strictPrivacy =
+            enableStrictPrivacy ||
+                !!serializedNode.needBlock ||
+                !!serializedNode.needMask;
+        if (strictPrivacy && serializedNode.tagName === 'img') {
             var clone = n.cloneNode();
             clone.src = '';
             mirror.add(clone, serializedNode);
         }
         delete serializedNode.needBlock;
+        delete serializedNode.needMask;
         var shadowRoot = n.shadowRoot;
         if (shadowRoot && isNativeShadowDom(shadowRoot))
             serializedNode.isShadowHost = true;
@@ -886,7 +895,7 @@ function serializeNodeWithId(n, options) {
             onStylesheetLoad: onStylesheetLoad,
             stylesheetLoadTimeout: stylesheetLoadTimeout,
             keepIframeSrcFn: keepIframeSrcFn,
-            enableStrictPrivacy: enableStrictPrivacy
+            enableStrictPrivacy: strictPrivacy
         };
         for (var _i = 0, _m = Array.from(n.childNodes); _i < _m.length; _i++) {
             var childN = _m[_i];

package/lib/rrweb.js

@@ -575,8 +575,8 @@ function serializeTextNode(n, options) {
 }
 function serializeElementNode(n, options) {
     var doc = options.doc, blockClass = options.blockClass, blockSelector = options.blockSelector, inlineStylesheet = options.inlineStylesheet, _a = options.maskInputOptions, maskInputOptions = _a === void 0 ? {} : _a, maskInputFn = options.maskInputFn, maskTextClass = options.maskTextClass, _b = options.dataURLOptions, dataURLOptions = _b === void 0 ? {} : _b, inlineImages = options.inlineImages, recordCanvas = options.recordCanvas, keepIframeSrcFn = options.keepIframeSrcFn, _c = options.newlyAddedElement, newlyAddedElement = _c === void 0 ? false : _c, enableStrictPrivacy = options.enableStrictPrivacy, rootId = options.rootId;
-    var needBlock = _isBlockedElement(n, blockClass, blockSelector) ||
-        _isBlockedElement(n, maskTextClass, blockSelector);
+    var needBlock = _isBlockedElement(n, blockClass, blockSelector);
+    var needMask = _isBlockedElement(n, maskTextClass, null);
     var tagName = getValidTagName$1(n);
     var attributes = {};
     var len = n.attributes.length;
@@ -650,7 +650,7 @@ function serializeElementNode(n, options) {
             }
         }
     }
-    if (tagName === 'img' && inlineImages) {
+    if (tagName === 'img' && inlineImages && !needBlock && !needMask) {
         if (!canvasService) {
             canvasService = doc.createElement('canvas');
             canvasCtx = canvasService.getContext('2d');
@@ -691,14 +691,16 @@ function serializeElementNode(n, options) {
             attributes.rr_scrollTop = n.scrollTop;
         }
     }
-    if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
+    if (needBlock || needMask || (tagName === 'img' && enableStrictPrivacy)) {
         var _d = n.getBoundingClientRect(), width = _d.width, height = _d.height;
         attributes = {
             "class": attributes["class"],
             rr_width: "".concat(width, "px"),
             rr_height: "".concat(height, "px")
         };
-        needBlock = true;
+        if (enableStrictPrivacy) {
+            needBlock = true;
+        }
     }
     if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src)) {
         if (!n.contentDocument) {
@@ -713,6 +715,7 @@ function serializeElementNode(n, options) {
         childNodes: [],
         isSVG: isSVGElement(n) || undefined,
         needBlock: needBlock,
+        needMask: needMask,
         rootId: rootId
     };
 }
@@ -843,14 +846,20 @@ function serializeNodeWithId(n, options) {
         onSerialize(n);
     }
     var recordChild = !skipChild;
+    var strictPrivacy = enableStrictPrivacy;
     if (serializedNode.type === NodeType$2.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
-        if (serializedNode.needBlock && serializedNode.tagName === 'img') {
+        strictPrivacy =
+            enableStrictPrivacy ||
+                !!serializedNode.needBlock ||
+                !!serializedNode.needMask;
+        if (strictPrivacy && serializedNode.tagName === 'img') {
             var clone = n.cloneNode();
             clone.src = '';
             mirror.add(clone, serializedNode);
         }
         delete serializedNode.needBlock;
+        delete serializedNode.needMask;
         var shadowRoot = n.shadowRoot;
         if (shadowRoot && isNativeShadowDom(shadowRoot))
             serializedNode.isShadowHost = true;
@@ -886,7 +895,7 @@ function serializeNodeWithId(n, options) {
             onStylesheetLoad: onStylesheetLoad,
             stylesheetLoadTimeout: stylesheetLoadTimeout,
             keepIframeSrcFn: keepIframeSrcFn,
-            enableStrictPrivacy: enableStrictPrivacy
+            enableStrictPrivacy: strictPrivacy
         };
         for (var _i = 0, _m = Array.from(n.childNodes); _i < _m.length; _i++) {
             var childN = _m[_i];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "2.1.3",
+  "version": "2.1.6",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -76,12 +76,12 @@
   },
   "dependencies": {
     "@highlight-run/rrdom": "0.1.17",
-    "@highlight-run/rrweb-snapshot": "1.1.26",
+    "@highlight-run/rrweb-snapshot": "1.1.29",
     "@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"
   },
-  "gitHead": "98757c19f85bda25f5c29047f67d32ab7fd851f3"
+  "gitHead": "decc1b7fa6e0f0f50d3777c5abae92df455bd3e7"
 }