Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Fetch API in browsers that support it #7371

Merged
merged 3 commits into from
Oct 9, 2018
Merged

Use Fetch API in browsers that support it #7371

merged 3 commits into from
Oct 9, 2018

Conversation

kkaefer
Copy link
Contributor

@kkaefer kkaefer commented Oct 5, 2018

We're currently using the XmlHttpRequest to retrieve data like tiles from the backend server.

This PR switches to the Fetch API where it is supported to enable sending correct referrers from the worker bundle. XHR requests don't send a correct referrer for code from a blob URL worker bundle in Safari, Chrome and Edge (and the Referer header is disallowed in this API), while the Fetch API allows us to correctly set the page's referrer URL, as demonstrated by this small snippet:

<script>
let worker = new Worker(window.URL.createObjectURL(new Blob([`
const referrer = "${document.location.href}";
const url = 'https://example.com'

const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();

fetch(new Request(url, { referrer }))
`], { type: 'text/javascript' })));
</script>

Launch Checklist

  • briefly describe the changes in this PR
  • write tests for all new functionality
  • document any changes to public APIs
  • post benchmark scores
  • manually test the debug page

@@ -144,6 +144,8 @@ class Style extends Evented {

this._resetUpdates();

this.dispatcher.broadcast('setReferrer', getReferrer());
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are dispatching the referrer to the workers when we set up the Style object. On single page applications, the pathname may change, but we'll continue to use the initial pathname. Should we rebroadcast a new pathname?

t.end();
});
window.server.respond();
});
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've removed the special casing for empty array buffers. There's nothing inherently wrong with empty 200 responses. The reason we originally added this special case is for images that had an empty response, but that is already handled directly in the getImage call.

@@ -300,14 +322,14 @@ test("mapbox", (t) => {
t.test('does not POST when mapboxgl.ACCESS_TOKEN is not set', (t) => {
config.ACCESS_TOKEN = null;

event.postTurnstileEvent([' a.tiles.mapxbox.com']);
event.postTurnstileEvent(mapboxTileURLs);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're passing full tile URLs from the TileJSON file here, not just host names.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants