@highlight-run/rrweb 2.0.4 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/plugins/console-record.js +12 -454
- package/dist/plugins/console-record.min.js +1 -1
- package/dist/plugins/console-record.min.js.map +1 -1
- package/dist/plugins/console-replay.js +4 -164
- package/dist/plugins/console-replay.min.js.map +1 -1
- package/dist/plugins/sequential-id-record.js +1 -30
- package/dist/plugins/sequential-id-replay.js +1 -33
- package/dist/record/rrweb-record-pack.js +3 -664
- package/dist/record/rrweb-record-pack.min.js.map +1 -1
- package/dist/record/rrweb-record.js +4 -3202
- package/dist/record/rrweb-record.min.js +3 -3
- package/dist/record/rrweb-record.min.js.map +1 -1
- package/dist/replay/rrweb-replay-unpack.css +1 -0
- package/dist/replay/rrweb-replay-unpack.js +5 -4914
- package/dist/replay/rrweb-replay-unpack.min.css +2 -0
- package/dist/replay/rrweb-replay-unpack.min.css.map +1 -0
- package/dist/replay/rrweb-replay-unpack.min.js +4 -4
- package/dist/replay/rrweb-replay-unpack.min.js.map +1 -1
- package/dist/replay/rrweb-replay.css +1 -0
- package/dist/replay/rrweb-replay.js +5 -4506
- package/dist/replay/rrweb-replay.min.css +2 -0
- package/dist/replay/rrweb-replay.min.css.map +1 -0
- package/dist/replay/rrweb-replay.min.js +3 -3
- package/dist/replay/rrweb-replay.min.js.map +1 -1
- package/dist/rrweb-all.css +1 -0
- package/dist/rrweb-all.js +16 -8877
- package/dist/rrweb-all.min.css +2 -0
- package/dist/rrweb-all.min.css.map +1 -0
- package/dist/rrweb-all.min.js +12 -12
- package/dist/rrweb-all.min.js.map +1 -1
- package/dist/rrweb.css +1 -0
- package/dist/rrweb.js +6 -7546
- package/dist/rrweb.min.css +2 -0
- package/dist/rrweb.min.css.map +1 -0
- package/dist/rrweb.min.js +5 -5
- package/dist/rrweb.min.js.map +1 -1
- package/es/rrweb/all.css +1 -0
- package/es/rrweb/packages/rrweb/src/record/index.js +5 -2
- package/es/rrweb/packages/rrweb/src/record/mutation.js +23 -11
- package/es/rrweb/packages/rrweb/src/record/observer.js +6 -6
- package/es/rrweb/packages/rrweb/src/record/observers/canvas/2d.js +1 -1
- package/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas.js +2 -2
- package/es/rrweb/packages/rrweb/src/record/observers/canvas/webgl.js +1 -2
- package/es/rrweb/packages/rrweb/src/utils.js +16 -23
- package/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js +283 -243
- package/lib/record/rrweb-record.js +333 -286
- package/lib/replay/rrweb-replay-unpack.css +1 -0
- package/lib/replay/rrweb-replay-unpack.js +1 -1
- package/lib/replay/rrweb-replay.css +1 -0
- package/lib/replay/rrweb-replay.js +1 -1
- package/lib/rrweb-all.css +1 -0
- package/lib/rrweb-all.js +334 -287
- package/lib/rrweb.css +1 -0
- package/lib/rrweb.js +334 -287
- package/package.json +4 -4
- package/typings/utils.d.ts +1 -1
|
@@ -14,7 +14,7 @@ function isElement(n) {
|
|
|
14
14
|
function isShadowRoot(n) {
|
|
15
15
|
var _a;
|
|
16
16
|
var host = (_a = n) === null || _a === void 0 ? void 0 : _a.host;
|
|
17
|
-
return Boolean(host
|
|
17
|
+
return Boolean((host === null || host === void 0 ? void 0 : host.shadowRoot) === n);
|
|
18
18
|
}
|
|
19
19
|
var Mirror = (function () {
|
|
20
20
|
function Mirror() {
|
|
@@ -314,7 +314,7 @@ function _isBlockedElement(element, blockClass, blockSelector) {
|
|
|
314
314
|
}
|
|
315
315
|
}
|
|
316
316
|
else {
|
|
317
|
-
for (var eIndex =
|
|
317
|
+
for (var eIndex = element.classList.length; eIndex--;) {
|
|
318
318
|
var className = element.classList[eIndex];
|
|
319
319
|
if (blockClass.test(className)) {
|
|
320
320
|
return true;
|
|
@@ -326,35 +326,47 @@ function _isBlockedElement(element, blockClass, blockSelector) {
|
|
|
326
326
|
}
|
|
327
327
|
return false;
|
|
328
328
|
}
|
|
329
|
-
function
|
|
330
|
-
if (!node)
|
|
329
|
+
function classMatchesRegex(node, regex, checkAncestors) {
|
|
330
|
+
if (!node)
|
|
331
331
|
return false;
|
|
332
|
+
if (node.nodeType !== node.ELEMENT_NODE) {
|
|
333
|
+
if (!checkAncestors)
|
|
334
|
+
return false;
|
|
335
|
+
return classMatchesRegex(node.parentNode, regex, checkAncestors);
|
|
332
336
|
}
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
else {
|
|
340
|
-
for (var eIndex = 0; eIndex < node.classList.length; eIndex++) {
|
|
341
|
-
var className = node.classList[eIndex];
|
|
342
|
-
if (maskTextClass.test(className)) {
|
|
343
|
-
return true;
|
|
344
|
-
}
|
|
345
|
-
}
|
|
346
|
-
}
|
|
347
|
-
if (maskTextSelector) {
|
|
348
|
-
if (node.matches(maskTextSelector)) {
|
|
349
|
-
return true;
|
|
350
|
-
}
|
|
337
|
+
for (var eIndex = node.classList.length; eIndex--;) {
|
|
338
|
+
var className = node.classList[eIndex];
|
|
339
|
+
if (regex.test(className)) {
|
|
340
|
+
return true;
|
|
351
341
|
}
|
|
352
|
-
return needMaskingText(node.parentNode, maskTextClass, maskTextSelector);
|
|
353
342
|
}
|
|
354
|
-
if (
|
|
355
|
-
return
|
|
343
|
+
if (!checkAncestors)
|
|
344
|
+
return false;
|
|
345
|
+
return classMatchesRegex(node.parentNode, regex, checkAncestors);
|
|
346
|
+
}
|
|
347
|
+
function needMaskingText(node, maskTextClass, maskTextSelector) {
|
|
348
|
+
var el = node.nodeType === node.ELEMENT_NODE
|
|
349
|
+
? node
|
|
350
|
+
: node.parentElement;
|
|
351
|
+
if (el === null)
|
|
352
|
+
return false;
|
|
353
|
+
if (typeof maskTextClass === 'string') {
|
|
354
|
+
if (el.classList.contains(maskTextClass))
|
|
355
|
+
return true;
|
|
356
|
+
if (el.closest("." + maskTextClass))
|
|
357
|
+
return true;
|
|
358
|
+
}
|
|
359
|
+
else {
|
|
360
|
+
if (classMatchesRegex(el, maskTextClass, true))
|
|
361
|
+
return true;
|
|
356
362
|
}
|
|
357
|
-
|
|
363
|
+
if (maskTextSelector) {
|
|
364
|
+
if (el.matches(maskTextSelector))
|
|
365
|
+
return true;
|
|
366
|
+
if (el.closest(maskTextSelector))
|
|
367
|
+
return true;
|
|
368
|
+
}
|
|
369
|
+
return false;
|
|
358
370
|
}
|
|
359
371
|
function onceIframeLoaded(iframeEl, listener, iframeLoadTimeout) {
|
|
360
372
|
var win = iframeEl.contentWindow;
|
|
@@ -421,13 +433,8 @@ function onceStylesheetLoaded(link, listener, iframeLoadTimeout) {
|
|
|
421
433
|
});
|
|
422
434
|
}
|
|
423
435
|
function serializeNode(n, options) {
|
|
424
|
-
var _a;
|
|
425
|
-
var
|
|
426
|
-
var rootId;
|
|
427
|
-
if (mirror.getMeta(doc)) {
|
|
428
|
-
var docId = mirror.getId(doc);
|
|
429
|
-
rootId = docId === 1 ? undefined : docId;
|
|
430
|
-
}
|
|
436
|
+
var doc = options.doc, mirror = options.mirror, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, inlineStylesheet = options.inlineStylesheet, _a = options.maskInputOptions, maskInputOptions = _a === void 0 ? {} : _a, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, _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;
|
|
437
|
+
var rootId = getRootId(doc, mirror);
|
|
431
438
|
switch (n.nodeType) {
|
|
432
439
|
case n.DOCUMENT_NODE:
|
|
433
440
|
if (n.compatMode !== 'CSS1Compat') {
|
|
@@ -454,203 +461,29 @@ function serializeNode(n, options) {
|
|
|
454
461
|
rootId: rootId
|
|
455
462
|
};
|
|
456
463
|
case n.ELEMENT_NODE:
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
if (stylesheet) {
|
|
471
|
-
cssText = getCssRulesString(stylesheet);
|
|
472
|
-
}
|
|
473
|
-
if (cssText) {
|
|
474
|
-
delete attributes_1.rel;
|
|
475
|
-
delete attributes_1.href;
|
|
476
|
-
attributes_1._cssText = absoluteToStylesheet(cssText, stylesheet.href);
|
|
477
|
-
}
|
|
478
|
-
}
|
|
479
|
-
if (tagName === 'style' &&
|
|
480
|
-
n.sheet &&
|
|
481
|
-
!(n.innerText ||
|
|
482
|
-
n.textContent ||
|
|
483
|
-
'').trim().length) {
|
|
484
|
-
var cssText = getCssRulesString(n.sheet);
|
|
485
|
-
if (cssText) {
|
|
486
|
-
attributes_1._cssText = absoluteToStylesheet(cssText, getHref());
|
|
487
|
-
}
|
|
488
|
-
}
|
|
489
|
-
if (tagName === 'input' ||
|
|
490
|
-
tagName === 'textarea' ||
|
|
491
|
-
tagName === 'select') {
|
|
492
|
-
var value = n.value;
|
|
493
|
-
if (attributes_1.type !== 'radio' &&
|
|
494
|
-
attributes_1.type !== 'checkbox' &&
|
|
495
|
-
attributes_1.type !== 'submit' &&
|
|
496
|
-
attributes_1.type !== 'button' &&
|
|
497
|
-
value) {
|
|
498
|
-
attributes_1.value = maskInputValue({
|
|
499
|
-
type: attributes_1.type,
|
|
500
|
-
tagName: tagName,
|
|
501
|
-
value: value,
|
|
502
|
-
maskInputOptions: maskInputOptions,
|
|
503
|
-
maskInputFn: maskInputFn
|
|
504
|
-
});
|
|
505
|
-
}
|
|
506
|
-
else if (n.checked) {
|
|
507
|
-
attributes_1.checked = n.checked;
|
|
508
|
-
}
|
|
509
|
-
}
|
|
510
|
-
if (tagName === 'option') {
|
|
511
|
-
if (n.selected && !maskInputOptions['select']) {
|
|
512
|
-
attributes_1.selected = true;
|
|
513
|
-
}
|
|
514
|
-
else {
|
|
515
|
-
delete attributes_1.selected;
|
|
516
|
-
}
|
|
517
|
-
}
|
|
518
|
-
if (tagName === 'canvas' && recordCanvas) {
|
|
519
|
-
if (n.__context === '2d') {
|
|
520
|
-
if (!is2DCanvasBlank(n)) {
|
|
521
|
-
attributes_1.rr_dataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
522
|
-
}
|
|
523
|
-
}
|
|
524
|
-
else if (!('__context' in n)) {
|
|
525
|
-
var canvasDataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
526
|
-
var blankCanvas = document.createElement('canvas');
|
|
527
|
-
blankCanvas.width = n.width;
|
|
528
|
-
blankCanvas.height = n.height;
|
|
529
|
-
var blankCanvasDataURL = blankCanvas.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
530
|
-
if (canvasDataURL !== blankCanvasDataURL) {
|
|
531
|
-
attributes_1.rr_dataURL = canvasDataURL;
|
|
532
|
-
}
|
|
533
|
-
}
|
|
534
|
-
}
|
|
535
|
-
if (tagName === 'img' && inlineImages) {
|
|
536
|
-
if (!canvasService) {
|
|
537
|
-
canvasService = doc.createElement('canvas');
|
|
538
|
-
canvasCtx = canvasService.getContext('2d');
|
|
539
|
-
}
|
|
540
|
-
var image_1 = n;
|
|
541
|
-
var oldValue_1 = image_1.crossOrigin;
|
|
542
|
-
image_1.crossOrigin = 'anonymous';
|
|
543
|
-
var recordInlineImage = function () {
|
|
544
|
-
try {
|
|
545
|
-
canvasService.width = image_1.naturalWidth;
|
|
546
|
-
canvasService.height = image_1.naturalHeight;
|
|
547
|
-
canvasCtx.drawImage(image_1, 0, 0);
|
|
548
|
-
attributes_1.rr_dataURL = canvasService.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
549
|
-
}
|
|
550
|
-
catch (err) {
|
|
551
|
-
console.warn("Cannot inline img src=" + image_1.currentSrc + "! Error: " + err);
|
|
552
|
-
}
|
|
553
|
-
oldValue_1
|
|
554
|
-
? (attributes_1.crossOrigin = oldValue_1)
|
|
555
|
-
: image_1.removeAttribute('crossorigin');
|
|
556
|
-
};
|
|
557
|
-
if (image_1.complete && image_1.naturalWidth !== 0)
|
|
558
|
-
recordInlineImage();
|
|
559
|
-
else
|
|
560
|
-
image_1.onload = recordInlineImage;
|
|
561
|
-
}
|
|
562
|
-
if (tagName === 'audio' || tagName === 'video') {
|
|
563
|
-
attributes_1.rr_mediaState = n.paused
|
|
564
|
-
? 'paused'
|
|
565
|
-
: 'played';
|
|
566
|
-
attributes_1.rr_mediaCurrentTime = n.currentTime;
|
|
567
|
-
}
|
|
568
|
-
if (n.scrollLeft) {
|
|
569
|
-
attributes_1.rr_scrollLeft = n.scrollLeft;
|
|
570
|
-
}
|
|
571
|
-
if (n.scrollTop) {
|
|
572
|
-
attributes_1.rr_scrollTop = n.scrollTop;
|
|
573
|
-
}
|
|
574
|
-
if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
|
|
575
|
-
var _d = n.getBoundingClientRect(), width = _d.width, height = _d.height;
|
|
576
|
-
attributes_1 = {
|
|
577
|
-
"class": attributes_1["class"],
|
|
578
|
-
rr_width: width + "px",
|
|
579
|
-
rr_height: height + "px"
|
|
580
|
-
};
|
|
581
|
-
needBlock = true;
|
|
582
|
-
}
|
|
583
|
-
if (tagName === 'iframe' && !keepIframeSrcFn(attributes_1.src)) {
|
|
584
|
-
if (!n.contentDocument) {
|
|
585
|
-
attributes_1.rr_src = attributes_1.src;
|
|
586
|
-
}
|
|
587
|
-
delete attributes_1.src;
|
|
588
|
-
}
|
|
589
|
-
return {
|
|
590
|
-
type: NodeType.Element,
|
|
591
|
-
tagName: tagName,
|
|
592
|
-
attributes: attributes_1,
|
|
593
|
-
childNodes: [],
|
|
594
|
-
isSVG: isSVGElement(n) || undefined,
|
|
595
|
-
needBlock: needBlock,
|
|
464
|
+
return serializeElementNode(n, {
|
|
465
|
+
doc: doc,
|
|
466
|
+
blockClass: blockClass,
|
|
467
|
+
blockSelector: blockSelector,
|
|
468
|
+
inlineStylesheet: inlineStylesheet,
|
|
469
|
+
maskInputOptions: maskInputOptions,
|
|
470
|
+
maskInputFn: maskInputFn,
|
|
471
|
+
dataURLOptions: dataURLOptions,
|
|
472
|
+
inlineImages: inlineImages,
|
|
473
|
+
recordCanvas: recordCanvas,
|
|
474
|
+
keepIframeSrcFn: keepIframeSrcFn,
|
|
475
|
+
newlyAddedElement: newlyAddedElement,
|
|
476
|
+
enableStrictPrivacy: enableStrictPrivacy,
|
|
596
477
|
rootId: rootId
|
|
597
|
-
};
|
|
478
|
+
});
|
|
598
479
|
case n.TEXT_NODE:
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
if (isStyle && textContent) {
|
|
605
|
-
try {
|
|
606
|
-
if (n.nextSibling || n.previousSibling) {
|
|
607
|
-
}
|
|
608
|
-
else if ((_a = n.parentNode.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) {
|
|
609
|
-
textContent = stringifyStyleSheet(n.parentNode.sheet);
|
|
610
|
-
}
|
|
611
|
-
}
|
|
612
|
-
catch (err) {
|
|
613
|
-
console.warn("Cannot get CSS styles from text's parentNode. Error: " + err, n);
|
|
614
|
-
}
|
|
615
|
-
textContent = absoluteToStylesheet(textContent, getHref());
|
|
616
|
-
textContentHandled = true;
|
|
617
|
-
}
|
|
618
|
-
if (isScript) {
|
|
619
|
-
textContent = 'SCRIPT_PLACEHOLDER';
|
|
620
|
-
textContentHandled = true;
|
|
621
|
-
}
|
|
622
|
-
else if (parentTagName === 'NOSCRIPT') {
|
|
623
|
-
textContent = '';
|
|
624
|
-
textContentHandled = true;
|
|
625
|
-
}
|
|
626
|
-
if (!isStyle &&
|
|
627
|
-
!isScript &&
|
|
628
|
-
needMaskingText(n, maskTextClass, maskTextSelector) &&
|
|
629
|
-
textContent) {
|
|
630
|
-
textContent = maskTextFn
|
|
631
|
-
? maskTextFn(textContent)
|
|
632
|
-
: textContent.replace(/[\S]/g, '*');
|
|
633
|
-
}
|
|
634
|
-
if (enableStrictPrivacy && !textContentHandled && parentTagName) {
|
|
635
|
-
var IGNORE_TAG_NAMES = new Set([
|
|
636
|
-
'HEAD',
|
|
637
|
-
'TITLE',
|
|
638
|
-
'STYLE',
|
|
639
|
-
'SCRIPT',
|
|
640
|
-
'HTML',
|
|
641
|
-
'BODY',
|
|
642
|
-
'NOSCRIPT',
|
|
643
|
-
]);
|
|
644
|
-
if (!IGNORE_TAG_NAMES.has(parentTagName) && textContent) {
|
|
645
|
-
textContent = obfuscateText(textContent);
|
|
646
|
-
}
|
|
647
|
-
}
|
|
648
|
-
return {
|
|
649
|
-
type: NodeType.Text,
|
|
650
|
-
textContent: textContent || '',
|
|
651
|
-
isStyle: isStyle,
|
|
480
|
+
return serializeTextNode(n, {
|
|
481
|
+
maskTextClass: maskTextClass,
|
|
482
|
+
maskTextSelector: maskTextSelector,
|
|
483
|
+
maskTextFn: maskTextFn,
|
|
484
|
+
enableStrictPrivacy: enableStrictPrivacy,
|
|
652
485
|
rootId: rootId
|
|
653
|
-
};
|
|
486
|
+
});
|
|
654
487
|
case n.CDATA_SECTION_NODE:
|
|
655
488
|
return {
|
|
656
489
|
type: NodeType.CDATA,
|
|
@@ -667,6 +500,213 @@ function serializeNode(n, options) {
|
|
|
667
500
|
return false;
|
|
668
501
|
}
|
|
669
502
|
}
|
|
503
|
+
function getRootId(doc, mirror) {
|
|
504
|
+
if (!mirror.hasNode(doc))
|
|
505
|
+
return undefined;
|
|
506
|
+
var docId = mirror.getId(doc);
|
|
507
|
+
return docId === 1 ? undefined : docId;
|
|
508
|
+
}
|
|
509
|
+
function serializeTextNode(n, options) {
|
|
510
|
+
var _a;
|
|
511
|
+
var maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, maskTextFn = options.maskTextFn, enableStrictPrivacy = options.enableStrictPrivacy, rootId = options.rootId;
|
|
512
|
+
var parentTagName = n.parentNode && n.parentNode.tagName;
|
|
513
|
+
var textContent = n.textContent;
|
|
514
|
+
var isStyle = parentTagName === 'STYLE' ? true : undefined;
|
|
515
|
+
var isScript = parentTagName === 'SCRIPT' ? true : undefined;
|
|
516
|
+
var textContentHandled = false;
|
|
517
|
+
if (isStyle && textContent) {
|
|
518
|
+
try {
|
|
519
|
+
if (n.nextSibling || n.previousSibling) {
|
|
520
|
+
}
|
|
521
|
+
else if ((_a = n.parentNode.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) {
|
|
522
|
+
textContent = stringifyStyleSheet(n.parentNode.sheet);
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
catch (err) {
|
|
526
|
+
console.warn("Cannot get CSS styles from text's parentNode. Error: " + err, n);
|
|
527
|
+
}
|
|
528
|
+
textContent = absoluteToStylesheet(textContent, getHref());
|
|
529
|
+
textContentHandled = true;
|
|
530
|
+
}
|
|
531
|
+
if (isScript) {
|
|
532
|
+
textContent = 'SCRIPT_PLACEHOLDER';
|
|
533
|
+
textContentHandled = true;
|
|
534
|
+
}
|
|
535
|
+
else if (parentTagName === 'NOSCRIPT') {
|
|
536
|
+
textContent = '';
|
|
537
|
+
textContentHandled = true;
|
|
538
|
+
}
|
|
539
|
+
if (!isStyle &&
|
|
540
|
+
!isScript &&
|
|
541
|
+
textContent &&
|
|
542
|
+
needMaskingText(n, maskTextClass, maskTextSelector)) {
|
|
543
|
+
textContent = maskTextFn
|
|
544
|
+
? maskTextFn(textContent)
|
|
545
|
+
: textContent.replace(/[\S]/g, '*');
|
|
546
|
+
}
|
|
547
|
+
if (enableStrictPrivacy && !textContentHandled && parentTagName) {
|
|
548
|
+
var IGNORE_TAG_NAMES = new Set([
|
|
549
|
+
'HEAD',
|
|
550
|
+
'TITLE',
|
|
551
|
+
'STYLE',
|
|
552
|
+
'SCRIPT',
|
|
553
|
+
'HTML',
|
|
554
|
+
'BODY',
|
|
555
|
+
'NOSCRIPT',
|
|
556
|
+
]);
|
|
557
|
+
if (!IGNORE_TAG_NAMES.has(parentTagName) && textContent) {
|
|
558
|
+
textContent = obfuscateText(textContent);
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
return {
|
|
562
|
+
type: NodeType.Text,
|
|
563
|
+
textContent: textContent || '',
|
|
564
|
+
isStyle: isStyle,
|
|
565
|
+
rootId: rootId
|
|
566
|
+
};
|
|
567
|
+
}
|
|
568
|
+
function serializeElementNode(n, options) {
|
|
569
|
+
var doc = options.doc, blockClass = options.blockClass, blockSelector = options.blockSelector, inlineStylesheet = options.inlineStylesheet, _a = options.maskInputOptions, maskInputOptions = _a === void 0 ? {} : _a, maskInputFn = options.maskInputFn, _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;
|
|
570
|
+
var needBlock = _isBlockedElement(n, blockClass, blockSelector);
|
|
571
|
+
var tagName = getValidTagName(n);
|
|
572
|
+
var attributes = {};
|
|
573
|
+
var len = n.attributes.length;
|
|
574
|
+
for (var i = 0; i < len; i++) {
|
|
575
|
+
var attr = n.attributes[i];
|
|
576
|
+
attributes[attr.name] = transformAttribute(doc, tagName, attr.name, attr.value);
|
|
577
|
+
}
|
|
578
|
+
if (tagName === 'link' && inlineStylesheet) {
|
|
579
|
+
var stylesheet = Array.from(doc.styleSheets).find(function (s) {
|
|
580
|
+
return s.href === n.href;
|
|
581
|
+
});
|
|
582
|
+
var cssText = null;
|
|
583
|
+
if (stylesheet) {
|
|
584
|
+
cssText = getCssRulesString(stylesheet);
|
|
585
|
+
}
|
|
586
|
+
if (cssText) {
|
|
587
|
+
delete attributes.rel;
|
|
588
|
+
delete attributes.href;
|
|
589
|
+
attributes._cssText = absoluteToStylesheet(cssText, stylesheet.href);
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
if (tagName === 'style' &&
|
|
593
|
+
n.sheet &&
|
|
594
|
+
!(n.innerText || n.textContent || '').trim().length) {
|
|
595
|
+
var cssText = getCssRulesString(n.sheet);
|
|
596
|
+
if (cssText) {
|
|
597
|
+
attributes._cssText = absoluteToStylesheet(cssText, getHref());
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
|
|
601
|
+
var value = n.value;
|
|
602
|
+
if (attributes.type !== 'radio' &&
|
|
603
|
+
attributes.type !== 'checkbox' &&
|
|
604
|
+
attributes.type !== 'submit' &&
|
|
605
|
+
attributes.type !== 'button' &&
|
|
606
|
+
value) {
|
|
607
|
+
attributes.value = maskInputValue({
|
|
608
|
+
type: attributes.type,
|
|
609
|
+
tagName: tagName,
|
|
610
|
+
value: value,
|
|
611
|
+
maskInputOptions: maskInputOptions,
|
|
612
|
+
maskInputFn: maskInputFn
|
|
613
|
+
});
|
|
614
|
+
}
|
|
615
|
+
else if (n.checked) {
|
|
616
|
+
attributes.checked = n.checked;
|
|
617
|
+
}
|
|
618
|
+
}
|
|
619
|
+
if (tagName === 'option') {
|
|
620
|
+
if (n.selected && !maskInputOptions['select']) {
|
|
621
|
+
attributes.selected = true;
|
|
622
|
+
}
|
|
623
|
+
else {
|
|
624
|
+
delete attributes.selected;
|
|
625
|
+
}
|
|
626
|
+
}
|
|
627
|
+
if (tagName === 'canvas' && recordCanvas) {
|
|
628
|
+
if (n.__context === '2d') {
|
|
629
|
+
if (!is2DCanvasBlank(n)) {
|
|
630
|
+
attributes.rr_dataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
else if (!('__context' in n)) {
|
|
634
|
+
var canvasDataURL = n.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
635
|
+
var blankCanvas = document.createElement('canvas');
|
|
636
|
+
blankCanvas.width = n.width;
|
|
637
|
+
blankCanvas.height = n.height;
|
|
638
|
+
var blankCanvasDataURL = blankCanvas.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
639
|
+
if (canvasDataURL !== blankCanvasDataURL) {
|
|
640
|
+
attributes.rr_dataURL = canvasDataURL;
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
if (tagName === 'img' && inlineImages) {
|
|
645
|
+
if (!canvasService) {
|
|
646
|
+
canvasService = doc.createElement('canvas');
|
|
647
|
+
canvasCtx = canvasService.getContext('2d');
|
|
648
|
+
}
|
|
649
|
+
var image_1 = n;
|
|
650
|
+
var oldValue_1 = image_1.crossOrigin;
|
|
651
|
+
image_1.crossOrigin = 'anonymous';
|
|
652
|
+
var recordInlineImage = function () {
|
|
653
|
+
try {
|
|
654
|
+
canvasService.width = image_1.naturalWidth;
|
|
655
|
+
canvasService.height = image_1.naturalHeight;
|
|
656
|
+
canvasCtx.drawImage(image_1, 0, 0);
|
|
657
|
+
attributes.rr_dataURL = canvasService.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
658
|
+
}
|
|
659
|
+
catch (err) {
|
|
660
|
+
console.warn("Cannot inline img src=" + image_1.currentSrc + "! Error: " + err);
|
|
661
|
+
}
|
|
662
|
+
oldValue_1
|
|
663
|
+
? (attributes.crossOrigin = oldValue_1)
|
|
664
|
+
: image_1.removeAttribute('crossorigin');
|
|
665
|
+
};
|
|
666
|
+
if (image_1.complete && image_1.naturalWidth !== 0)
|
|
667
|
+
recordInlineImage();
|
|
668
|
+
else
|
|
669
|
+
image_1.onload = recordInlineImage;
|
|
670
|
+
}
|
|
671
|
+
if (tagName === 'audio' || tagName === 'video') {
|
|
672
|
+
attributes.rr_mediaState = n.paused
|
|
673
|
+
? 'paused'
|
|
674
|
+
: 'played';
|
|
675
|
+
attributes.rr_mediaCurrentTime = n.currentTime;
|
|
676
|
+
}
|
|
677
|
+
if (!newlyAddedElement) {
|
|
678
|
+
if (n.scrollLeft) {
|
|
679
|
+
attributes.rr_scrollLeft = n.scrollLeft;
|
|
680
|
+
}
|
|
681
|
+
if (n.scrollTop) {
|
|
682
|
+
attributes.rr_scrollTop = n.scrollTop;
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
|
|
686
|
+
var _d = n.getBoundingClientRect(), width = _d.width, height = _d.height;
|
|
687
|
+
attributes = {
|
|
688
|
+
"class": attributes["class"],
|
|
689
|
+
rr_width: width + "px",
|
|
690
|
+
rr_height: height + "px"
|
|
691
|
+
};
|
|
692
|
+
needBlock = true;
|
|
693
|
+
}
|
|
694
|
+
if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src)) {
|
|
695
|
+
if (!n.contentDocument) {
|
|
696
|
+
attributes.rr_src = attributes.src;
|
|
697
|
+
}
|
|
698
|
+
delete attributes.src;
|
|
699
|
+
}
|
|
700
|
+
return {
|
|
701
|
+
type: NodeType.Element,
|
|
702
|
+
tagName: tagName,
|
|
703
|
+
attributes: attributes,
|
|
704
|
+
childNodes: [],
|
|
705
|
+
isSVG: isSVGElement(n) || undefined,
|
|
706
|
+
needBlock: needBlock,
|
|
707
|
+
rootId: rootId
|
|
708
|
+
};
|
|
709
|
+
}
|
|
670
710
|
function lowerIfExists(maybeAttr) {
|
|
671
711
|
if (maybeAttr === undefined) {
|
|
672
712
|
return '';
|
|
@@ -747,8 +787,8 @@ function slimDOMExcluded(sn, slimDOMOptions) {
|
|
|
747
787
|
return false;
|
|
748
788
|
}
|
|
749
789
|
function serializeNodeWithId(n, options) {
|
|
750
|
-
var doc = options.doc, mirror = options.mirror, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, _a = options.skipChild, skipChild = _a === void 0 ? false : _a, _b = options.inlineStylesheet, inlineStylesheet = _b === void 0 ? true : _b, _c = options.maskInputOptions, maskInputOptions = _c === void 0 ? {} : _c, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, slimDOMOptions = options.slimDOMOptions, _d = options.dataURLOptions, dataURLOptions = _d === void 0 ? {} : _d, _e = options.inlineImages, inlineImages = _e === void 0 ? false : _e, _f = options.recordCanvas, recordCanvas = _f === void 0 ? false : _f, onSerialize = options.onSerialize, onIframeLoad = options.onIframeLoad, _g = options.iframeLoadTimeout, iframeLoadTimeout = _g === void 0 ? 5000 : _g, onStylesheetLoad = options.onStylesheetLoad, _h = options.stylesheetLoadTimeout, stylesheetLoadTimeout = _h === void 0 ? 5000 : _h, _j = options.keepIframeSrcFn, keepIframeSrcFn = _j === void 0 ? function () { return false; } : _j, enableStrictPrivacy = options.enableStrictPrivacy;
|
|
751
|
-
var
|
|
790
|
+
var doc = options.doc, mirror = options.mirror, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, _a = options.skipChild, skipChild = _a === void 0 ? false : _a, _b = options.inlineStylesheet, inlineStylesheet = _b === void 0 ? true : _b, _c = options.maskInputOptions, maskInputOptions = _c === void 0 ? {} : _c, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, slimDOMOptions = options.slimDOMOptions, _d = options.dataURLOptions, dataURLOptions = _d === void 0 ? {} : _d, _e = options.inlineImages, inlineImages = _e === void 0 ? false : _e, _f = options.recordCanvas, recordCanvas = _f === void 0 ? false : _f, onSerialize = options.onSerialize, onIframeLoad = options.onIframeLoad, _g = options.iframeLoadTimeout, iframeLoadTimeout = _g === void 0 ? 5000 : _g, onStylesheetLoad = options.onStylesheetLoad, _h = options.stylesheetLoadTimeout, stylesheetLoadTimeout = _h === void 0 ? 5000 : _h, _j = options.keepIframeSrcFn, keepIframeSrcFn = _j === void 0 ? function () { return false; } : _j, _k = options.newlyAddedElement, newlyAddedElement = _k === void 0 ? false : _k, enableStrictPrivacy = options.enableStrictPrivacy;
|
|
791
|
+
var _l = options.preserveWhiteSpace, preserveWhiteSpace = _l === void 0 ? true : _l;
|
|
752
792
|
var _serializedNode = serializeNode(n, {
|
|
753
793
|
doc: doc,
|
|
754
794
|
mirror: mirror,
|
|
@@ -764,6 +804,7 @@ function serializeNodeWithId(n, options) {
|
|
|
764
804
|
inlineImages: inlineImages,
|
|
765
805
|
recordCanvas: recordCanvas,
|
|
766
806
|
keepIframeSrcFn: keepIframeSrcFn,
|
|
807
|
+
newlyAddedElement: newlyAddedElement,
|
|
767
808
|
enableStrictPrivacy: enableStrictPrivacy
|
|
768
809
|
});
|
|
769
810
|
if (!_serializedNode) {
|
|
@@ -800,12 +841,6 @@ function serializeNodeWithId(n, options) {
|
|
|
800
841
|
clone.src = '';
|
|
801
842
|
mirror.add(clone, serializedNode);
|
|
802
843
|
}
|
|
803
|
-
if (serializedNode.tagName === 'link') {
|
|
804
|
-
var clone = n.cloneNode();
|
|
805
|
-
clone.href = '';
|
|
806
|
-
clone.innerText = serializedNode.attributes._cssText;
|
|
807
|
-
mirror.add(clone, serializedNode);
|
|
808
|
-
}
|
|
809
844
|
delete serializedNode.needBlock;
|
|
810
845
|
if (n.shadowRoot)
|
|
811
846
|
serializedNode.isShadowHost = true;
|
|
@@ -843,16 +878,16 @@ function serializeNodeWithId(n, options) {
|
|
|
843
878
|
keepIframeSrcFn: keepIframeSrcFn,
|
|
844
879
|
enableStrictPrivacy: enableStrictPrivacy
|
|
845
880
|
};
|
|
846
|
-
for (var _i = 0,
|
|
847
|
-
var childN =
|
|
881
|
+
for (var _i = 0, _m = Array.from(n.childNodes); _i < _m.length; _i++) {
|
|
882
|
+
var childN = _m[_i];
|
|
848
883
|
var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
|
|
849
884
|
if (serializedChildNode) {
|
|
850
885
|
serializedNode.childNodes.push(serializedChildNode);
|
|
851
886
|
}
|
|
852
887
|
}
|
|
853
888
|
if (isElement(n) && n.shadowRoot) {
|
|
854
|
-
for (var
|
|
855
|
-
var childN = _o
|
|
889
|
+
for (var _o = 0, _p = Array.from(n.shadowRoot.childNodes); _o < _p.length; _o++) {
|
|
890
|
+
var childN = _p[_o];
|
|
856
891
|
var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
|
|
857
892
|
if (serializedChildNode) {
|
|
858
893
|
serializedChildNode.isShadow = true;
|
|
@@ -889,6 +924,8 @@ function serializeNodeWithId(n, options) {
|
|
|
889
924
|
onSerialize: onSerialize,
|
|
890
925
|
onIframeLoad: onIframeLoad,
|
|
891
926
|
iframeLoadTimeout: iframeLoadTimeout,
|
|
927
|
+
onStylesheetLoad: onStylesheetLoad,
|
|
928
|
+
stylesheetLoadTimeout: stylesheetLoadTimeout,
|
|
892
929
|
keepIframeSrcFn: keepIframeSrcFn,
|
|
893
930
|
enableStrictPrivacy: enableStrictPrivacy
|
|
894
931
|
});
|
|
@@ -922,8 +959,9 @@ function serializeNodeWithId(n, options) {
|
|
|
922
959
|
preserveWhiteSpace: preserveWhiteSpace,
|
|
923
960
|
onSerialize: onSerialize,
|
|
924
961
|
onIframeLoad: onIframeLoad,
|
|
925
|
-
onStylesheetLoad: onStylesheetLoad,
|
|
926
962
|
iframeLoadTimeout: iframeLoadTimeout,
|
|
963
|
+
onStylesheetLoad: onStylesheetLoad,
|
|
964
|
+
stylesheetLoadTimeout: stylesheetLoadTimeout,
|
|
927
965
|
keepIframeSrcFn: keepIframeSrcFn,
|
|
928
966
|
enableStrictPrivacy: enableStrictPrivacy
|
|
929
967
|
});
|
|
@@ -1001,7 +1039,9 @@ function snapshot(n, options) {
|
|
|
1001
1039
|
onIframeLoad: onIframeLoad,
|
|
1002
1040
|
iframeLoadTimeout: iframeLoadTimeout,
|
|
1003
1041
|
onStylesheetLoad: onStylesheetLoad,
|
|
1004
|
-
stylesheetLoadTimeout: stylesheetLoadTimeout,
|
|
1042
|
+
stylesheetLoadTimeout: stylesheetLoadTimeout,
|
|
1043
|
+
keepIframeSrcFn: keepIframeSrcFn,
|
|
1044
|
+
newlyAddedElement: false,
|
|
1005
1045
|
enableStrictPrivacy: enableStrictPrivacy
|
|
1006
1046
|
});
|
|
1007
1047
|
}
|
|
@@ -1499,7 +1539,7 @@ var HOVER_SELECTOR = /([^\\]):hover/;
|
|
|
1499
1539
|
var HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR.source, 'g');
|
|
1500
1540
|
function addHoverClass(cssText, cache) {
|
|
1501
1541
|
var _a;
|
|
1502
|
-
if (!((_a = window.HIG_CONFIGURATION) === null || _a === void 0 ? void 0 : _a.enableOnHoverClass)) {
|
|
1542
|
+
if (!((_a = window === null || window === void 0 ? void 0 : window.HIG_CONFIGURATION) === null || _a === void 0 ? void 0 : _a.enableOnHoverClass)) {
|
|
1503
1543
|
return cssText;
|
|
1504
1544
|
}
|
|
1505
1545
|
var cachedStyle = cache === null || cache === void 0 ? void 0 : cache.stylesWithHoverClass.get(cssText);
|
|
@@ -1818,4 +1858,4 @@ function rebuild(n, options) {
|
|
|
1818
1858
|
return node;
|
|
1819
1859
|
}
|
|
1820
1860
|
|
|
1821
|
-
export { IGNORED_NODE, Mirror, NodeType, addHoverClass, buildNodeWithSN, createCache, createMirror, is2DCanvasBlank, isElement, isShadowRoot, maskInputValue, needMaskingText, obfuscateText, rebuild, serializeNodeWithId, snapshot, transformAttribute };
|
|
1861
|
+
export { IGNORED_NODE, Mirror, NodeType, addHoverClass, buildNodeWithSN, classMatchesRegex, createCache, createMirror, is2DCanvasBlank, isElement, isShadowRoot, maskInputValue, needMaskingText, obfuscateText, rebuild, serializeNodeWithId, snapshot, transformAttribute };
|