Referrer error in iframe

[Pessimistress]

mapbox-gl-js version:
0.53.1

browser:
Chrome 72.0.3626

Steps to Trigger Behavior

1. Save this page https://gist.github.com/Pessimistress/ae04af5ee5537652174f36a3a54cf508
2. Serve with local dev server
3. Map does not load. Error:

Uncaught TypeError: Failed to construct 'Request': Referrer 'http://127.0.0.1:8000http://127.0.0.1:8000/4b78be26-cdf7-42a9-a59f-097945b09779' is not a valid URL.
    at ajax.js:95

I only see this error when using dynamically generated iframe content.
This was working with mapbox-gl v0.50 and prior.

Looks like the issue was introduced here:

mapbox-gl-js/src/util/ajax.js

Line 82 in eec8cd5

const origin = window.location.origin;

If window.top.location is used instead of window.location the issue will go away.

[kkaefer]

Thanks for reporting this issue. It looks like window.top.location works if the embedding document is loading the map document via a blob URL or data URL, but fails if it's loaded via a http URL that isn't the same origin as the embedding document.

[Pessimistress]

I suspect this is a bug on Chrome's end. Though window.location.pathname.startsWith(origin) should be sufficient to catch it?

[kkaefer]

Safari and Firefox have the same behavior. When a URL is loaded via blob URL, the pathname is the full blob URL (e.g. http://127.0.0.1:8000/4b78be26-cdf7-42a9-a59f-097945b09779), which doesn't seem sensible. Using window.top.location would fail if the embedded document was loaded from a different origin than the host document, so I think we'll need to detect blob/data URLs and only use window.top.location (or window.parent.location?) in that case.

[kkaefer]

#8612 now uses the creating document's referrer in iframes loaded from a blob URL.