This problem only happens in Firefox, I've also tried Chrome and it's OK there. I created simple web page for testing purposes to reproduce the problem. The link is here. The contents of the page are:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>URL Test with basic auth</title>
<meta name="description" content="Test for Firefox and handling of history API when basic auth is present">
<meta name="author" content="Ondrej">
</head>
<body>
<h1>URL Test</h1>
<script>
const addParameter = () => window.history.replaceState(null, '', '/?ok=1')
window.addEventListener('DOMContentLoaded', () => {
addParameter()
})
</script>
</body>
</html>
Upon loading the web site, I want to add query parameter to the URL by using History API replaceState.
Now, the web server does not contain any actual HTTP basic authentication but if you use it as part of URL, it throws the error. Try copy pasting this into your URL bar:
https://user:pass@offbeat-cattle.surge.sh
The problem only happens in Firefox browser (tested on 94.0.1) where it fails to add query parameter to URL and throws this error in the console:
Uncaught DOMException: The operation is insecure.