Skip to content

Commit

Permalink
fix: Ensure attributes are lowercased when checking (#1183)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
mydea and mydea authored Jun 2, 2023
1 parent b798f2d commit d7c72bf
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 12 deletions.
6 changes: 6 additions & 0 deletions .changeset/lovely-students-boil.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'rrweb-snapshot': patch
'rrweb': patch
---

fix: Ensure attributes are lowercased when checking
11 changes: 6 additions & 5 deletions packages/rrweb-snapshot/src/snapshot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
isNativeShadowDom,
getCssRulesString,
getInputType,
toLowerCase,
} from './utils';

let _id = 1;
Expand All @@ -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
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -638,7 +639,7 @@ function serializeElementNode(
attributes[attr.name] = transformAttribute(
doc,
tagName,
attr.name,
toLowerCase(attr.name),
attr.value,
);
}
Expand Down
8 changes: 6 additions & 2 deletions packages/rrweb-snapshot/src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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] ||
Expand All @@ -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'];
Expand Down Expand Up @@ -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;
}
5 changes: 3 additions & 2 deletions packages/rrweb/src/record/mutation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
Mirror,
isNativeShadowDom,
getInputType,
toLowerCase,
} from 'rrweb-snapshot';
import type { observerParam, MutationBufferParam } from '../types';
import type {
Expand Down Expand Up @@ -597,8 +598,8 @@ export default class MutationBuffer {
// overwrite attribute if the mutations was triggered in same time
item.attributes[attributeName] = transformAttribute(
this.doc,
target.tagName,
attributeName,
toLowerCase(target.tagName),
toLowerCase(attributeName),
value,
);
}
Expand Down
8 changes: 6 additions & 2 deletions packages/rrweb/src/record/observer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
maskInputValue,
Mirror,
getInputType,
toLowerCase,
} from 'rrweb-snapshot';
import type { FontFaceSet } from 'css-font-loading-module';
import {
Expand Down Expand Up @@ -309,13 +310,16 @@ function initMouseInteractionObserver({
disableMap[key] !== false,
)
.forEach((eventKey: keyof typeof MouseInteractions) => {
let eventName = eventKey.toLowerCase();
let eventName = toLowerCase(eventKey);
const handler = getHandler(eventKey);
if (window.PointerEvent) {
switch (MouseInteractions[eventKey]) {
case MouseInteractions.MouseDown:
case MouseInteractions.MouseUp:
eventName = eventName.replace('mouse', 'pointer');
eventName = eventName.replace(
'mouse',
'pointer',
) as unknown as typeof eventName;
break;
case MouseInteractions.TouchStart:
case MouseInteractions.TouchEnd:
Expand Down
3 changes: 2 additions & 1 deletion packages/rrweb/src/replay/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
createMirror,
attributes,
serializedElementNodeWithId,
toLowerCase,
} from 'rrweb-snapshot';
import {
RRDocument,
Expand Down Expand Up @@ -1120,7 +1121,7 @@ export class Replayer {
if (d.id === -1) {
break;
}
const event = new Event(MouseInteractions[d.type].toLowerCase());
const event = new Event(toLowerCase(MouseInteractions[d.type]));
const target = this.mirror.getNode(d.id);
if (!target) {
return this.debugNodeNotFound(d, d.id);
Expand Down

0 comments on commit d7c72bf

Please sign in to comment.