[Bug]: rrweb is not reverting "crossorigin" attribute changes made to "img" elements

[dkozlovskyi]

Preflight Checklist

• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

What package is this bug report for?

rrweb

Expected Behavior

rrweb sets the original "crossorigin" attribute value or removes it in case it was empty before the recording

Actual Behavior

rrweb is referencing to the attribute in CamelCase ("crossOrigin"), as the result it can not preserve and revert the original value.

Testcase Gist URL

No response

Additional Information

Steps to reproduce:

1. Go to https://drive.google.com
2. Start recording
3. Check the broken thumbnails.

Fix suggestion
reference to the case-sensitive "crossorigin" attribute instead of "crossOrigin".

[Juice10]

Hi @dkozlovskyi, thanks for submitting the bug report!
I looked through drive and I could only find this element with crossorigin on it, is this the one you are having issues with?

I looked through the rrweb source code and noticed rrweb isn't changing any of the cases. As far as I know every attribute is automatically lowercased by the browser before it is returned. Example below:

const el = document.createElement('div');
el.setAttribute('MYATTR', 'upcase?')
console.log(el.attributes[0].name) //=> 'myattr'

Could you share your events.json file so we can see what is going on?

[dkozlovskyi]

Thanks for your response.

rrweb is changing value of attribute in this line and reverting back original value here.

Setting crossorigin attribute is case-insensitive because it always puts the value into the lower case. However, reading the attribute is case-sensitive. Below you can see code example that you can run in the browser:

const img = document.createElement("img")
img.src = "https://raw.githubusercontent.com/github/explore/78df643247d429f6cc873026c0622819ad797942/topics/github/github.png"
document.body.append(img)
console.log(img); // <img src=​"https:​/​/​raw.githubusercontent.com/​github/​explore/​78df643247d429f6cc873026c0622819ad797942/​topics/​github/​github.png">​

img.crossOrigin = "anonymous";
console.log(img); // <img src=​"https:​/​/​raw.githubusercontent.com/​github/​explore/​78df643247d429f6cc873026c0622819ad797942/​topics/​github/​github.png" crossorigin=​"anonymous">​

delete img.crossOrigin // true
console.log(img) // <img src=​"https:​/​/​raw.githubusercontent.com/​github/​explore/​78df643247d429f6cc873026c0622819ad797942/​topics/​github/​github.png" crossorigin=​"anonymous">​

Video Recording
On the attached video recording, you can see that the crossorigin="anonymous" attribute value is not being reverted to the original value as it should be due to the case sensitivity problem.

rrweb-crossorigin-issue-recording.mov

Please correct me if I'm wrong.

[Juice10]

Thanks for clarifying that, adding a video and pointing to exactly the lines in the rrweb source code that are causing this issue @dkozlovskyi! You made the fix quite easy, here it is: #906