Ways to store Token in Browser Cache?

I am currently developing a login system for an application at my school. I have successfully implemented user registration, which is saved to my Azure DocumentDB. However, when trying to log in with the user, the token does not get saved so that I can access it...

The code for the login function is as follows:

      var signin = function() {

            var tokenUrl = "http://localhost:15746/Token";
            var loginData = $("#userSignup").serialize();
            loginData = loginData + "&grant_type=password";
            $.post(tokenUrl, loginData).then(navigateToEvent);
                                                      
            return false;
        }

        $("#signup").click(signin);

How can I securely store the Token? Would using Local Storage be appropriate here?

javascriptajaxaccess-token

Answer №1

If you want to store a string in Local Storage, simply use

window.localStorage.setItem(key, value);

Later on, you can retrieve the stored value with:

window.localStorage.getItem(key);

Answer №2

Avoid storing tokens in local storage as it can make your application vulnerable to attackers. I came across an informative article on this topic: https://medium.com/@benjamin.botto/secure-access-token-storage-with-single-page-applications-part-1-9536b0021321.

Here are some key points from the referenced page:

“It’s recommended not to store any sensitive information in local storage.” -OWASP Cheat Sheet

“Don’t store tokens in local storage.” -Auth0: Where to Store Tokens

“You are safe from CSRF, but you have opened yourself up to a much greater attack vector… XSS.” Okta: JWTs Suck

“Don’t store [JWTs] in local storage (or session storage).” LogRocket: JWT Authentication Best Practices

“It is best to avoid letting the JavaScript code ever see the access token.” OAuth 2.0 for Browser-Based Apps: Best Current Practice

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the value of a textarea (which is filled through an AJAX request) using PHP

I'm having an issue with my Joomla component where it makes a jquery call (jquery.post) on button click and then populates the result in a textarea. However, when I submit the form to the backend, I am unable to fetch this data present inside the tex ...

phpjqueryajaxjoomla

jQuery slider - display unlimited images

Currently, I am encountering issues with a Flickity carousel of images. When an image/slide is clicked, a modal window opens to display a zoomed-in version of the image. The problem arises when there are more or fewer than 3 images in the slider — my cod ...

javascriptjquerycsscarousel

What is the best way to implement a dynamic sidebar component using React and Material UI?

I have been attempting to implement a responsive sidebar using React Material Design, but I am struggling to achieve the desired outcome. The main goal is for the page content to remain responsive when the sidebar is opened, without overlapping on the pag ...

javascriptreactjsmaterial-uirefluxjs

Can JavaScript be used to determine if any code has been executed from the browser's console?

I'm currently developing a JavaScript game and I want to prevent cheating. Is there a way for me to track and record commands entered in the JavaScript console? Here's a basic outline of what I have in mind: consoleCommands = ""; window.console ...

javascriptjquerysecurity

Is AjaxMin's EvalTreatment changing the game for JavaScript minification?

While minifying my project using the AjaxMin.dll with the default settings on every build/deployment, I ran into a problem. One of our third-party JavaScript files contains an eval statement that references variables or parameters which, when minified, cau ...

javascriptc#ajaxasp.net-ajax

Performing Vue CLI Global Upgrade

Struggling to create a new Vue.js project using the Vue CLI service, I encountered an error. With @vue/cli-service 3.0.0-beta.7 installed (confirmed by running vue -V), attempting to start a new project triggered the following error: ...

javascriptnpmvue.jsvuejs2

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Is it possible to create an inline textarea element using CSS that is selectable but still seamlessly integrated into a sentence without specifying the number of columns? Here's an example with a static number of characters (cols="11"): <p>To r ...

javascripthtmlcss

utilize jquery ajax to input various data

I am attempting to include multiple data in a jQuery ajax call. However, my current implementation is not working as expected. The data fetched is taken from the following span: <span id="<?php echo $tutorial_id; ?>" modes="<?php echo $modese ...

javascriptphpjqueryajax

What methods are available to test my website across different browsers such as outdated versions of Internet Explorer like IE8?

Currently, I am working on Chrome with Windows 7 OS installed. However, Windows 7 does not support Internet Explorer 8. This is causing issues when trying to view my web pages in the IE8 version and older. How can I resolve this problem? I have attempted ...

javascripthtmlcssuser-interface

Ways to incorporate react suspense with redux toolkit

I am currently using Redux toolkit to display data from an API, and I want to show the user a "loading data..." message or a spinner before displaying the city information. I have been attempting to use React Suspense, but it doesn't seem to be worki ...

javascriptreactjsreduxredux-toolkitreact-suspense

How about this: "Can you turn a picture into text with just one click?"

Seeking assistance to enhance the 'About Us' page on our website. Each team member has a profile with their email address listed below, but we want to add a picture that disappears when clicked, revealing the email address in its place. You can ...

javascriptjquerywordpressonclickimage

Issues with the execution of Jquery function

Hey guys, take a look at my code: //Additional Jquery codes // display_popup_crop : revealing the crop popup function display_popup_crop(link) { alert("show_popup_crop function is triggered!"); // changing the photo source $('#cropbox&a ...

javascriptphpjqueryhtmljcrop

Making a single variable object as opposed to using multiple variables

In order to improve the code structure, I am looking to consolidate all properties into a JavaScript object instead of using multiple variables: // Method 1 // This method gives an error as _inp cannot be accessed by input_value // Uncaught TypeError: Can ...

javascript

Include each value in Ajax requests

Here are my two questions: 1) How can I pass a value from a foreach loop to an AJAX call? I tried placing the AJAX code inside the foreach loop, but it kept giving me the ID of the last name in the loop. 2) Is there a way for me to click on "Add" and have ...

phpmysqlajax

Is there a way to disable a dropdown menu when clicking on a different one?

[![ Dashboard Admin Admin Profile Change Password Doctors Doctors List Doctors Appointments Doctors Requests Add a Doctor Patients ...

javascripthtmljqueryajaxbootstrap-4

IE8 Failing to Upload Files via Ajax

I encountered an issue while attempting to upload a file using a Javascript function that triggers an Ajax call to a servlet. Surprisingly, the file uploads successfully in Chrome but fails in IE8 (quite the mystery). Initially, I had a file select button ...

javascriptjqueryajax

Loading External Content with Jquery Ajax Made Easy

Today marks the beginning of my coding journey with jQuery. I believe that practice is key to learning effectively. My goal is to remove existing content from #container and replace it with new content from an external page. Sounds simple, right? I'v ...

ajaxjquery

What is the best way to conceal an element solely in live production environments?

Is there a way in my Angular code to specifically target the PROD environment? <div *ngIf="environment !== 'prod'" class="col-6"> <button class="btn btn-primary text-white add-photo" (cli ...

javascriptangular

Transmitting a plethora of information using jQuery

Here's the code I currently have for sending data: var test={imagename:"apple.jpg",x:"13",y:"33"}; $.ajax({ type: "POST", url: "some.php", data: test, success: function(response){ console.log(response); } }); ...

phpjavascriptjqueryjson

Tips for extracting information from an HTML table into a function using Google Apps Script

I am experiencing difficulties in coding this. I have attempted to use google.script.run but it's not working as expected. When I click the button "Approved," the data should be sent to a function, but I'm unsure of what steps to take next. I fee ...

javascriptgoogle-apps-scriptgoogle-sheets