CODEWITHSUNDEEP
javascriptjqueryajaxgoogle-chrome
Bastien D
Bastien D

Reputation: 1465

Hide basic authentication popup with jquery in Chrome

I use this code for a basic anthentification of REST API. Unfortunately, when the user/pass is wrong Google Chrome displays a popup. Firefox does not do that.

$.ajax({
    type: "GET",
    url: "/ad",
    dataType: 'json',
    async: false,
    username: 'username',
    password: 'password',
    success: function (){
        alert('success');
        return false;
    },
    error: function(){
        alert('error');
        return false;
    }
});

Edit 1 :

I use Laravel Framework

Upvotes: 2

Views: 2259

Answers (2)

SamuelTee
SamuelTee

Reputation: 188

If you don't have server control, there is no (at least not known to me) way to prevent that. If you DO have server control you can do two things:

  1. Change the response status code from standard 401 to something else. However, this is commonly not known as best practice since the status code does then not state the actual issue (authentication error).

  2. Change the response header WWW-Authenticate: Basic realm="your_realm" to a custom value like WWW-Authenticate: x-Basic realm="your_realm" (Note the x-there!).

That should prevent any default login handling.

Update 1

As for using Laravel this would be an example of setting the correct response header WWW-Authenticate (changed Basic to x-Basic):

Route::filter('auth', function()
{
    $credentials = ['email' => Request::getUser(), 'password' => Request::getPassword()];

    if (!Auth::once($credentials)) {
        $response   = ['error' => true, 'message' => 'Unauthorized request'];
        $code       = 401;
        $headers    = ['WWW-Authenticate' => 'x-Basic'];

        return Response::json($response, $code, $headers);
    }
});

Upvotes: 4

Munim
Munim

Reputation: 6520

I think you can pass the username and password in the URL instead for HTTP authentication. Give this a shot: 

$.ajax({
    type: "GET",
    url: "http://username:[email protected]/ad",
    dataType: 'json',
    async: false,
    success: function (){
        alert('success');
        return false;
    },
    error: function(){
        alert('error');
        return false;
    }
});

Upvotes: 0

Related Questions