Come disconnettere l'utente dal sito Web usando l'autenticazione BASIC?

È possibile disconnettere l'utente da un sito Web se utilizza l'autenticazione di base?

La sessione di uccisione non è sufficiente, poiché, una volta che l'utente è autenticato, ogni richiesta contiene informazioni di accesso, quindi l'utente accederà automaticamente al successivo accesso al sito utilizzando le stesse credenziali.

L'unica soluzione finora è chiudere il browser, ma non è accettabile dal punto di vista dell'usabilità.

L'autenticazione di base non è stata progettata per gestire la disconnessione. Puoi farlo, ma non completamente automaticamente.

Quello che devi fare è fare in modo che l'utente faccia clic su un collegamento di logout e invii un "401 non autorizzato" in risposta, usando lo stesso regno e allo stesso livello di cartella URL del 401 normale che invii richiedendo un accesso.

Devono essere indirizzati a immettere successivamente credenziali errate, ad es. un nome utente e una password vuoti, e in risposta rispedisci una pagina "Ti sei disconnesso con successo". Le credenziali errate / vuote sovrascriveranno quindi le credenziali corrette precedenti.

In breve, lo script di logout inverte la logica dello script di login, restituendo la pagina di successo solo se l'utente non sta passando le credenziali giuste.

La domanda è se la casella di password "non inserire la password" in qualche modo curiosa incontrerà l'accettazione da parte dell'utente. I gestori di password che tentano di compilare automaticamente la password possono anche interferire qui.

Modifica per aggiungere una risposta al commento: il nuovo accesso è un problema leggermente diverso (a meno che non sia necessario un logout / login in due passaggi ovviamente). Devi rifiutare (401) il primo tentativo di accedere al collegamento di nuovo accesso, piuttosto che accettare il secondo (che presumibilmente ha un nome utente / password diversi). Ci sono alcuni modi per farlo. Uno sarebbe includere il nome utente corrente nel collegamento di disconnessione (ad es. / Relogin? Nome utente) e rifiutarlo quando le credenziali corrispondono al nome utente.

Un'aggiunta alla risposta di bobince ...

Con Ajax puoi avere il tuo link / pulsante 'Logout' collegato a una funzione Javascript. Chiedi a questa funzione di inviare XMLHttpRequest con un nome utente e una password non validi. Questo dovrebbe restituire un 401. Quindi reimpostare document.location sulla pagina di pre-login. In questo modo, l'utente non vedrà mai la finestra di dialogo aggiuntiva durante il logout, né dovrà ricordarsi di inserire credenziali errate.

Chiedi all'utente di fare clic su un collegamento a https: // log: out@example.com/ . Ciò sovrascriverà le credenziali esistenti con quelle non valide; disconnettendoli.

Puoi farlo interamente in JavaScript:

IE ha (per molto tempo) API standard per cancellare la cache di autenticazione di base:

document.execCommand("ClearAuthenticationCache")

Dovrebbe tornare vero quando funziona. Restituisce falso, indefinito o esplode su altri browser.

I nuovi browser (da dicembre 2012: Chrome, FireFox, Safari) hanno un comportamento "magico". Se vedono una richiesta di autenticazione di base riuscita con qualsiasi altro nome utente fasullo (diciamo logout) cancellano la cache delle credenziali e possibilmente la impostano per quel nuovo nome utente fasullo, che è necessario assicurarsi che non sia un nome utente valido per la visualizzazione del contenuto.

Un esempio di base è:

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

Un modo "asincrono" di eseguire quanto sopra consiste nell'eseguire una chiamata AJAX utilizzando il logoutnome utente. Esempio:

(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*/)

Puoi anche trasformarlo in un bookmarklet:

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*/);

La seguente funzione è confermata per Firefox 40, Chrome 44, Opera 31 e IE 11.
Bowser viene utilizzato per il rilevamento del browser, jQuery viene utilizzato anche.

- secUrl è l'URL di un'area protetta da password da cui disconnettersi.
- redirUrl è l'URL di un'area non protetta da password (pagina di logout riuscita).
- potresti voler aumentare il timer di reindirizzamento (attualmente 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);
}

Ecco un esempio Javascript molto semplice usando jQuery:

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

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

Questo utente si disconnette senza mostrargli nuovamente la casella di accesso del browser, quindi lo reindirizza a una pagina di disconnessione

Questo non è direttamente possibile con l'autenticazione di base.

Non esiste alcun meccanismo nella specifica HTTP per il server per dire al browser di interrompere l'invio delle credenziali che l'utente ha già presentato.

Esistono "hack" (vedi altre risposte) che implicano in genere l'utilizzo di XMLHttpRequest per inviare una richiesta HTTP con credenziali errate per sovrascrivere quelle originariamente fornite.

Questo funziona per 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"); 
      });
  });          

In realtà è piuttosto semplice.

Basta visitare quanto segue nel browser e utilizzare credenziali errate: http: // nomeutente: password@tuodominio.com

Questo dovrebbe "disconnetterti".

Tutto ciò di cui hai bisogno è reindirizzare l'utente su qualche URL di logout e restituire un 401 Unauthorizederrore su di esso. Nella pagina di errore (che deve essere accessibile senza autenticazione di base) è necessario fornire un collegamento completo alla home page (inclusi schema e nome host). L'utente farà clic su questo collegamento e il browser richiederà nuovamente le credenziali.

Esempio per 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;
}

Pagina di errore /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;
}

Sulla base di ciò che ho letto sopra ho ottenuto una soluzione semplice che funziona su qualsiasi browser:

1) nella tua pagina di logout chiami un ajax al tuo back-end di accesso. Il back-end di accesso deve accettare l'utente di disconnessione. Una volta che il back-end accetta, il browser cancella l'utente corrente e assume l'utente "logout".

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

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

2) Ora quando l'utente torna al normale file indice proverà ad entrare automaticamente nel sistema con l'utente "logout", in questa seconda volta è necessario bloccarlo rispondendo con 401 per richiamare la finestra di login / password.

3) Esistono molti modi per farlo, ho creato due back-end di accesso, uno che accetta l'utente che si disconnette e uno che non lo fa. La mia normale pagina di accesso usa quella che non accetta, la mia pagina di logout usa quella che la accetta.

Ho appena testato quanto segue in Chrome (79), Firefox (71) e Edge (44) e funziona benissimo. Applica la soluzione di script come altri precedentemente notato.

Basta aggiungere un link "Logout" e quando si fa clic restituire il seguente codice 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>

Questo JavaScript deve funzionare per tutti i browser delle versioni più recenti:

//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+'/';
}

aggiungi questo alla tua applicazione:

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

digita chrome://restartla barra degli indirizzi e chrome, con tutte le sue app in esecuzione in background, verrà riavviato e la cache della password di Auth verrà pulita.

Solo per la cronaca, c'è una nuova intestazione di risposta HTTP chiamata Clear-Site-Data. Se la risposta del server include Clear-Site-Data: "cookies"un'intestazione, è necessario rimuovere le credenziali di autenticazione (non solo i cookie). L'ho provato su Chrome 77 ma questo avviso mostra sulla console:

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.

E le credenziali di autenticazione non vengono rimosse, quindi questo non funziona (per ora) per implementare i logout di autenticazione di base, ma forse in futuro lo farà. Non testato su altri browser.

Riferimenti:

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

L'invio https://invalid_login@hostnamefunziona bene ovunque tranne Safari su Mac (beh, Edge non è controllato ma dovrebbe funzionare anche lì).

La disconnessione non funziona in Safari quando un utente seleziona "ricorda password" nel popup di autenticazione di base HTTP. In questo caso la password è memorizzata in Accesso Portachiavi (Finder> Applicazioni> Utilità> Accesso Portachiavi (o CMD + SPACE e digitare "Accesso Portachiavi")). L'invio https://invalid_login@hostnamenon influisce sull'accesso ai portachiavi, quindi con questa casella di controllo non è possibile disconnettersi su Safari su Mac. Almeno è come funziona per me.

MacOS Mojave (10.14.6), Safari 12.1.2.

Il codice seguente funziona bene per me in Firefox (73), Chrome (80) e Safari (12). Quando un utente accede a una pagina di disconnessione, il codice viene eseguito e rilascia le credenziali.

    //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();

Inoltre, per qualche motivo Safari non salva le credenziali nel pop-up di autenticazione di base HTTP anche quando è selezionata la 'Ricorda password'. Gli altri browser lo fanno correttamente.

• usa un ID sessione (cookie)
• invalidare l'ID sessione sul server
• Non accettare utenti con ID sessione non validi

Ho aggiornato la soluzione di mthoring per le moderne versioni di 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

Ho provato a utilizzare quanto sopra nel modo seguente.

?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(); ?>

Ma ti reindirizza solo verso una nuova posizione. Nessun logout.