1

What my site is and it's bare bones

A basic site made of HTML, CSS and Vanilla JavaScript. I am integrating front-end password protection to the site using JavaScript to check the credentials and assign a cookie which marks them as logged-in. It's just a side-project and security of the content isn't very necessary. The target audience also doesn't have the knowledge of adding cookies from the browser or manipulating the system in any way.
Once the user has signed in, they get redirected to the homepage, where the cookie is checked for. If the log-in cookie is present, they page loads, and if it's not present, the user gets redirected to the log-in page with a note asking to sign in. So far so good.

What's going wrong?

Like most web devs, I started testing the site before giving it a green signal, and turns out Chrome does not clear cookies after I close the browser. This is a spoilsport. Then, I tried using the onunload function on all the pages to delete the cookies, but the cookies are getting deleted even before the user reaches the homepage, and as a result, are directed to the homepage. I don't want to use Session Storage as opening the site in another tab does not take the Session Storage to the other tab.

Is there any way I could achieve deleting cookies when the browser is closed?

Snow
  • 52
  • 1
  • 6
  • A cookie expiry time could help, but it's not really the same as "after the browser is closed" – CertainPerformance May 25 '21 at 06:42
  • Maybe even that will work. I would want to delete all the cookies on the site 1 hour after the log-in. How can I make that happen? – Snow May 25 '21 at 06:43
  • Do you have any server-side programming at all, or is all of your code front-end JavaScript / HTML etc? That is, no PHP or Node or anything like that, is that correct? – CertainPerformance May 25 '21 at 06:44
  • Yes, only HTML, JavaScript and CSS. No back-end architecture whatsoever – Snow May 25 '21 at 06:46

3 Answers3

0

Since you're doing all this programming on the client-side, not the server-side, a cookie may not be the best approach - cookies are for transferring persistent information between the client and server. Local Storage may be a more appropriate choice, for controllable semi-persistent data stored on the client. Local Storage persists over different tabs on the same site.

A possible approach would be to have the saved data expire a certain amount of time after any page on your site has last been opened. For example, you could have, on every page, a script that runs every minute or five and sets the expiry time to an hour or 10 minutes in the future, or something like that - depends how much fine control you want over when logout occurs after inactivity. The code would look something like this:

// on pageload:
const advanceExpiry = () => {
  localStorage.loginExpiry = Date.now() + 1000 * 60 * 10;
};
const loggedIn = localStorage.loginExpiry && localStorage.loginExpiry > Date.now();

if (loggedIn) {
  advanceExpiry();
  // every few minutes, push login expiry 10 minutes in the future:
  setInterval(advanceExpiry, 1000 * 60 * 5);
} else {
  // user has not logged in, or login has expired
  localStorage.loginExpiry = 0;
  // redirect to login page
}

and, on the login page, do localStorage.loginExpiry = Date.now() + 1000 * 60 * 10; followed by a redirect.

Just to point out, validation on the front-end is not remotely secure - but you already know about that and don't think it matters, which is fine.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • But I doubt if the scripts will run if the user closes the site. Say for example that they left in 5 minutes, then would the script run in the background to ensure that the log-out time is adhered to? – Snow May 25 '21 at 07:06
  • The point of the script is to run *only while the user is online*, and continually push the expiry time to a few more minutes in the future. If the user is offline for, say, more than 10 minutes at a time, the `localStorage.loginExpiry` will have expired, so once they load the page again, the script will see that their login has expired. – CertainPerformance May 25 '21 at 07:08
-1

There isn't a silver bullet readily available for your problem.
However, using a Service Worker in conjunction with the Task Scheduling API and some JavaScript, you will reach close.

More info - Task Scheduling

CodeWalker
  • 2,281
  • 4
  • 23
  • 50
  • I am a rather new person in the field of JavaScript. Just wondering if we could set the expiry time as a variable by some means? – Snow May 25 '21 at 06:58
-2

Delete all cookies after an hour

function deleteAllCookies() {
    var cookies = document.cookie.split(";");

    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        var eqPos = cookie.indexOf("=");
        var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }
}

setTimeout for 1hour

function myFunction() {
  myVar = setTimeout(deleteAllCookies, 3600000);
}

Call myFunction when user login's or when he or she starts the application.

M.Hassan Nasir
  • 851
  • 2
  • 13