Bagaimana cara keluar pengguna dari situs web menggunakan otentikasi BASIC?

Apakah mungkin untuk logout pengguna dari situs web jika dia menggunakan otentikasi dasar?

Sesi pembunuhan tidak cukup, karena, setelah pengguna diautentikasi, setiap permintaan berisi info masuk, sehingga pengguna secara otomatis login di lain waktu ia mengakses situs menggunakan kredensial yang sama.

Satu-satunya solusi sejauh ini adalah menutup browser, tetapi itu tidak dapat diterima dari sudut pandang kegunaan.

Otentikasi dasar tidak dirancang untuk mengelola keluar. Anda dapat melakukannya, tetapi tidak sepenuhnya secara otomatis.

Yang harus Anda lakukan adalah meminta pengguna mengklik tautan logout, dan mengirim tanggapan '401 Tidak Sah', menggunakan ranah yang sama dan pada tingkat folder URL yang sama seperti 401 normal yang Anda kirim meminta login.

Mereka harus diarahkan untuk memasukkan kredensial yang salah selanjutnya, mis. nama pengguna dan kata sandi kosong, dan sebagai tanggapan Anda mengirim kembali halaman "Anda telah berhasil keluar". Kredensial yang salah / kosong kemudian akan menimpa kredensial yang benar sebelumnya.

Singkatnya, skrip logout membalikkan logika skrip login, hanya mengembalikan halaman sukses jika pengguna tidak melewati kredensial yang tepat.

Pertanyaannya adalah apakah kotak kata sandi “jangan masukkan kata sandi” yang agak aneh akan memenuhi penerimaan pengguna. Pengelola kata sandi yang mencoba mengisi kata sandi secara otomatis juga dapat menghalangi di sini.

Sunting untuk menambahkan sebagai tanggapan terhadap komentar: masuk kembali adalah masalah yang sedikit berbeda (kecuali Anda memerlukan logout / login dua langkah jelas). Anda harus menolak (401) upaya pertama untuk mengakses tautan relogin, daripada menerima yang kedua (yang mungkin memiliki nama pengguna / kata sandi lain). Ada beberapa cara Anda bisa melakukan ini. Salah satunya adalah memasukkan nama pengguna saat ini di tautan logout (mis. / Relogin? Nama pengguna), dan menolak ketika kredensial cocok dengan nama pengguna.

Tambahan untuk jawaban oleh bobince ...

Dengan Ajax Anda dapat memiliki tautan / tombol 'Logout' Anda terhubung ke fungsi Javascript. Minta fungsi ini mengirim XMLHttpRequest dengan nama pengguna dan kata sandi yang buruk. Ini akan mendapatkan 401. Kemudian atur document.location kembali ke halaman pra-login. Dengan cara ini, pengguna tidak akan pernah melihat dialog login tambahan selama logout, atau harus ingat untuk memasukkan kredensial yang buruk.

Minta pengguna mengklik tautan ke https: // log: out@example.com/ . Itu akan menimpa kredensial yang ada dengan yang tidak valid; logout mereka.

Anda dapat melakukannya seluruhnya dalam JavaScript:

IE memiliki (untuk waktu yang lama) API standar untuk membersihkan cache Otentikasi Dasar:

document.execCommand("ClearAuthenticationCache")

Harus mengembalikan true ketika berfungsi. Mengembalikan salah, tidak terdefinisi atau meledak di browser lain.

Peramban baru (per Des 2012: Chrome, FireFox, Safari) memiliki perilaku "ajaib". Jika mereka melihat permintaan autentik dasar yang berhasil dengan sembarang nama pengguna palsu lainnya (katakanlah logout) mereka menghapus cache kredensial dan mungkin menyetelnya untuk nama pengguna palsu baru itu, yang perlu Anda pastikan bukan nama pengguna yang valid untuk melihat konten.

Contoh dasar dari itu adalah:

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

Cara "asinkron" untuk melakukan hal di atas adalah dengan melakukan panggilan AJAX menggunakan logoutnama pengguna. Contoh:

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

Anda juga dapat menjadikannya 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*/);

Fungsi berikut ini dikonfirmasikan berfungsi untuk Firefox 40, Chrome 44, Opera 31 dan IE 11.
Bowser digunakan untuk deteksi browser, jQuery juga digunakan.

- secUrl adalah url ke area yang dilindungi kata sandi tempat untuk keluar.
- redirUrl adalah url ke area yang tidak dilindungi kata sandi (halaman kesuksesan logout).
- Anda mungkin ingin menambah pengalihan waktu (saat ini 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);
}

Berikut ini adalah contoh Javascript yang sangat sederhana menggunakan jQuery:

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

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

Pengguna log ini keluar tanpa menunjukkan kotak log-in browser lagi, lalu mengarahkannya ke halaman yang sudah keluar

Ini tidak mungkin secara langsung dengan Otentikasi-Dasar.

Tidak ada mekanisme dalam spesifikasi HTTP untuk server untuk memberitahu browser untuk berhenti mengirim kredensial yang sudah disajikan pengguna.

Ada "retasan" (lihat jawaban lain) yang biasanya melibatkan penggunaan XMLHttpRequest untuk mengirim permintaan HTTP dengan kredensial yang salah untuk menimpa yang semula disediakan.

Ini berfungsi untuk 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"); 
      });
  });          

Ini sebenarnya cukup sederhana.

Cukup kunjungi yang berikut ini di browser Anda dan gunakan kredensial yang salah: http: // username: password@domainanda.com

Itu harus "mengeluarkan Anda".

Yang Anda butuhkan hanyalah mengarahkan pengguna pada beberapa URL logout dan mengembalikan 401 Unauthorizedkesalahan padanya. Pada halaman kesalahan (yang harus dapat diakses tanpa auth dasar) Anda perlu memberikan tautan lengkap ke halaman rumah Anda (termasuk skema dan nama host). Pengguna akan mengklik tautan ini dan browser akan meminta kredensial lagi.

Contoh untuk 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;
}

Halaman kesalahan /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;
}

Berdasarkan apa yang saya baca di atas, saya mendapat solusi sederhana yang berfungsi di browser apa pun:

1) pada halaman logout Anda, Anda memanggil ajax ke bagian login Anda Bagian belakang login Anda harus menerima pengguna logout. Setelah bagian belakang menerima, browser menghapus pengguna saat ini dan mengasumsikan pengguna "logout".

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

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

2) Sekarang ketika pengguna kembali ke file indeks normal itu akan mencoba untuk masuk secara otomatis dalam sistem dengan pengguna "logout", pada kali kedua ini Anda harus memblokirnya dengan membalas dengan 401 untuk memunculkan dialog login / kata sandi.

3) Ada banyak cara untuk melakukan itu, saya membuat dua ujung belakang login, satu menerima pengguna logout dan satu lagi tidak. Halaman login normal saya menggunakan yang tidak menerima, halaman logout saya menggunakan yang menerimanya.

Saya baru saja menguji yang berikut di Chrome (79), Firefox (71) dan Edge (44) dan berfungsi dengan baik. Itu berlaku solusi skrip seperti yang disebutkan di atas.

Cukup tambahkan tautan "Logout" dan ketika diklik kembalikan html berikut

    <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>

JavaScript ini harus berfungsi untuk semua browser versi terbaru:

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

tambahkan ini ke aplikasi Anda:

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

ketik chrome://restartbilah alamat dan chrome, dengan semua aplikasi yang berjalan di latar belakang, akan dimulai ulang dan cache kata sandi Auth akan dibersihkan.

Sebagai catatan, ada Header HTTP Response baru yang disebut Clear-Site-Data. Jika balasan server Anda menyertakan Clear-Site-Data: "cookies"tajuk, maka kredensial otentikasi (tidak hanya cookie) harus dihapus. Saya mengujinya di Chrome 77 tetapi peringatan ini muncul di konsol:

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.

Dan kredensial auth tidak dihapus, jadi ini tidak berfungsi (untuk saat ini) untuk menerapkan logout auth dasar, tapi mungkin di masa depan akan. Tidak menguji pada browser lain.

Referensi:

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

Mengirim https://invalid_login@hostnameberfungsi dengan baik di mana saja kecuali Safari di Mac (well, tidak mencentang Edge tetapi juga berfungsi di sana).

Logout tidak berfungsi di Safari ketika pengguna memilih 'ingat kata sandi' di sembulan HTTP Otentikasi Dasar. Dalam hal ini kata sandi disimpan di Akses Keychain (Finder> Aplikasi> Utilitas> Akses Keychain (atau CMD + SPACE dan ketik "Akses Keychain")). Mengirim https://invalid_login@hostnametidak mempengaruhi Akses Keychain, jadi dengan kotak centang ini tidak mungkin untuk logout di Safari pada Mac. Setidaknya itu cara kerjanya untuk saya.

MacOS Mojave (10.14.6), Safari 12.1.2.

Kode di bawah ini berfungsi dengan baik untuk saya di Firefox (73), Chrome (80) dan Safari (12). Ketika pengguna menavigasi ke halaman logout kode dieksekusi dan menjatuhkan kredensial.

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

Juga karena suatu alasan Safari tidak menyimpan kredensial dalam sembulan HTTP Otentikasi Dasar bahkan ketika 'ingat kata sandi' dipilih. Browser lain melakukan ini dengan benar.

• gunakan ID sesi (cookie)
• membatalkan ID sesi di server
• Jangan terima pengguna dengan ID sesi yang tidak valid

Saya memperbarui solusi mthoring untuk versi Chrome modern:

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

Saya mencoba menggunakan di atas dengan cara berikut.

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

Tapi itu hanya mengarahkan Anda ke lokasi baru. Tanpa logout.