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 fetch
es or **XMLHttpRequest
**s were made, the HTTP-Auth credentials would be embedded in the URL to be fetch
ed or XMLHttpRequest
ed 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.