Jquery load page to div specified by # in url

Question

I have a jquery based website which requires no refreshing at all. But when you do refresh, you get thrown to the index page. I'm trying to get a # system inside the url (index#upload would load upload.php to #middle div). Now I got that kind of system working somehow, but it keeps refreshing my div all the time, and I'm not sure if this is the best way to do it:

if (window.location.hash) {
    var hash = window.location.hash.substring(1);

    switch(hash) {
        case "files.php":

            $("#middle").load(hash);
        break;
        case "upload.php":
            $("#middle").load(hash);
        break;
        case "update.php":
            $("#middle").load(hash);
        break;
        case "changepassord.php":
            $("#middle").load(hash);
        break;
        case "options.php":
            $("#middle").load(hash);
        break;
    }
} else {

}

Any better ideas for this? btw, I also have this linkbar, that should work along with it (I alredy have a code that changes the # depending on which link the user clicks on in this code /)

$(document).ready(function(){
    $('#sidenav a').click(function(e){
        e.preventDefault();
        href = $(this).attr('href');
        window.location.hash = href;
        urlLoad = href;
        $("#middle").load($(this).attr('href'));

    });
    $('#topbar .profile').click(function(e){
        e.preventDefault();
        $("#middle").load($(this).attr('href'));
    });
});

Answer 1

I would proceed like this:

1. don't give away the whole file name (including the .php extension), as this makes it just a bit easier for potential attackers to find a starting point Instead, use just the name part. Essentially, use "#files" as your tag, and load the page with $("#middle").load(hash+".php"); Instead of a switch/case, you could use an Array to check if the requested file is allowed.

2. Now how we're going to implement this depends on what your motivations are for asking for the allowed file names: a) Is it because there are other scripts that must not be able to be loaded into the document? (Your list is exhaustive) b) Or is it so you can be sure the requested file exists and there won't e an trouble? (Your list may be dynamic)

   for a) You might use an array ("files", "upload", "update" ...); to define your allowed paths, and check by indexOf(), whether or not the file is allowed

   for b) you might use Ajax or check for a 404 error like suggested here

3. Finally, wrap this inside a function that will be referenced when ever you need to load a content, so you don't have to do it in several places.

Without more information, this is as far as I can give advice. I hope it helps.

Answer 2

This method is a little more ambiguous. This method will fetch the page from a directory pages and append the file-type .php to the page. If the file does not exist nothing will happen (in case someone tried to inject an unknown file). Once the file has been loaded it will replace the content of #middle

function loadPage(page) {
    $.get('pages/' + page + '.php', function(data) {
        $('#middle').html(data);
    });
}