[Bug]: Getting Error "The Operation is Insecure" when setting recordCanvas option to true

[josephmathew900]

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

Version

2.0.0-alpha.4

Expected Behavior

No error should be thrown when setting the recordCanvas option to true.

Actual Behavior

I'm getting the error "The Operation is Insecure" when setting the recordCanvas option to true. This issue occurs in Firefox when opening the ColorPick Eyedropper extension.

Extension: https://addons.mozilla.org/en-US/firefox/addon/colorpick-eyedropper/

Steps to Reproduce

Demo: https://joseph-mathew.neetorecord.com/watch/4e4b12d9-4a2d-471b-be85-fd5eb56f8965
Sandbox: https://codesandbox.io/p/sandbox/96kqgh
Sandbox demo: https://96kqgh.csb.app/#

Testcase Gist URL

No response

Additional Information

No response

[eoghanmurray]

Here is the canvas injected by the FF extension

<canvas id="color_pick_click_box" style=" .... cursor: url(&quot;moz-extension://c0751345-35a3-4851-9b97-2ca2568e211f/img/crosshair.png&quot;) 16 16, crosshair; display: none;"></canvas>

it's actual content is generated by the extension too, hence the failure:

SecurityError

The canvas's bitmap is not origin clean; at least some of its contents have or may have been loaded from a site other than the one from which the document itself was loaded.

@Juice10 any reason why we shouldn't add a try/catch around the toDataURL call?

[Juice10]

@eoghanmurray Try/catch sounds like a good solution for this as far as I'm concerned