¿Cómo desconectar al usuario del sitio web utilizando la autenticación BASIC?

¿Es posible desconectar al usuario de un sitio web si está utilizando autenticación básica?

La sesión de asesinato no es suficiente, ya que, una vez que el usuario se autentica, cada solicitud contiene información de inicio de sesión, por lo que el usuario inicia sesión automáticamente la próxima vez que acceda al sitio con las mismas credenciales.

La única solución hasta ahora es cerrar el navegador, pero eso no es aceptable desde el punto de vista de la usabilidad.

La autenticación básica no fue diseñada para administrar el cierre de sesión. Puedes hacerlo, pero no de forma completamente automática.

Lo que debe hacer es que el usuario haga clic en un enlace de cierre de sesión y envíe un '401 no autorizado' en respuesta, utilizando el mismo reino y el mismo nivel de carpeta URL que el 401 normal que envía solicitando un inicio de sesión.

Luego se les debe indicar que ingresen las credenciales incorrectas, por ejemplo. un nombre de usuario y contraseña en blanco y, en respuesta, envía una página de "Ha cerrado la sesión correctamente". Las credenciales incorrectas / en blanco sobrescribirán las credenciales correctas anteriores.

En resumen, el script de cierre de sesión invierte la lógica del script de inicio de sesión, solo devuelve la página de éxito si el usuario no pasa las credenciales correctas.

La pregunta es si el cuadro de contraseña algo curioso "no ingrese su contraseña" cumplirá con la aceptación del usuario. Los administradores de contraseñas que intentan completar automáticamente la contraseña también pueden interponerse aquí.

Editar para agregar en respuesta al comentario: volver a iniciar sesión es un problema ligeramente diferente (a menos que requiera un cierre de sesión / inicio de sesión de dos pasos, obviamente). Debe rechazar (401) el primer intento de acceder al enlace de reinicio de sesión, luego aceptar el segundo (que presumiblemente tiene un nombre de usuario / contraseña diferente). Hay algunas maneras de hacer esto. Una sería incluir el nombre de usuario actual en el enlace de cierre de sesión (p. Ej. / Relogin? Username) y rechazar cuando las credenciales coincidan con el nombre de usuario.

Una adición a la respuesta de bobince ...

Con Ajax puede tener su enlace / botón 'Cerrar sesión' conectado a una función Javascript. Haga que esta función envíe XMLHttpRequest con un nombre de usuario y contraseña incorrectos. Esto debería recuperar un 401. Luego, vuelva a establecer document.location en la página previa al inicio de sesión. De esta forma, el usuario nunca verá el cuadro de diálogo de inicio de sesión adicional durante el cierre de sesión, ni tendrá que acordarse de poner credenciales incorrectas.

Haga que el usuario haga clic en un enlace a https: // log: out@example.com/ . Eso sobrescribirá las credenciales existentes con las inválidas; cerrándolos

Puedes hacerlo completamente en JavaScript:

IE tiene (durante mucho tiempo) API estándar para borrar la caché de autenticación básica:

document.execCommand("ClearAuthenticationCache")

Debería volver verdadero cuando funciona. Devuelve ya sea falso, indefinido o explota en otros navegadores.

Los nuevos navegadores (a partir de diciembre de 2012: Chrome, Firefox, Safari) tienen un comportamiento "mágico". Si ven una solicitud de autenticación básica exitosa con cualquier otro nombre de usuario falso (digamos logout), borran el caché de credenciales y posiblemente lo configuran para ese nuevo nombre de usuario falso, que debe asegurarse de que no sea un nombre de usuario válido para ver el contenido.

Un ejemplo básico de eso es:

var p = window.location.protocol + '//'
// current location must return 200 OK for this GET
window.location = window.location.href.replace(p, p + 'logout:password@')

Una forma "asíncrona" de hacer lo anterior es hacer una llamada AJAX utilizando el logoutnombre de usuario. Ejemplo:

(function(safeLocation){
    var outcome, u, m = "You should be logged out now.";
    // IE has a simple solution for it - API:
    try { outcome = document.execCommand("ClearAuthenticationCache") }catch(e){}
    // Other browsers need a larger solution - AJAX call with special user name - 'logout'.
    if (!outcome) {
        // Let's create an xmlhttp object
        outcome = (function(x){
            if (x) {
                // the reason we use "random" value for password is 
                // that browsers cache requests. changing
                // password effectively behaves like cache-busing.
                x.open("HEAD", safeLocation || location.href, true, "logout", (new Date()).getTime().toString())
                x.send("")
                // x.abort()
                return 1 // this is **speculative** "We are done." 
            } else {
                return
            }
        })(window.XMLHttpRequest ? new window.XMLHttpRequest() : ( window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : u ))
    }
    if (!outcome) {
        m = "Your browser is too old or too weird to support log out functionality. Close all windows and restart the browser."
    }
    alert(m)
    // return !!outcome
})(/*if present URI does not return 200 OK for GET, set some other 200 OK location here*/)

También puede convertirlo en un marcador:

javascript:(function(c){var a,b="You should be logged out now.";try{a=document.execCommand("ClearAuthenticationCache")}catch(d){}a||((a=window.XMLHttpRequest?new window.XMLHttpRequest:window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):void 0)?(a.open("HEAD",c||location.href,!0,"logout",(new Date).getTime().toString()),a.send(""),a=1):a=void 0);a||(b="Your browser is too old or too weird to support log out functionality. Close all windows and restart the browser.");alert(b)})(/*pass safeLocation here if you need*/);

Se confirma que la siguiente función funciona para Firefox 40, Chrome 44, Opera 31 e IE 11.
Bowser se usa para la detección del navegador, también se usa jQuery.

- secUrl es la url de un área protegida por contraseña desde la que cerrar sesión.
- redirUrl es la url de un área no protegida por contraseña (página de cierre de sesión correcta).
- es posible que desee aumentar el temporizador de redireccionamiento (actualmente 200 ms).

function logout(secUrl, redirUrl) {
    if (bowser.msie) {
        document.execCommand('ClearAuthenticationCache', 'false');
    } else if (bowser.gecko) {
        $.ajax({
            async: false,
            url: secUrl,
            type: 'GET',
            username: 'logout'
        });
    } else if (bowser.webkit) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", secUrl, true);
        xmlhttp.setRequestHeader("Authorization", "Basic logout");
        xmlhttp.send();
    } else {
        alert("Logging out automatically is unsupported for " + bowser.name
            + "\nYou must close the browser to log out.");
    }
    setTimeout(function () {
        window.location.href = redirUrl;
    }, 200);
}

Aquí hay un ejemplo muy simple de Javascript usando jQuery:

function logout(to_url) {
    var out = window.location.href.replace(/:\/\//, '://log:out@');

    jQuery.get(out).error(function() {
        window.location = to_url;
    });
}

Este usuario de cierre de sesión sin mostrarle el navegador cuadro de inicio de sesión de nuevo, a continuación, le redirigir a un desconectó página

Esto no es directamente posible con la autenticación básica.

No hay ningún mecanismo en la especificación HTTP para que el servidor le diga al navegador que deje de enviar las credenciales que el usuario ya presentó.

Hay "hacks" (ver otras respuestas) que generalmente involucran el uso de XMLHttpRequest para enviar una solicitud HTTP con credenciales incorrectas para sobrescribir las que se proporcionaron originalmente.

Esto está funcionando para IE / Netscape / Chrome:

      function ClearAuthentication(LogOffPage) 
  {
     var IsInternetExplorer = false;    

     try
     {
         var agt=navigator.userAgent.toLowerCase();
         if (agt.indexOf("msie") != -1) { IsInternetExplorer = true; }
     }
     catch(e)
     {
         IsInternetExplorer = false;    
     };

     if (IsInternetExplorer) 
     {
        // Logoff Internet Explorer
        document.execCommand("ClearAuthenticationCache");
        window.location = LogOffPage;
     }
     else 
     {
        // Logoff every other browsers
    $.ajax({
         username: 'unknown',
         password: 'WrongPassword',
             url: './cgi-bin/PrimoCgi',
         type: 'GET',
         beforeSend: function(xhr)
                 {
            xhr.setRequestHeader("Authorization", "Basic AAAAAAAAAAAAAAAAAAA=");
         },

                 error: function(err)
                 {
                    window.location = LogOffPage;
             }
    });
     }
  }


  $(document).ready(function () 
  {
      $('#Btn1').click(function () 
      {
         // Call Clear Authentication 
         ClearAuthentication("force_logout.html"); 
      });
  });          

En realidad es bastante simple.

Simplemente visite lo siguiente en su navegador y use credenciales incorrectas: http: // username: password@yourdomain.com

Eso debería "cerrar sesión".

Todo lo que necesita es redirigir al usuario en alguna URL de cierre de sesión y devolver el 401 Unauthorizederror. En la página de error (que debe ser accesible sin autenticación básica) debe proporcionar un enlace completo a su página de inicio (incluido el esquema y el nombre de host). El usuario hará clic en este enlace y el navegador volverá a solicitar credenciales.

Ejemplo para Nginx:

location /logout {
    return 401;
}

error_page 401 /errors/401.html;

location /errors {
    auth_basic off;
    ssi        on;
    ssi_types  text/html;
    alias /home/user/errors;
}

Página de error /home/user/errors/401.html:

<!DOCTYPE html>
<p>You're not authorised. <a href="<!--# echo var="scheme" -->://<!--# echo var="host" -->/">Login</a>.</p>

function logout() {
  var userAgent = navigator.userAgent.toLowerCase();

  if (userAgent.indexOf("msie") != -1) {
    document.execCommand("ClearAuthenticationCache", false);
  }

  xhr_objectCarte = null;

  if(window.XMLHttpRequest)
    xhr_object = new XMLHttpRequest();
  else if(window.ActiveXObject)
    xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  else
    alert ("Your browser doesn't support XMLHTTPREQUEST");

  xhr_object.open ('GET', 'http://yourserver.com/rep/index.php', false, 'username', 'password');
  xhr_object.send ("");
  xhr_object = null;

  document.location = 'http://yourserver.com'; 
  return false;
}

 function logout(url){
    var str = url.replace("http://", "http://" + new Date().getTime() + "@");
    var xmlhttp;
    if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
    else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4) location.reload();
    }
    xmlhttp.open("GET",str,true);
    xmlhttp.setRequestHeader("Authorization","Basic xxxxxxxxxx")
    xmlhttp.send();
    return false;
}

Según lo que leí arriba, obtuve una solución simple que funciona en cualquier navegador:

1) en su página de cierre de sesión llama a un ajax a su back-end de inicio de sesión. Su back-end de inicio de sesión debe aceptar el usuario de cierre de sesión. Una vez que el back end acepta, el navegador borra al usuario actual y asume el usuario "cerrar sesión".

$.ajax({
    async: false,
    url: 'http://your_login_backend',
    type: 'GET',
    username: 'logout'
});      

setTimeout(function () {
    window.location.href = 'http://normal_index';
}, 200);

2) Ahora, cuando el usuario vuelve al archivo de índice normal, intentará ingresar automáticamente en el sistema con el usuario "cerrar sesión", en esta segunda vez debe bloquearlo respondiendo con 401 para invocar el diálogo de inicio de sesión / contraseña.

3) Hay muchas formas de hacerlo, creé dos back-end de inicio de sesión, uno que acepta al usuario que cierra sesión y otro que no. Mi página de inicio de sesión normal usa la que no acepta, mi página de cierre de sesión usa la que la acepta.

Acabo de probar lo siguiente en Chrome (79), Firefox (71) y Edge (44) y funciona bien. Aplica la solución de script como otros anotaron anteriormente.

Simplemente agregue un enlace "Cerrar sesión" y cuando haga clic en devolver el siguiente html

    <div>You have been logged out. Redirecting to home...</div>    

<script>
    var XHR = new XMLHttpRequest();
    XHR.open("GET", "/Home/MyProtectedPage", true, "no user", "no password");
    XHR.send();

    setTimeout(function () {
        window.location.href = "/";
    }, 3000);
</script>

Este JavaScript debe funcionar para todos los navegadores de la última versión:

//Detect Browser
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
var Host = window.location.host;


//Clear Basic Realm Authentication
if(isIE){
//IE
    document.execCommand("ClearAuthenticationCache");
    window.location = '/';
}
else if(isSafari)
{//Safari. but this works mostly on all browser except chrome
    (function(safeLocation){
        var outcome, u, m = "You should be logged out now.";
        // IE has a simple solution for it - API:
        try { outcome = document.execCommand("ClearAuthenticationCache") }catch(e){}
        // Other browsers need a larger solution - AJAX call with special user name - 'logout'.
        if (!outcome) {
            // Let's create an xmlhttp object
            outcome = (function(x){
                if (x) {
                    // the reason we use "random" value for password is 
                    // that browsers cache requests. changing
                    // password effectively behaves like cache-busing.
                    x.open("HEAD", safeLocation || location.href, true, "logout", (new Date()).getTime().toString())
                    x.send("");
                    // x.abort()
                    return 1 // this is **speculative** "We are done." 
                } else {
                    return
                }
            })(window.XMLHttpRequest ? new window.XMLHttpRequest() : ( window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : u )) 
        }
        if (!outcome) {
            m = "Your browser is too old or too weird to support log out functionality. Close all windows and restart the browser."
        }
        alert(m);
        window.location = '/';
        // return !!outcome
    })(/*if present URI does not return 200 OK for GET, set some other 200 OK location here*/)
}
else{
//Firefox,Chrome
    window.location = 'http://log:out@'+Host+'/';
}

agregue esto a su aplicación:

@app.route('/logout')
def logout():
    return ('Logout', 401, {'WWW-Authenticate': 'Basic realm="Login required"'})

escriba chrome://restartla barra de direcciones y Chrome, con todas sus aplicaciones que se ejecutan en segundo plano, se reiniciará y se limpiará la caché de contraseña de autenticación.

Solo para el registro, hay un nuevo encabezado de respuesta HTTP llamado Clear-Site-Data. Si la respuesta de su servidor incluye un Clear-Site-Data: "cookies"encabezado, se deben eliminar las credenciales de autenticación (no solo las cookies). Lo probé en Chrome 77 pero esta advertencia se muestra en la consola:

Clear-Site-Data header on 'https://localhost:9443/clear': Cleared data types:
"cookies". Clearing channel IDs and HTTP authentication cache is currently not
supported, as it breaks active network connections.

Y las credenciales de autenticación no se eliminan, por lo que esto no funciona (por ahora) para implementar cierres de sesión de autenticación básicos, pero tal vez en el futuro lo haga. No probé en otros navegadores.

Referencias

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Clear-Site-Data

https://www.w3.org/TR/clear-site-data/

https://github.com/w3c/webappsec-clear-site-data

https://caniuse.com/#feat=mdn-http_headers_clear-site-data_cookies

El envío https://invalid_login@hostnamefunciona bien en todas partes, excepto Safari en Mac (bueno, no está marcado en Edge pero también debería funcionar allí).

Cerrar sesión no funciona en Safari cuando un usuario selecciona "recordar contraseña" en la ventana emergente de autenticación básica HTTP. En este caso, la contraseña se almacena en Keychain Access (Finder> Aplicaciones> Utilidades> Keychain Access (o CMD + SPACE y escriba "Keychain Access")). El envío https://invalid_login@hostnameno afecta el acceso al llavero, por lo que con esta casilla de verificación no es posible cerrar sesión en Safari en Mac. Al menos así es como funciona para mí.

MacOS Mojave (10.14.6), Safari 12.1.2.

El siguiente código funciona bien para mí en Firefox (73), Chrome (80) y Safari (12). Cuando un usuario navega a una página de cierre de sesión, el código se ejecuta y elimina las credenciales.

    //It should return 401, necessary for Safari only
    const logoutUrl = 'https://example.com/logout'; 
    const xmlHttp = new XMLHttpRequest();
    xmlHttp.open('POST', logoutUrl, true, 'logout');
    xmlHttp.send();

Además, por alguna razón, Safari no guarda las credenciales en la ventana emergente de autenticación básica HTTP, incluso cuando se selecciona "recordar contraseña". Los otros navegadores hacen esto correctamente.

• usar una ID de sesión (cookie)
• invalidar la ID de sesión en el servidor
• No acepte usuarios con ID de sesión no válidas

Actualicé la solución de mthoring para las versiones modernas de Chrome:

function logout(secUrl, redirUrl) {
    if (bowser.msie) {
        document.execCommand('ClearAuthenticationCache', 'false');
    } else if (bowser.gecko) {
        $.ajax({
            async: false,
            url: secUrl,
            type: 'GET',
            username: 'logout'
        });
    } else if (bowser.webkit || bowser.chrome) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open(\"GET\", secUrl, true);
        xmlhttp.setRequestHeader(\"Authorization\", \"Basic logout\");\
        xmlhttp.send();
    } else {
// http://stackoverflow.com/questions/5957822/how-to-clear-basic-authentication-details-in-chrome
        redirUrl = url.replace('http://', 'http://' + new Date().getTime() + '@');
    }
    setTimeout(function () {
        window.location.href = redirUrl;
    }, 200);
}

    function logout(secUrl, redirUrl) {
        if (bowser.msie) {
            document.execCommand('ClearAuthenticationCache', 'false');
        } else if (bowser.gecko) {
            $.ajax({
                async: false,
                url: secUrl,
                type: 'GET',
                username: 'logout'
            });
        } else if (bowser.webkit) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", secUrl, true);
            xmlhttp.setRequestHeader("Authorization", "Basic logout");
            xmlhttp.send();
        } else {
            alert("Logging out automatically is unsupported for " + bowser.name
                + "\nYou must close the browser to log out.");
        }
        setTimeout(function () {
            window.location.href = redirUrl;
        }, 200);
    }
 Run code snippetHide results
Expand snippet

Intenté usar lo anterior de la siguiente manera.

?php
    ob_start();
    session_start();
    require_once 'dbconnect.php';

    // if session is not set this will redirect to login page
    if( !isset($_SESSION['user']) ) {
        header("Location: index.php");
        exit;
    }
    // select loggedin users detail
    $res=mysql_query("SELECT * FROM users WHERE userId=".$_SESSION['user']);
    $userRow=mysql_fetch_array($res);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome - <?php echo $userRow['userEmail']; ?></title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css"  />
<link rel="stylesheet" href="style.css" type="text/css" />

    <script src="assets/js/bowser.min.js"></script>
<script>
//function logout(secUrl, redirUrl)
//bowser = require('bowser');
function logout(secUrl, redirUrl) {
alert(redirUrl);
    if (bowser.msie) {
        document.execCommand('ClearAuthenticationCache', 'false');
    } else if (bowser.gecko) {
        $.ajax({
            async: false,
            url: secUrl,
            type: 'GET',
            username: 'logout'
        });
    } else if (bowser.webkit) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", secUrl, true);
        xmlhttp.setRequestHeader("Authorization", "Basic logout");
        xmlhttp.send();
    } else {
        alert("Logging out automatically is unsupported for " + bowser.name
            + "\nYou must close the browser to log out.");
    }
    window.location.assign(redirUrl);
    /*setTimeout(function () {
        window.location.href = redirUrl;
    }, 200);*/
}


function f1()
    {
       alert("f1 called");
       //form validation that recalls the page showing with supplied inputs.    
    }
</script>
</head>
<body>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://www.codingcage.com">Coding Cage</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="http://www.codingcage.com/2015/01/user-registration-and-login-script-using-php-mysql.html">Back to Article</a></li>
            <li><a href="http://www.codingcage.com/search/label/jQuery">jQuery</a></li>
            <li><a href="http://www.codingcage.com/search/label/PHP">PHP</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              <span class="glyphicon glyphicon-user"></span>&nbsp;Hi' <?php echo $userRow['userEmail']; ?>&nbsp;<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="logout.php?logout"><span class="glyphicon glyphicon-log-out"></span>&nbsp;Sign Out</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav> 

    <div id="wrapper">

    <div class="container">

        <div class="page-header">
        <h3>Coding Cage - Programming Blog</h3>
        </div>

        <div class="row">
        <div class="col-lg-12" id="div_logout">
        <h1 onclick="logout(window.location.href, 'www.espncricinfo.com')">MichaelA1S1! Click here to see log out functionality upon click inside div</h1>
        </div>
        </div>

    </div>

    </div>

    <script src="assets/jquery-1.11.3-jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>


</body>
</html>
<?php ob_end_flush(); ?>

Pero solo te redirige a una nueva ubicación. Sin cierre de sesión.