I need to send authorization request using basic auth. I have successfully implemented this using jquery. However when I get 401 error basic auth browser popup is opened and jquery ajax error callback is not called.
12 Answers
I was facing this issue recently, too. Since you can't change the browser's default behavior of showing the popup in case of a 401
(basic or digest authentication), there are two ways to fix this:
- Change the server response to not return a
401
. Return a200
code instead and handle this in your jQuery client. Change the method that you're using for authorization to a custom value in your header. Browsers will display the popup for Basic and Digest. You have to change this on both the client and the server.
headers : { "Authorization" : "BasicCustom" }
Please also take a look at this for an example of using jQuery with Basic Auth.
-
10WWW-Authenticate:xBasic realm=com.example can do it, together with classic 401 status code. this blog post showed me the hint ( I am not the owner of the blog )loudvchar.blogspot.ca/2010/11/…– P.MDec 13, 2012 at 2:26
-
2@P.M, the blog's answer is a perfect solution. Note that if using
<security:http-basic/>
you do not need to definebasicAuthenticationFilter
but should define it as<security:http-basic entry-point-ref="myBasicAuthenticationEntryPoint"/>
. Jul 17, 2013 at 6:32 -
Can you plz tell me how to override the response before sending back to client,i am using jaxrs with basic auth . which class do i need to override for modifying the response?– mohApr 18, 2017 at 12:46
-
For some reason I am getting the popup when returning a
401
andWWW-Authenticate:Bearer WWW-Authenticate:NTLM WWW-Authenticate:Negotiate
Do you know why that would be– DevEngFeb 16, 2018 at 16:24 -
2
Return a generic 400 status code, and then process that client-side.
Or you can keep the 401, and not return the WWW-Authenticate header, which is really what the browser is responding to with the authentication popup. If the WWW-Authenticate header is missing, then the browser won't prompt for credentials.
-
7@MortenHaraldsen Well the 401 response is the proper response to give in this occasion, the problem is that the browser is automatically handling this natively, instead of allowing the javascript app to handle it. You can stick to the standard, by not returning the proper response that the standard recommends, or you can choose to not stick to the standard, by returning the standard-recommended response code. Take your pick :)– IbraheemFeb 26, 2015 at 19:30
-
In my express app, I fixed this with one line:
res.removeHeader('www-authenticate'); // prevents browser from popping up a basic auth window.
– gstroupFeb 13, 2016 at 0:05 -
2@Ibraheem, couldn't have stated it better myself. Standards are created by people who sit down and talk, not necessarily the ones who sit down and code. Aug 1, 2016 at 17:33
-
@Ibraheem not working for the current Chrome browser. Anyway to circumvent this now?– tnkhJun 29, 2021 at 0:38
You can suppress basic auth popup with request url looking like this:
https://username:password@example.com/admin/...
If you get 401 error (wrong username or password) it will be correctly handled with jquery error callback. It can cause some security issues (in case of http protocol instead of https), but it's works.
UPD: This solution support will be removed in Chrome 59
-
AMAZING!!!! Solved my problem as the issue was trying 192.168.1.1 and the router kept asking for Auth. Feb 5, 2015 at 10:00
-
2If you go to the "Network" tab under the Developer tools, in any browser, you are able to read the username and password in plain text. It works, though. Sep 30, 2015 at 14:00
-
22Do not ever do this please, the requests logs on your webserver are much more valuable to me now.. Free usernames and password combo's plus the response code! Thanks– RemcoMar 9, 2016 at 9:26
-
but how can someone prevent the username and password from being viewed– sdx11Apr 10, 2017 at 10:38
-
4This authentication method is becoming depreciated and Chrome will be dropping support for embedded credentials i.e.
https://user:pass@host/
in M59 around June 2017. See this chromestatus blog post for more info.– GarywooApr 26, 2017 at 10:34
As others have pointed out, the only way to change the browser's behavior is to make sure the response either does not contain a 401 status code or if it does, not include the WWW-Authenticate: Basic
header. Since changing the status code is not very semantic and undesirable, a good approach is to remove the WWW-Authenticate
header. If you can't or don't want to modify your web server application, you can always serve or proxy it through Apache (if you are not using Apache already).
Here is a configuration for Apache to rewrite the response to remove the WWW-Authenticate header IFF the request contains contains the header X-Requested-With: XMLHttpRequest
(which is set by default by major Javascript frameworks such as JQuery/AngularJS, etc...) AND the response contains the header WWW-Authenticate: Basic
.
Tested on Apache 2.4 (not sure if it works with 2.2).
This relies on the mod_headers
module being installed.
(On Debian/Ubuntu, sudo a2enmod headers
and restart Apache)
<Location />
# Make sure that if it is an XHR request,
# we don't send back basic authentication header.
# This is to prevent the browser from displaying a basic auth login dialog.
Header unset WWW-Authenticate "expr=req('X-Requested-With') == 'XMLHttpRequest' && resp('WWW-Authenticate') =~ /^Basic/"
</Location>
-
1
-
Use X-Requested-With: XMLHttpRequest with your request header. So the response header will not contain WWW-Authenticate:Basic.
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', ("Basic "
.concat(btoa(key))));
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
},
-
1That had no effect for me. What type of server are you using that WWW-Authenticate is not sent included when you set XMLHttpRequest? Oct 21, 2015 at 15:14
-
If you're using an IIS Server, you could setup IIS URL Rewriting (v2) to rewrite the WWW-Authentication
header to None
on the requested URL.
The value you want to change is response_www_authenticate
.
If you need more info, add a comment and I'll post the web.config file.
-
1This worked out great. I would like to note that the "response" part must be written as "RESPONSE_www_authenticate" in URL Rewrite v2 on IIS 7.5. Jun 21, 2016 at 13:42
If WWW-Authenticate header is removed, then you wont get the caching of credentials and wont get back the Authorization header in request. That means now you will have to enter the credentials for every new request you generate.
-
-
This assumes you have control over the server, which unfortunately is not always the case.– MichaelJan 27, 2021 at 23:20
-
So, there's no way to cache the header when not using WWW-Authenticate? This is fine if all that has to be done is return a token from the server and use that for future Authorization header AJAX requests and save it in local or session storage, but if there is a way to cache it without using the standard popup, that'd be nice, especially since visits to sites via browser address bar do not allow injected headers like Authorization. Jul 28, 2021 at 14:58
Haven't explored the why or scope of fix, but I found if I'm doing a fetch
request, and add the header x-requested-with: 'XMLHttpRequest'
, I no longer get the popup auth box in Chrome and don't need a server change. It's talking to the node http
library. Looks like WWW-Authenticate
header comes back from the server, but Chrome handles it differently. Probably spec'd.
Example:
fetch(url, {
headers: {
Authorization: `Basic ${auth}`,
'x-requested-with': 'XMLHttpRequest'
},
credentials: 'include'
})
Alternatively, if you can customize your server response, you could return a 403 Forbidden.
The browser will not open the authentication popup and the jquery callback will be called.
-
5That goes against the HTTP 1.1 specification, where it is stated that "... Authorization will not help and request SHOULD NOT be repeated". Feb 27, 2013 at 11:04
-
1It is valid to receive 403 while being authenticated for resources you are not allowed access to, 401 should be sent where you have not yet been authenticated. Jul 17, 2013 at 6:21
In Safari, you can use synchronous requests to avoid the browser to display the popup. Of course, synchronous requests should only be used in this case to check user credentials... You can use a such request before sending the actual request which may cause a bad user experience if the content (sent or received) is quite heavy.
var xmlhttp=new XMLHttpRequest;
xmlhttp.withCredentials=true;
xmlhttp.open("POST",<YOUR UR>,false,username,password);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-
In other contexts, using "OPTIONS" instead of "POST" may also help. Sep 28, 2018 at 12:08
Make an /login url, than accept "user" and "password" parameters via GET and don't require basic auth. Here, use php, node, java, whatever and parse your passwd file and match parameters (user/pass) against it. If there is a match then redirect to http://user:pass@domain.com/ (this will set credential on your browser) if not, send 401 response (without WWW-Authenticate header).
-
1That would be super-great for anybody trying to sniff username/passwords out of plain-text man in the middle attacks!– AjaxJan 9, 2018 at 19:58
From back side with Spring Boot I've used custom BasicAuthenticationEntryPoint:
@Override
protected void configure(HttpSecurity http) throws Exception {
http.cors().and().authorizeRequests()
...
.antMatchers(PUBLIC_AUTH).permitAll()
.and().httpBasic()
// https://www.baeldung.com/spring-security-basic-authentication
.authenticationEntryPoint(authBasicAuthenticationEntryPoint())
...
@Bean
public BasicAuthenticationEntryPoint authBasicAuthenticationEntryPoint() {
return new BasicAuthenticationEntryPoint() {
{
setRealmName("pirsApp");
}
@Override
public void commence
(HttpServletRequest request, HttpServletResponse response, AuthenticationException authEx)
throws IOException, ServletException {
if (request.getRequestURI().equals(PUBLIC_AUTH)) {
response.sendError(HttpStatus.PRECONDITION_FAILED.value(), "Wrong credentials");
} else {
super.commence(request, response, authEx);
}
}
};
}