How can I prevent access to an HTML page until a user has authenticated?

Question

I have an HTML page where a user can access a Web API 2 webservice to get some data. This HTML page is not part of the MVC application, but is a standalone HTML page, that can be on any web server or local OS.

Before the user can get the data, the user has to request a token with the following code:

function login()
{
    self.result = '';

    var loginData = {
        grant_type: 'password',
        username: document.getElementById("loginEmailTest").value,
        password: document.getElementById("loginPasswordTest").value
    };

    $.ajax({
        type: 'POST',
        url: 'https://localhost/token/Token',
        data: loginData
    }).done(function (data) {
        self.user = data.userName;
        // Cache the access token in session storage.
        sessionStorage.setItem(tokenKey, data.access_token);
    }).fail(showError);
}

How can I prevent access to a group of HTML pages, such that the user has to have a valid token or logon details before a page is loaded?

Can javaScript be used successfully with a simple cookie or sessionStorage check?

Answer 1

yes. requestHtml.php:

<?php
if(!isset($_POST['token'] || !is_valid_token($_POST['token'])){
header("HTTP/1.1 401 Unauthorized",true,401)
die("invalid token!");
}
$whitelist('foo.html','bar.html','baz.html');
if(!isset($_POST['html']) || !in_array($_POST['html'],$whitelist)){
header("HTTP/1.0 404 Not Found",true,404);
die("HTTP/1.0 404 Not Found");
}
readfile($_POST['html']);

and in the javascript,

function requestHtml(html){
var token=sessionStorage.getItem(tokenKey);
if(!token){
return false;//no token
}
var xhr=new XMLHttpRequest();
xhr.open("POST","requestHtml.php",false);
var fd=new FormData();
fd.append("token",token);
fd.append("html",html);
return xhr.send(fd);
}