Replay: Remove images that are on localhost or private IP

[lucas-zimerman]

Problem Statement

If a given recording captures images containing an URL to localhost or a Private IP, you'll get a CSP or connection refused error on Console Sample: https://sentry-sdks.sentry.io/replays/sentry-capacitor:5e61855fc88345e788a5317684ba22ee/?referrer=%2Fdiscover%2F%3AeventSlug%2F&t=56&t_main=console

Solution Brainstorm

Replace the URL containing images from localhost/private IP with a default image or delete it. This is an useful feature for webapps where most of the images are stored locally.

Related to getsentry/sentry-capacitor#318

[brnbs]

It would also be helpful for electron apps if we could implement our own URL override logic. For example, if I host the assets packaged into the electron app on a public server and change the URL during recording, I could load the images (and CSS files?) in Session Replay.

[mydea]

Hey there!

Right now, I think the best solution for this is to ensure any images (or at least any images that are hosted on localhost/private IPs) are blocked. If you opted out of blockAllMedia, you can do that via block: ['img'] or a more specific selector of your choosing.

Mid-term, we are investigating asset caching, which may help in some way with this problem - see: #7007

To make sure, could you paste your replay config here?

[lucas-zimerman]

Hey there!

Right now, I think the best solution for this is to ensure any images (or at least any images that are hosted on localhost/private IPs) are blocked. If you opted out of blockAllMedia, you can do that via block: ['img'] or a more specific selector of your choosing.

Mid-term, we are investigating asset caching, which may help in some way with this problem - see: #7007

To make sure, could you paste your replay config here?

blockAllMedia does work indeed with images, but it doesn't seems to remove the following code/image from the html

  <link rel="icon" type="image/png" href="assets/icon/favicon.png"/>

Is there another way to remove this link or reference?

EDIT: Sample here: https://github.com/lucas-zimerman/sample-react

But using the following options:

stickySession: true, 
sessionSampleRate: 1.0, 
blockAllMedia: false

[mydea]

I think it should work to block this with a selector like this:

new Replay({
  block: ['link[rel="icon"]']
})

You can add any further CSS selectors in there to block them from being rendered!

We may want to add this to the blockAllMedia setting as well cc @billyvg ?

[lucas-zimerman]

I think it should work to block this with a selector like this:

new Replay({
  block: ['link[rel="icon"]']
})

You can add any further CSS selectors in there to block them from being rendered!

We may want to add this to the blockAllMedia setting as well cc @billyvg ?

Oh that did the trick, and also this was also helpful for me to sort the CSP errors that I saw on #7183 by adding this block rule: 'base[href="/"]'

[mydea]

nice! Thanks for writing in.

[lucas-zimerman]

nice! Thanks for writing in.

Is it ok if I open a PR adding both base[href="/"]' and link[rel="icon"] to the block list?

[billyvg]

@lucas-zimerman That'd be great, thanks!