Is it possible to log out user from a web site if he is using basic authentication?
Killing session is not enough, since, once user is authenticated, each request contains login info, so user is automatically logged in next time he/she access the site using the same credentials.
The only solution so far is to close browser, but that's not acceptable from the usability standpoint.
Have the user click on a link to https://log:out#example.com/. That will overwrite existing credentials with invalid ones; logging them out.
This does so by sending new credentials in the URL. In this case user="log" password="out".
An addition to the answer by bobince ...
With Ajax you can have your 'Logout' link/button wired to a Javascript function. Have this function send the XMLHttpRequest with a bad username and password. This should get back a 401. Then set document.location back to the pre-login page. This way, the user will never see the extra login dialog during logout, nor have to remember to put in bad credentials.
Basic Authentication wasn't designed to manage logging out. You can do it, but not completely automatically.
What you have to do is have the user click a logout link, and send a ‘401 Unauthorized’ in response, using the same realm and at the same URL folder level as the normal 401 you send requesting a login.
They must be directed to input wrong credentials next, eg. a blank username-and-password, and in response you send back a “You have successfully logged out” page. The wrong/blank credentials will then overwrite the previous correct credentials.
In short, the logout script inverts the logic of the login script, only returning the success page if the user isn't passing the right credentials.
The question is whether the somewhat curious “don't enter your password” password box will meet user acceptance. Password managers that try to auto-fill the password can also get in the way here.
Edit to add in response to comment: re-log-in is a slightly different problem (unless you require a two-step logout/login obviously). You have to reject (401) the first attempt to access the relogin link, than accept the second (which presumably has a different username/password). There are a few ways you could do this. One would be to include the current username in the logout link (eg. /relogin?username), and reject when the credentials match the username.
You can do it entirely in JavaScript:
IE has (for a long time) standard API for clearing Basic Authentication cache:
document.execCommand("ClearAuthenticationCache")
Should return true when it works. Returns either false, undefined or blows up on other browsers.
New browsers (as of Dec 2012: Chrome, FireFox, Safari) have "magic" behavior. If they see a successful basic auth request with any bogus other username (let's say logout) they clear the credentials cache and possibly set it for that new bogus user name, which you need to make sure is not a valid user name for viewing content.
Basic example of that is:
var p = window.location.protocol + '//'
// current location must return 200 OK for this GET
window.location = window.location.href.replace(p, p + 'logout:password#')
An "asynchronous" way of doing the above is to do an AJAX call utilizing the logout username. Example:
(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*/)
You can make it a bookmarklet too:
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*/);
The following function is confirmed working for Firefox 40, Chrome 44, Opera 31 and IE 11.
Bowser is used for browser detection, jQuery is also used.
- secUrl is the url to a password protected area from which to log out.
- redirUrl is the url to a non password protected area (logout success page).
- you might wish to increase the redirect timer (currently 200ms).
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);
}
Here's a very simple Javascript example using jQuery:
function logout(to_url) {
var out = window.location.href.replace(/:\/\//, '://log:out#');
jQuery.get(out).error(function() {
window.location = to_url;
});
}
This log user out without showing him the browser log-in box again, then redirect him to a logged out page
This isn't directly possible with Basic-Authentication.
There's no mechanism in the HTTP specification for the server to tell the browser to stop sending the credentials that the user already presented.
There are "hacks" (see other answers) typically involving using XMLHttpRequest to send an HTTP request with incorrect credentials to overwrite the ones originally supplied.
Just for the record, there is a new HTTP Response Header called Clear-Site-Data. If your server reply includes a Clear-Site-Data: "cookies" header, then the authentication credentials (not only cookies) should be removed. I tested it on Chrome 77 but this warning shows on the 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.
And the auth credentials aren't removed, so this doesn't works (for now) to implement basic auth logouts, but maybe in the future will. Didn't test on other browsers.
References:
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
It's actually pretty simple.
Just visit the following in your browser and use wrong credentials:
http://username:password#yourdomain.com
That should "log you out".
This is working for 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");
});
});
All you need is redirect user on some logout URL and return 401 Unauthorized error on it. On error page (which must be accessible without basic auth) you need to provide a full link to your home page (including scheme and hostname). User will click this link and browser will ask for credentials again.
Example for 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;
}
Error page /home/user/errors/401.html:
<!DOCTYPE html>
<p>You're not authorised. Login.</p>
I've just tested the following in Chrome (79), Firefox (71) and Edge (44) and it works fine. It applies the script solution as others noted above.
Just add a "Logout" link and when clicked return the following 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>
add this to your application :
#app.route('/logout')
def logout():
return ('Logout', 401, {'WWW-Authenticate': 'Basic realm="Login required"'})
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;
}
Based on what I read above I got a simple solution that works on any browser:
1) on you logout page you call an ajax to your login back end. Your login back end must accept logout user. Once the back end accept, the browser clear the current user and assumes the "logout" user.
$.ajax({
async: false,
url: 'http://your_login_backend',
type: 'GET',
username: 'logout'
});
setTimeout(function () {
window.location.href = 'http://normal_index';
}, 200);
2) Now when the user got back to the normal index file it will try to automatic enter in the system with the user "logout", on this second time you must block it by reply with 401 to invoke the login/password dialog.
3) There are many ways to do that, I created two login back ends, one that accepts the logout user and one that doesn't. My normal login page use the one that doesn't accept, my logout page use the one that accepts it.
Sending https://invalid_login#hostname works fine everywhere except Safari on Mac (well, not checked Edge but should work there too).
Logout doesn't work in Safari when a user selects 'remember password' in the HTTP Basic Authentication popup. In this case the password is stored in Keychain Access (Finder > Applications > Utilities > Keychain Access (or CMD+SPACE and type "Keychain Access")). Sending https://invalid_login#hostname doesn't affect Keychain Access, so with this checkbox it is not possible to logout on Safari on Mac. At least it is how it works for me.
MacOS Mojave (10.14.6), Safari 12.1.2.
The code below works fine for me in Firefox (73), Chrome (80) and Safari (12). When a user navigates to a logout page the code is executed and drops the credentials.
//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();
Also for some reason Safari doesn't save credentials in the HTTP Basic Authentication popup even when the 'remember password' is selected. The other browsers do this correctly.
This JavaScript must be working for all latest version browsers:
//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+'/';
}
type chrome://restart in the address bar and chrome, with all its apps that are running in background, will restart and the Auth password cache will be cleaned.
use a session ID (cookie)
invalidate the session ID on the server
Don't accept users with invalid session IDs
I updated mthoring's solution for modern Chrome versions:
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);
}
As others have said, we need to get the same URL and send an error (e.g., 401: StatusUnauthorized something like that), and that's it.
And I use the Get method to let it know I need to logout,
Here is a full example of writing with golang.
package main
import (
"crypto/subtle"
"fmt"
"log"
"net/http"
)
func BasicAuth(username, password, realm string, handlerFunc http.HandlerFunc) http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) {
queryMap := r.URL.Query()
if _, ok := queryMap["logout"]; ok { // localhost:8080/public/?logout
w.WriteHeader(http.StatusUnauthorized) // 401
_, _ = w.Write([]byte("Success logout!\n"))
return
}
user, pass, ok := r.BasicAuth()
if !ok ||
subtle.ConstantTimeCompare([]byte(user), []byte(username)) != 1 ||
subtle.ConstantTimeCompare([]byte(pass), []byte(password)) != 1 {
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/WWW-Authenticate
w.Header().Set("WWW-Authenticate", `Basic realm="`+realm+`", charset="UTF-8"`)
w.WriteHeader(http.StatusUnauthorized)
_, _ = w.Write([]byte("Unauthorised.\n"))
return
}
handlerFunc(w, r)
}
}
type UserInfo struct {
name string
psw string
}
func main() {
portNumber := "8080"
guest := UserInfo{"guest", "123"}
// localhost:8080/public/ -> ./public/everyone
publicHandler := http.StripPrefix(
"/public/", http.FileServer(http.Dir("./public/everyone")),
)
publicHandlerFunc := func(w http.ResponseWriter, r *http.Request) {
switch r.Method {
case http.MethodGet:
publicHandler.ServeHTTP(w, r)
/*
case http.MethodPost:
case http.MethodPut:
case http.MethodDelete:
*/
default:
return
}
}
http.HandleFunc("/public/",
BasicAuth(guest.name, guest.psw, "Please enter your username and password for this site",
publicHandlerFunc),
)
log.Fatal(http.ListenAndServe(fmt.Sprintf(":%s", portNumber), nil))
}
When you have already logout, then you need to refresh (F5) the page. Otherwise, you may see the old content.
Actually I think basic authentication was intended to be used with static pages, not for any sophisticated session management or CGI pages.
Thus when wanting session management you should design a classic "login form" to query for user and password (maybe 2nd factor as well).
The CGI form handler should convert successful authentication to a session (ID) that is remembered on the server and (in a cookie or as part of the URI).
Then logout can be implemented simply by making the server (and client) "forget" the session.
The other advantage is that (even when encrypted) the user and password is not send with every request to the server (instead the session ID would be sent).
If the session ID on the server is combined with a timestamp for the "last action" performed, then session timeout could be implemented by comparing that timestamp with the current time:
If the time span is too large, "timeout" the session by forgetting the session ID.
Any request to an invalid session would cause a redirection to the login page (or maybe if you want to make it more comfortable, you can have a "revalidation form" that requests the password again, too).
As a proof of concept I had implemented a completely cookie-free session management that is purely URI-based (the session ID is always part of the URI).
However the complete code would be too long for this answer.
Special care about performance has to be taken when wanting to handle several thousands of concurrent sessions.
For anyone who use Windows Authentication (also known as Negotiate, Kerberos, or NTLM authentication), I use ASP.NET Core with Angular.
I found an efficient manner to change users !
I modify my login method on the javascript side like that :
protected login(changeUser: boolean = false): Observable<AuthInfo> {
let params = new HttpParams();
if(changeUser) {
let dateNow = this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss');
params = params.set('changeUser', dateNow!);
}
const url: string = `${environment.yourAppsApiUrl}/Auth/login`;
return this.http.get<AuthInfo>(url, { params: params });
}
Here is my method on the backend :
[Route("api/[controller]")]
[ApiController]
[Produces("application/json")]
[Authorize(AuthenticationSchemes = NegotiateDefaults.AuthenticationScheme)]
public class AuthController : Controller
{
[HttpGet("login")]
public async Task<IActionResult> Login(DateTime? changeUser = null)
{
if (changeUser > DateTime.Now.AddSeconds(-3))
return Unauthorized();
...
... (login process)
...
return Ok(await _authService.GetToken());
}
}
return Unauthorized() return the 401 code that causes the browser identification popup window to appear, here is the process :
I transmit the date now as a parameter if I want to change user.
I return the 401 code if no more than 3 seconds have passed since that moment Now.
I complete my credential and the same request with the same parameter is sent to the backend.
Since more than 3 seconds have passed, I continue the login process but this time with the new credential !
This is how my logout is working using form:
create basic auth user logout with password logout
create folder logout/ and add .htaccess: with line 'require user logout'
RewriteEngine On
AuthType Basic
AuthName "Login"
AuthUserFile /mypath/.htpasswd
require user logout
add logout button to website as form like:
<form action="https://logout:logout#example.com/logout/" method="post">
<button type="submit">Logout</button>
</form>
logout/index.php could be something like:
<?php
echo "LOGOUT SUCCESS";
header( "refresh:2; url=https://example.com" );
?>
5.9.2022 confirmed working on chrome, edge and samsung android internet browser
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);
}
I tried using the above in the following way.
?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">Back to Article</li>
<li>jQuery</li>
<li>PHP</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> Hi' <?php echo $userRow['userEmail']; ?> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-log-out"></span> Sign Out</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(); ?>
But it only redirects you to new location. No logout.
Related
So I've created a small 2 page VUE with a login page and then routed over to a search page.
On login the Python handles the LDAP check and creates the JWT and it looks like it exists in the cookies in the browser however i'm not sure how to handle it when back in "Vue" land.
In addition I though it wasn't great to keep this info in cookies in the browser....hmmmmm
const routes = [
{
path: '/',
name: 'home',
component: LoginEntry,
props:{test:'Service Center Search Portal'}
},
{
path: '/scsearch',
name: 'scsearch',
component: SearchView
},
The cookies which I see...
Added Code
router.beforeEach(async (to, from, next) => {
console.log('runniing router');
console.log(to.name);
if (to.name === "scsearch") {
const response = await axios.get('/api/jwt/check');
console.log('juust did call');
console.log(response.status);
if ( response.status === 401 ) {
console.log('ressponse status 401');
return next({ name: "home" });
}
console.log('doing noothiing');
next();
}else{
next();
}
});
Added Code -2 (Working)
router.beforeEach(async (to, from, next) => {
console.log('runniing router');
console.log(to.name);
if (to.name === "scsearch") {
console.log('doing call');
const response = await axios.get('/api/jwt/check')
.then(function(value){
console.log(value);
next('/');
})
.catch(function(err){
console.log(err)
});
console.log('juust did call');
console.log(response);
console.log('doing noothiing');
next();
}else{
next();
}
});
I'm still not sure if this is what you want, but from your question, I assume that:
You are using Vue SPA
You want user that's not logged in can't access route /scsearch on your Vue app
You store your JWT on cookie and can be accessed with document.cookie
If there's JWT on cookie, that means user is logged in, if there's no JWT on cookie, that means user is logged out.
What you want is navigation guard, this is how you use it:
// function to get cookie by name, taken from https://stackoverflow.com/a/15724300/12397250
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
const router = new VueRouter({ ... })
// do something everytime user is changing route
router.beforeEach((to, from, next) => {
// if user is accesing route "ssearch" and not logged in, redirect to home
// assuming you store your jwt on your cookie with key "authtoken"
if (to.name === "ssearch" && !getCookie("authtoken")) {
// User is not logged in, redirect to route "home"
// return here is important so you don't call other next() below
return next({ name: "home" });
}
// Do nothing
next();
});
const app = new Vue({
router
}).$mount('#app')
Edit:
Since you are using HTTPOnly cookie, you need to check it by sending a request to your backend API.
for example:
router.beforeEach(async (to, from, next) => {
if (to.name === "ssearch") {
// You need to implement this function, you can use XHR, or library like axios.
// You also need to add new endpoint to check cookies on your flask app
const response = await http.get("http://yourbackend.com/api/auth/check");
// Assuming if the jwt verification failed, it returns 401
if ( response.status === 401 ) {
return next({ name: "home" });
}
}
next();
});
As for JWT, there is no better place to store them than the cookie. LocalStorage/sessionStorage could be unsafe (Read about Cross-Site-Scripting attacks).
I don't have any experience with Vue, but i guess to protect your 'search page', you should have something in your local state, that says the author has been authorized, if not route the client to login page.
I have two/multiple domains say, foo.com and bar.com and both have the same backend, which means both domains redirect the coming requests to same "web instance" hosted somewhere else.
Current Behaviour
If a user login in foo.com, he/she also need to login in bar.com in order to access any end-point/URL such as bar.com/some/url/end-point/.
The SESSION_COOKIE_DOMAIN may do something if I've the domains with a common pattern. Unfortunately, I don't.
Question
How can I maintain user sessions across multiple domains?
When you look at it from a security perspective this is a risk as such, where one domain by any workaround can read cookies from another domain. So for the obvious reason, this doesn't work normally.
Now in most cases, the only thing you would like to share is a token or session id. So you can approach this problem in different ways
Re-direction of the auth
Let's assume your token is generated using example.com/auth. This url can return the token in cookies as well as json response. You can then also make this url return a 301 to example.org/preauth?token=XXX. This url would then set the cookies with the token
So basically, in this case, you can handle the whole approach at server side itself
Using pixel tags
In this case, what you want to do is have a pixel tag url. Once you have received the auth token by doing auth on example.com/auth
You will add one image source tag on the page dynamically using javascript to your other domain
<img src='http://example.org/cookiepixel?token=yyy' />
This would then return the cookie which will be set in example.org instead of example.com
In this approach, you are dependent on client side code to make sure the cross-domain auth happens.
I don't think you can do single sign on across completely different domains. But maybe you could use OAuth authentication, with both domains pointing to the same OAuth provider? Then implement an OAuth provider that generates the same access token for either domain. I have no idea how much effort that might be though.
https://django-oauth-toolkit.readthedocs.io/en/latest/
This is an interesting question. There should be many ways of doing it, the first thing that comes to my mind is to use an iframe. The example below is tested with Django 2.2.
In your settings.py, expose your sessionid to javascript.
SESSION_COOKIE_HTTPONLY = False
In your view, be sure to put xframe_options_exempt on, or django will not allow it to be "iframed" from another domain, here I use a template view, so I put the decorator in urls.py instead.
from django.views.decorators.clickjacking import xframe_options_exempt
urlpatterns = [
path(
'other_domain/',
xframe_options_exempt(TemplateView.as_view(template_name='examplesite/otherdomain.html')),
name='other_domain',
)
# ...
]
domains is a list of all of the other domains (not including the one your user is on right now), in your template, expose them in the <head> tag.
<head>
{{ domains|json_script:"domains" }}
{{ other_domain_path|json_script:"other-domain-path"}}
</head>
this will become something like this:
<script id="domains" type="application/json">["c222dbef.ngrok.io"] </script>
<script id="other-domain-path" type="application/json">"/other_domain/"</script>
Then in your javascript:
(function() {
function getCookie(cname) { //copied from w3schools
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function postSessionID(id) {
var domains = JSON.parse(document.getElementById("domains").textContent);
var path = JSON.parse(document.getElementById("other-domain-path").textContent);
domains.forEach(function(domain) {
var src = "https://" + domain + path;
var iframeEl = document.createElement("iframe");
iframeEl.setAttribute("class", "invisible");
iframeEl.setAttribute("src", src);
(function(id) { // this is an async call in a loop, create a closure here to protect "id"
iframeEl.addEventListener("load", function() {
this.contentWindow.postMessage(id, this.getAttribute("src"));
});
})(id);
document.body.appendChild(iframeEl);
});
}
function main() {
var sessionID = getCookie("sessionid");
if (!sessionID) {
return;
}
postSessionID(sessionID);
}
main();
})();
The idea of the above code is to create iframes for each other domains, the src of the iframes are pointing to our view named "other_domain". Once the iframes are loaded, we use postMessage to send session id to them.
In examplesite/otherdomain.html:
<head>
{{ domains|json_script:"domains" }}
{# we also need to expose all other domains #}
</head>
in your script:
(function() {
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
var domains = JSON.parse(document.getElementById("domains").textContent);
var trustedSources = domains.map(function(domain) {
return "https://" + domain;
});
window.addEventListener("message", function(e) {
if (!e.origin in trustedSources) {
return; // this prevents setting session id from other source
}
var sessionID = e.data;
// you can probably get your cookie expiry from your django view, so all of your cookie expires at the same time
setCookie("sessionid", sessionID, 365);
}, false);
})();
Now your users can log in and log out from any of your domains, and they'll have the same session across all of your domains.
I'm posting the full example in my github: https://github.com/rabbit-aaron/django-multisite-sign-in
Follow readme.md to set it up.
I have a dynamically created table with data from a django model. This table is displaying additional information about each data_element.
In the last column there should either
be a button displayed for each row, which will run the script with additional keywords from that specific data_element, without reloading or freezing the page.
If the script is still running (can take hours) there should be progress icon displayed and
if the script has already finished, there should be a button displayed, redirecting to an results.html
How can I program that with django?
Currently I am executing a script manually, but for that I am redirecting to another template with the args to parse and when the script is executed (with call_command('my_script', *args) the page freezes until the script ends.
<form action="{% url 'calculate' element_id %}">
<input class="btn btn-primary-custom" id="submit" type="submit" value="run script">
</form>
I tried to insert the code from this post:
Django button ajax click
But when I click on that button, nothing happens. What do I have to do, to create that table?
EDIT
the function for my button currently looks like this:
$(document).ready(function(){
$('.calculate-btn').bind('click', function(){
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var btn-data= $(this).attr('btn-data');
var csrftoken = getCookie('csrftoken');
$.ajax({
type: 'POST',
url : "/run/",
dataType: "html",
data : {'csrfmiddlewaretoken': csrftoken, 'btn-data':btn-data},
success: function(data, status, xhr){
console.log("SUCCESS")
},
error: function(data, status, xhr){
console.log("ERROR")
}
});
return false;
});
});
and my view gets called from a button click:
<input id="{{item.id}}" class='calculate-btn' name="update_log" type="button" value="Run Script" btn-data={{ item.id }}>
How can I now dynamically change the button, while the script is still running?
You will need a way to launch async tasks, and a way to get the task status, and then add quite some js/ajax code to launch the task and update your table accordingly.
For the first two parts, the canonical solution is celery.
Another, less recommended way to do that (less recommended, but probably easier to setup than celery) is to simply spawn a child, detached process which will complete the job in the background and store the status and results somewhere (e.g. in your database or in a memory storage like redis).
The main disadventage is that you lose control of what is happening in the child process. Depending on your project - if you don't care about the process control - it may turn out to be better solution.
I am trying to implement Facebook login for an application I am developing.
I am getting an access token like this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[Redacted]',
xfbml : true,
version : 'v2.6'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
window.location = "http://[my domain]/FBloginAuth?"+FB.getAuthResponse()["accessToken"]
} else {
window.location = encodeURI("https://www.facebook.com/dialog/oauth?scope=email&client_id=[redacted]&redirect_uri=http://[my domain]/FBloginAuth&response_type=token");
}
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="status"></div>
</body>
</html>
My server then fishes the access token from the url like this (Python 2, because I have to support the Google OAuth SDK which doesn't seem to support Python 3.):
graph = facebook.GraphAPI(access_token=environ["QUERY_STRING"]) # Apparently there is an extrea
profile = graph.get_object('me')
args = {'fields' : 'id,name,email', }
profile = graph.get_object('me', **args)
print(profile)
I know that this doesn't parse cases where there are variables in the url. That is not the point. For now I am hand-feeding the token. The code vomits:
{u'id': u'[redacted]', u'name': u'[redacted]'}
My question is why the email doesn't appear in the response as I set the scope when asking for the token. Also, what should I do to get the email?
Make sure that
a) the user has actually granted the permission to your app (request /me/permissions to confirm, using the same access token), and
b) that their e-mail address is verified with Facebook. (Apparently not automatically the case with the e-mail address used to register.)
I have a web server that manages the GPIO Pin of the Raspberry Pi but when I Start the server I have to click two times on the div to start the led..
What could be the problem? This is the code of the html page that I have write to manage the led
<script>
function onoff(led) {
var xmlhttp;
var v = document.getElementById("input_" + led).value;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
if (v == 'on'){
document.getElementById("input_" + led).value = 'off';
document.getElementById("par_lamp").innerHTML = "<img class='lampadina' src='http://192.168.1.91:8080/lampadina_on.png' alt='lampadina' height='198' width='120'>";
}
else{
document.getElementById("input_" + led).value = 'on';
document.getElementById("par_lamp").innerHTML = "<img class='lampadina' src='http://192.168.1.91:8080/lampadina_off.png' alt='lampadina' height='198' width='120'>";
}
}
}
xmlhttp.open("GET","http://192.168.1.91:8080/remote.html?led=" + led + "&action=" + v,true);
xmlhttp.send();
}
</head>
<body>
<center>
<img src="http://192.168.1.91:8080/logo.png" alt="logo_sito" width:"198" height:"120">
</center>
<p align="center" id="par_lamp">
<img class="lampadina" src="http://192.168.1.91:8080/lampadina_off.png" alt="lampadina" height="198" width="120">
</p>
<div id="input_11" class="button" onclick="onoff(11)" value="off">
</div>
To debug such things you should take a look at the development tools in your browser. All browsers let you step through your code to see exactly what happens.
In this case your flow is like this:
<div id="input_11" class="button" onclick="onoff(11)" value="off">
Div starts with value 'off'. If you click the code does:
var v = document.getElementById("input_" + led).value;
xmlhttp.open("GET","http://192.168.1.91:8080/remote.html?led=" + led + "&action=" + v,true);
Which then sends the initial value of 'value' that is 'off' to your server.
Only later it toggles it to 'on' so for the next click it actually will send on.
So you either need to toggle the current status before sending the command or you need to set the initial state to 'on' so the first click sends the right command.
The code in xmlhttp.onreadystatechange=function() {... will only run after the xmlhttp.send() because it's an event handler function bound to xmlhttp