Comment empêcher le navigateur d'appeler le popup d'authentification de base et de gérer l'erreur 401 à l'aide de Jquery?

Je dois envoyer une demande d'autorisation en utilisant l'authentification de base. J'ai implémenté cela avec succès en utilisant jquery. Cependant, lorsque j'obtiens une erreur 401, la fenêtre contextuelle du navigateur d'authentification de base est ouverte et le rappel d'erreur jquery ajax n'est pas appelé.

J'ai aussi été confronté à ce problème récemment. Étant donné que vous ne pouvez pas modifier le comportement par défaut du navigateur pour afficher la fenêtre contextuelle en cas 401( authentification de base ou digest ), il existe deux façons de résoudre ce problème:

• Modifiez la réponse du serveur pour ne pas renvoyer un fichier 401. Renvoyez un 200code à la place et gérez-le dans votre client jQuery.

• Remplacez la méthode que vous utilisez pour l'autorisation par une valeur personnalisée dans votre en-tête. Les navigateurs afficheront la fenêtre contextuelle pour Basic et Digest . Vous devez changer cela à la fois sur le client et sur le serveur.

  headers : {
    "Authorization" : "BasicCustom"
  }

Veuillez également jeter un œil à ceci pour un exemple d'utilisation de jQuery avec l'authentification de base.

Renvoyez un code d'état 400 générique, puis traitez ce côté client.

Ou vous pouvez conserver le 401 et ne pas renvoyer l'en-tête WWW-Authenticate, ce à quoi le navigateur répond avec la fenêtre contextuelle d'authentification. Si l'en-tête WWW-Authenticate est manquant, le navigateur ne demandera pas d'informations d'identification.

Vous pouvez supprimer la fenêtre contextuelle d'authentification de base avec une URL de requête ressemblant à ceci:

https://username:[email protected]/admin/...

Si vous obtenez une erreur 401 (nom d'utilisateur ou mot de passe incorrect), elle sera correctement gérée avec le rappel d'erreur jquery. Cela peut causer des problèmes de sécurité (en cas de protocole http au lieu de https), mais cela fonctionne.

UPD: la prise en charge de cette solution sera supprimée dans Chrome 59

Comme d'autres l'ont souligné, la seule façon de modifier le comportement du navigateur est de s'assurer que la réponse ne contient pas de code d'état 401 ou, si c'est le cas, n'inclut pas l'en- WWW-Authenticate: Basictête. Puisque changer le code d'état n'est pas très sémantique et indésirable, une bonne approche consiste à supprimer l'en- WWW-Authenticatetête. Si vous ne pouvez pas ou ne voulez pas modifier votre application de serveur Web, vous pouvez toujours la servir ou la proxy via Apache (si vous n'utilisez pas déjà Apache).

Voici une configuration pour Apache pour réécrire la réponse pour supprimer l'en-tête WWW-Authenticate IFF la requête contient l'en-tête X-Requested-With: XMLHttpRequest(qui est défini par défaut par les principaux frameworks Javascript tels que JQuery / AngularJS, etc ...) ET la réponse contient le en-tête WWW-Authenticate: Basic.

Testé sur Apache 2.4 (je ne sais pas si cela fonctionne avec 2.2). Cela dépend du mod_headersmodule en cours d'installation. (Sur Debian / Ubuntu, sudo a2enmod headerset redémarrez 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>   

Utilisez X-Requested-With: XMLHttpRequest avec votre en-tête de demande. L'en-tête de réponse ne contiendra donc pas WWW-Authenticate: Basic.

beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', ("Basic "
                        .concat(btoa(key))));
                    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                },

Si vous utilisez un serveur IIS, vous pouvez configurer la réécriture d'URL IIS (v2) pour réécrire l'en- WWW-Authenticationtête Nonesur l'URL demandée.

Guidez ici .

La valeur que vous souhaitez modifier est response_www_authenticate.

Si vous avez besoin de plus d'informations, ajoutez un commentaire et je publierai le fichier web.config.

Si l'en-tête WWW-Authenticate est supprimé, vous n'obtiendrez pas la mise en cache des informations d'identification et ne récupérerez pas l'en-tête d'autorisation dans la demande. Cela signifie que vous devrez maintenant entrer les informations d'identification pour chaque nouvelle demande que vous générez.

Sinon, si vous pouvez personnaliser la réponse de votre serveur, vous pouvez renvoyer un 403 Forbidden.

Le navigateur n'ouvrira pas la fenêtre d'authentification et le rappel jquery sera appelé.

Dans Safari, vous pouvez utiliser des requêtes synchrones pour éviter que le navigateur n'affiche la fenêtre contextuelle. Bien sûr, les requêtes synchrones ne doivent être utilisées que dans ce cas pour vérifier les informations d'identification de l'utilisateur ... Vous pouvez utiliser une telle requête avant d'envoyer la requête réelle qui peut entraîner une mauvaise expérience utilisateur si le contenu (envoyé ou reçu) est assez lourd.

    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');

Créez une URL / login, puis acceptez les paramètres "utilisateur" et "mot de passe" via GET et ne nécessitent pas d'authentification de base. Ici, utilisez php, node, java, peu importe et analysez votre fichier passwd et faites correspondre les paramètres (utilisateur / pass) avec lui. S'il y a une correspondance, redirigez vers http: // utilisateur: [email protected]/ (cela définira les informations d'identification sur votre navigateur) sinon, envoyez la réponse 401 (sans l'en-tête WWW-Authenticate).

De l'arrière avec Spring Boot, j'ai utilisé BasicAuthenticationEntryPoint personnalisé:

@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);
            }
        }
    };
}