Canvas replays are not shown in Sentry for canvas elements located inside iframe of the same origin.

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

7.102.0

Link to Sentry event

https://p-mazhnik.sentry.io/replays/44d8116f8b714865a288222de0c7f760

SDK Setup

Main html

  Sentry.onLoad(function() {
    Sentry.init({
      dsn: '',
      integrations: [
        Sentry.captureConsoleIntegration(),
        Sentry.replayIntegration({
          blockAllMedia: false,
          maskAllText: false,
        }),
        Sentry.replayCanvasIntegration()
      ],
      // Session Replay
      replaysSessionSampleRate: 1.0,
      replaysOnErrorSampleRate: 1.0,
    });
  });

Steps to Reproduce

1. Download 2 html files: sentry-canvas-replay.zip
   index.html page contains two parts: it has canvas element with dynamic changes on the left, and iframe element on the right, containing another canvas element with dynamic changes.
2. Set dsn
3. Serve them locally, e.g. by running python3 -m http.server 8080 --bind 0.0.0.0 in the directory with index.html
4. Open url in browser; in my case – http://0.0.0.0:8080/ in Chrome
5. Wait a few seconds

Expected Result

In Sentry Replay, both canvases – from the main page and from the same origin iframe – should be visible.

Actual Result

Canvas from iframe is not visible in Replay.

Note that result is the same when canvas from the main page does not exist.