Javascript `fetch` requests fail on HTTP-Auth protected staging envs due to embedded credentials

In several places throughout donate-neo's Javascript code, we fetch JSON from various local endpoints. We fetch location data to populate the country and state form fields; we fetch the ALTCHA challenge from the backend.

donate-neo is expected to operate properly in several different deployment contexts. Production is the most important by far, but staging runs a close second, and the transient review-apps are also crucial to a healthy donate-neo. However, all of these environments besides production are typically gently locked against external access via HTTP Authentication.

Historically, when a user authenticated against initial page access, when subsequent fetches or **XMLHttpRequest**s were made, the HTTP-Auth credentials would be embedded in the URL to be fetched or XMLHttpRequested in this classic fashion:

https://username:password@www.example.com/

This method of fulfilling HTTP-Auth credential requests has been deprecated in all major browsers. Why it is still the default browser behavior for fetch in this particular context, if no other accommodations for authentication are made, is beyond me - but it is.

The heart of the matter is this: donate-neo does not currently make any other additional accommodations, and so it works without issue in local development environments, and in production, but in review-apps and on staging (at least, when we aren't intentionally shutting off HTTP-Auth on staging), these straightforward plumbing-level calls are failing.

To resolve this issue, we should explicitly include the credentials in our fetch calls.

Assignee Loading
Time tracking Loading