search

DataDog / browser-sdk

Datadog Browser SDK
Apache License 2.0
291 stars 130 forks source link

🐛 HTML style attribute doesn't replace relative urls #2042

Open beszabo1 opened 1 year ago

beszabo1 commented 1 year ago

Describe the bug Related to this: https://github.com/DataDog/browser-sdk/pull/1792 Getting a resource via relative url in an element's style attribute will keep it as is, which breaks in the iframe upon viewing session replay. Our specific problem is that urls starting with a leading slash will request the resource from session-replay-datadoghq.com.

To Reproduce

  1. Create an element like this: <div style="background-image: url(/static/path/to/resource.png);"></div>
  2. Create and check a replay containing it
  3. The element remains unmodified, still trying for /static/path/to/resource.png, which resolves on session-replay-datadoghq.com.

Expected behavior The resource should try on the original domain, url(https://our.domain.com/static/path/to/resource.png) would be how I expect it to look in the replay.

yannickadam commented 1 year ago

Hi @beszabo1,

You are right that URLs within style elements remain unmodified in the replay sandbox. However, to account for this, the replay sandbox should set the base href to your host.

Example while testing: <base href="http://localhost:8200/">

Are you dynamically updating the base href? Or could you point us to a website where you experience the issue?

beszabo1 commented 1 year ago

This is an issue with iframe, no matter if I set the base or not this will happen.

When setting base correctly to our root, code like this works url(static/path/to/resource.png) where it doesn't do so without it, however url(/static/path/to/resource.png) behaves as I described above since it is (in my opinion incorrectly) considered an 'absolute' path.

edit: I found an article that describes the problem very well, and in the comments there are the correct terminologies, which I didn't use: https://www.bennadel.com/blog/4341-base-tag-href-doesnt-affect-document-root-relative-urls.htm

beszabo1 commented 1 year ago

Additionally, it isn't really related, but worth noting, the replay sandbox sets the base to the currently viewed page, which would break root-relative links even if iframe handled them correctly, but setting our base as <base href="/"> in our application fixes this issue, since the sandbox handles it correctly.