@highlight-run/rrweb 2.1.4 → 2.1.7

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, null);
+    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,11 @@ function serializeElementNode(n, options) {
             }
         }
     }
-    if (tagName === 'img' && inlineImages && !needBlock) {
+    if (tagName === 'img' &&
+        inlineImages &&
+        !needBlock &&
+        !needMask &&
+        !enableStrictPrivacy) {
         if (!canvasService) {
             canvasService = doc.createElement('canvas');
             canvasCtx = canvasService.getContext('2d');
@@ -687,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) {
@@ -702,9 +708,6 @@ function serializeElementNode(n, options) {
         }
         delete attributes.src;
     }
-    if (needBlock && tagName === 'img') {
-        delete attributes.src;
-    }
     return {
         type: NodeType.Element,
         tagName: tagName,
@@ -712,6 +715,7 @@ function serializeElementNode(n, options) {
         childNodes: [],
         isSVG: isSVGElement(n) || undefined,
         needBlock: needBlock,
+        needMask: needMask,
         rootId: rootId
     };
 }
@@ -845,14 +849,17 @@ function serializeNodeWithId(n, options) {
     var strictPrivacy = enableStrictPrivacy;
     if (serializedNode.type === NodeType.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
-        strictPrivacy = !!serializedNode.needBlock;
-        console.log('vadim strictPrivacy', { strictPrivacy: strictPrivacy, enableStrictPrivacy: enableStrictPrivacy });
+        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;

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, null);
+    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,11 @@ function serializeElementNode(n, options) {
             }
         }
     }
-    if (tagName === 'img' && inlineImages && !needBlock) {
+    if (tagName === 'img' &&
+        inlineImages &&
+        !needBlock &&
+        !needMask &&
+        !enableStrictPrivacy) {
         if (!canvasService) {
             canvasService = doc.createElement('canvas');
             canvasCtx = canvasService.getContext('2d');
@@ -689,14 +693,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) {
@@ -704,9 +710,6 @@ function serializeElementNode(n, options) {
         }
         delete attributes.src;
     }
-    if (needBlock && tagName === 'img') {
-        delete attributes.src;
-    }
     return {
         type: NodeType.Element,
         tagName: tagName,
@@ -714,6 +717,7 @@ function serializeElementNode(n, options) {
         childNodes: [],
         isSVG: isSVGElement(n) || undefined,
         needBlock: needBlock,
+        needMask: needMask,
         rootId: rootId
     };
 }
@@ -847,14 +851,17 @@ function serializeNodeWithId(n, options) {
     var strictPrivacy = enableStrictPrivacy;
     if (serializedNode.type === NodeType.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
-        strictPrivacy = !!serializedNode.needBlock;
-        console.log('vadim strictPrivacy', { strictPrivacy: strictPrivacy, enableStrictPrivacy: enableStrictPrivacy });
+        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;

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, null);
+    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,11 @@ function serializeElementNode(n, options) {
             }
         }
     }
-    if (tagName === 'img' && inlineImages && !needBlock) {
+    if (tagName === 'img' &&
+        inlineImages &&
+        !needBlock &&
+        !needMask &&
+        !enableStrictPrivacy) {
         if (!canvasService) {
             canvasService = doc.createElement('canvas');
             canvasCtx = canvasService.getContext('2d');
@@ -691,14 +695,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) {
@@ -706,9 +712,6 @@ function serializeElementNode(n, options) {
         }
         delete attributes.src;
     }
-    if (needBlock && tagName === 'img') {
-        delete attributes.src;
-    }
     return {
         type: NodeType$2.Element,
         tagName: tagName,
@@ -716,6 +719,7 @@ function serializeElementNode(n, options) {
         childNodes: [],
         isSVG: isSVGElement(n) || undefined,
         needBlock: needBlock,
+        needMask: needMask,
         rootId: rootId
     };
 }
@@ -849,14 +853,17 @@ function serializeNodeWithId(n, options) {
     var strictPrivacy = enableStrictPrivacy;
     if (serializedNode.type === NodeType$2.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
-        strictPrivacy = !!serializedNode.needBlock;
-        console.log('vadim strictPrivacy', { strictPrivacy: strictPrivacy, enableStrictPrivacy: enableStrictPrivacy });
+        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;

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, null);
+    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,11 @@ function serializeElementNode(n, options) {
             }
         }
     }
-    if (tagName === 'img' && inlineImages && !needBlock) {
+    if (tagName === 'img' &&
+        inlineImages &&
+        !needBlock &&
+        !needMask &&
+        !enableStrictPrivacy) {
         if (!canvasService) {
             canvasService = doc.createElement('canvas');
             canvasCtx = canvasService.getContext('2d');
@@ -691,14 +695,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) {
@@ -706,9 +712,6 @@ function serializeElementNode(n, options) {
         }
         delete attributes.src;
     }
-    if (needBlock && tagName === 'img') {
-        delete attributes.src;
-    }
     return {
         type: NodeType$2.Element,
         tagName: tagName,
@@ -716,6 +719,7 @@ function serializeElementNode(n, options) {
         childNodes: [],
         isSVG: isSVGElement(n) || undefined,
         needBlock: needBlock,
+        needMask: needMask,
         rootId: rootId
     };
 }
@@ -849,14 +853,17 @@ function serializeNodeWithId(n, options) {
     var strictPrivacy = enableStrictPrivacy;
     if (serializedNode.type === NodeType$2.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
-        strictPrivacy = !!serializedNode.needBlock;
-        console.log('vadim strictPrivacy', { strictPrivacy: strictPrivacy, enableStrictPrivacy: enableStrictPrivacy });
+        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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "2.1.4",
+  "version": "2.1.7",
   "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.27",
+    "@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",
     "fflate": "^0.4.4",
     "mitt": "^3.0.0"
   },
-  "gitHead": "ee5ef112cb3c2d2bd70078d428985ba8507ec070"
+  "gitHead": "f9d87780814fe229ed2a91ade9aa0b328242dc1b"
 }