fix: Ensure attributes are lowercased when checking (#1183)

* fix: Ensure attributes are lowercased when checking

* add changeset

* fix to lower case

* Apply formatting changes

---------

Co-authored-by: mydea <mydea@users.noreply.github.com>

packages/rrweb-snapshot/src/snapshot.ts

@@ -21,6 +21,7 @@ import {
   isNativeShadowDom,
   getCssRulesString,
   getInputType,
+  toLowerCase,
 } from './utils';
 
 let _id = 1;
@@ -32,12 +33,12 @@ export function genId(): number {
   return _id++;
 }
 
-function getValidTagName(element: HTMLElement): string {
+function getValidTagName(element: HTMLElement): Lowercase<string> {
   if (element instanceof HTMLFormElement) {
     return 'form';
   }
 
-  const processedTagName = element.tagName.toLowerCase().trim();
+  const processedTagName = toLowerCase(element.tagName);
 
   if (tagNameRegex.test(processedTagName)) {
     // if the tag name is odd and we cannot extract
@@ -222,8 +223,8 @@ function getHref() {
 
 export function transformAttribute(
   doc: Document,
-  tagName: string,
-  name: string,
+  tagName: Lowercase<string>,
+  name: Lowercase<string>,
   value: string | null,
 ): string | null {
   if (!value) {
@@ -638,7 +639,7 @@ function serializeElementNode(
       attributes[attr.name] = transformAttribute(
         doc,
         tagName,
-        attr.name,
+        toLowerCase(attr.name),
         attr.value,
       );
     }

packages/rrweb-snapshot/src/utils.ts

@@ -169,7 +169,7 @@ export function maskInputValue({
   maskInputFn?: MaskInputFn;
 }): string {
   let text = value || '';
-  const actualType = type && type.toLowerCase();
+  const actualType = type && toLowerCase(type);
 
   if (
     maskInputOptions[tagName.toLowerCase() as keyof MaskInputOptions] ||
@@ -184,6 +184,10 @@ export function maskInputValue({
   return text;
 }
 
+export function toLowerCase<T extends string>(str: T): Lowercase<T> {
+  return str.toLowerCase() as unknown as Lowercase<T>;
+}
+
 const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
 type PatchedGetImageData = {
   [ORIGINAL_ATTRIBUTE_NAME]: CanvasImageData['getImageData'];
@@ -265,6 +269,6 @@ export function getInputType(element: HTMLElement): Lowercase<string> | null {
     ? 'password'
     : type
     ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-      (type.toLowerCase() as Lowercase<string>)
+      toLowerCase(type)
     : null;
 }