ensure media elements have their source blocked correctly (#97)

* Fixes a bug in the `needsMask` processing that would stop recording
children if `highlight-mask` was set on a div with `enableStrictPrivacy`
set globally.
* Adds source obfuscation for other media elements: video, audio, and
source.

Testing:
before the fix -
https://app.highlight.io/649/sessions/o5jfoC9BXXjBkxqwpVbNNDWK3hcI
after the fix -
https://app.highlight.io/649/sessions/9DR6a5arNtGacbkr2pwyPn5ENh3E

Author: Vadman97

packages/rrweb-snapshot/src/snapshot.ts

@@ -29,6 +29,7 @@ import {
   extractFileExtension,
   absolutifyURLs,
   markCssSplits,
+  isElementSrcBlocked,
 } from './utils';
 import dom from '@rrweb/utils';
 
@@ -796,16 +797,20 @@ function serializeElementNode(
     }
   }
   // block element
-  if (needBlock || needMask || (tagName === 'img' && enableStrictPrivacy)) {
+  if (
+    needBlock ||
+    needMask ||
+    (enableStrictPrivacy && isElementSrcBlocked(tagName))
+  ) {
     const { width, height } = n.getBoundingClientRect();
     attributes = {
       class: attributes.class,
       rr_width: `${width}px`,
       rr_height: `${height}px`,
     };
-    if (enableStrictPrivacy) {
-      needBlock = true;
-    }
+  }
+  if (enableStrictPrivacy && isElementSrcBlocked(tagName)) {
+    needBlock = true;
   }
   // iframe
   if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src as string)) {
@@ -1077,10 +1082,10 @@ export function serializeNodeWithId(
       !!serializedNode.needMask;
 
     /** Highlight Code Begin */
-    // Remove the image's src if enableStrictPrivacy.
-    if (strictPrivacy && serializedNode.tagName === 'img') {
+    // process enableStrictPrivacy obfuscation of non-text elements
+    if (strictPrivacy && isElementSrcBlocked(serializedNode.tagName)) {
       const clone = n.cloneNode();
-      (clone as unknown as HTMLImageElement).src = '';
+      (clone as unknown as { src: string }).src = '';
       mirror.add(clone, serializedNode);
     }
     /** Highlight Code End */

packages/rrweb-snapshot/src/utils.ts

@@ -518,4 +518,15 @@ export function obfuscateText(text: string): string {
       .join(' ') || '';
   return text;
 }
+
+// returns true if the tag name is an element type that should have its source blocked
+export function isElementSrcBlocked(tagName: string): boolean {
+  return (
+    tagName === 'img' ||
+    tagName === 'video' ||
+    tagName === 'audio' ||
+    tagName === 'source'
+  );
+}
+
 /* End of Highlight Code */