0

I would like to create a page which can only be accessed by people who have entered their details. To do this, the browser does GET /checkout and sends the authorisation information in the header, which will either return the hidden page to the browser or will return a different page for the user to enter their details. Once they have entered their details (for the first time), they are sent to the server and a session token as well as a user id are generated and returned. This is then stored to the session storage. Is there a way to display this page sent in the response from the webserver by using a GET request using AJAX?

function checkoutLogin() {

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = a => {
                if (a.target.readyState === XMLHttpRequest.DONE && a.target.status === 200) {
                    console.log("nice");
                    //response received successfully
                    //display the page now
                }
            }
            xmlhttp.open("GET", "/checkout");
            xmlhttp.setRequestHeader("Content-Type", "html; charset=UTF-8");
            xmlhttp.setRequestHeader("userID", sessionStorage.getItem("ID"));
            xmlhttp.setRequestHeader("sessionToken", sessionStorage.getItem("Hash"));
            
            xmlhttp.send();
        }
  • 2
    `document.write(a.target.responseText)`? – Barmar Jun 18 '20 at 22:30
  • @Barmar this doesn't allow JavaScript to be run though... is there a way round this? –  Jun 20 '20 at 10:47
  • Do you have to do this with AJAX? Why not just redirect to the new page? – Barmar Jun 20 '20 at 16:14
  • @Barmar I need the page to only be accessible to users with a valid token (which is stored in the session storage). I would prefer that users can also just navigate to this one page, which will show them the content that they are supposed to see. This is either a page that a user fills in their details to obtain a valid token or the actual hidden page. I am unsure of how I would do this otherwise (afaik, session stoage data cannot be sent from a standard GET request by typing the URL into the browser). –  Jun 20 '20 at 17:38
  • Are you using any back-end language? – xTrimy Jun 20 '20 at 18:46
  • @xTrimy I am using Node.js with express, as well as handlebars to generate the webpage –  Jun 20 '20 at 18:59
  • @Starman You can create a session token when the user sends the data in the form, then redirects the user to a webpage. On this webpage, you check the session token for displaying the page... this will be similar to the login page in any website, the user enters his data, the server process it, if the data is correct, he redirected to the home page with the content of the "logged in" page. – xTrimy Jun 20 '20 at 19:26
  • @xTrimy I pretty much have this already. Currently, the browser sends a `GET` to `/checkout`. This page is pretty much blank and it simply sends a `POST` to `/checkoutPage` with all the token and ID in the header. The webserver then checks to see if the token exists and is valid, then returns either the page to enter the details and generate the token (if there is no token or it is not valid) or will return the checkout page. How would I then show the user the checkout page (preferably on the same page, so it is easier to navigate to as a URL) without letting users with no/invalid tokens in. –  Jun 20 '20 at 20:13
  • It seems that someone had a very similar question [here](https://stackoverflow.com/questions/22478441/replacing-a-whole-webpage-with-alternative-content-html-css-js), which answered this question. I am now utilising a jQuery plugin to [redirect with post data](https://stackoverflow.com/questions/19036684/jquery-redirect-with-post-data). –  Jun 20 '20 at 22:02

0 Answers0