How do I check if a folder exists over https

Question

I'm hosting a webpage on github (flickrTest.html) and I'm trying to check the existence of a folder in the same directory as the webpage. The hosted folder looks like this: http://imgur.com/a/pZWoH

I try to use an ajax call like this:

$.ajax({
            url: 'mapData',
            error: function() {
                //Ddirectory doesn't exist
                console.log("ERROR: expected directory named 'mapData'. Exiting...");
                return
            },
            success: function() {
                //Directory does exist
                console.log("mapData exists..");
             ...

but I'm getting a mixed-content error because this call is considered http and the site my webpage is being hosted on is https. Somehow I'm able to access mapData's JSON files if I include the absolute path. Is there a way to check for the existence of a folder over https?

Please don't use clickbait style titles for questions. Post the whole question where the question goes (the title). — Lawrence Johnson, Aug 26 '16 at 16:42
You can't read a whole folder like that via AJAX. You can only access individual files. — Mike Cluck, Aug 26 '16 at 16:42
It's a relative URL. Getting a mixed content from it is unlikely. — Quentin, Aug 26 '16 at 16:42
@MikeC — For "folder" I think we can read "URL which maps onto a directory on the webserver's filesystem which the server returns either an index file or an automatically generated directory listing" — Quentin, Aug 26 '16 at 16:43
@Quentin I don't think that's a reasonable assumption. They're trying to discover if a folder exists. Nothing about if there's any content in it. — Mike Cluck, Aug 26 '16 at 16:44
Even an empty folder will typically return a generated directory listing (of zero files) — Niet the Dark Absol, Aug 26 '16 at 16:45
@MikeC — http://imgur.com/a/B8Fxm has no content in it, it still gives a directory listing document with a 200 OK status code. — Quentin, Aug 26 '16 at 16:46
@LawrenceJohnson I apologize. The title wasn't intended to be a clickbait- style question. It was hastily-written and I intended to write out the full question but it slipped my mind after I proofread the content of this post. — Jaitnium, Aug 26 '16 at 18:03
@Quentin This is the full error message that I'm getting: Mixed Content: The page at 'https://jaitnium.github.io/popularLocationsDemo/flickrTest.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://jaitnium.github.io/popularLocationsDemo/mapData/'. This request has been blocked; the content must be served over HTTPS. — Jaitnium, Aug 26 '16 at 18:10

Lawrence Johnson · Accepted Answer · 2016-08-27T17:13:24.547

First, there is a fundamental problem with your approach. As others have stated in comments, you cannot check if a folder has contents (or exists) with a simple http (or https) web request since the web server will expect to respond with HTML that can be presented as information for a user's browser. You can create a handler or script that will process a directory request and map that functionality using something like a .htaccess rule or other rewrite system depending on what platform you are on. The reason why I've identified this as a "problem" and have not gone as far to say it's impossible, is because you can (as it appears you are attempting) parse that response into something usable. That said, I think it's beside the point and not the nature of the error you are actually getting.

The error you are experiencing is coming from loading the current page you are on in HTTPS and the ajax request you are making is over HTTP (as indicated by the error message). This message can be misleading in your case since it's not that the request URL has not been identified as HTTPS, it's because the browser doesn't trust that the URL is a Web request to either a file or a folder. You can correct this by simply adding a trailing slash to the folder:

$.ajax({
        url: 'mapData/',
        error: function() {
            //Ddirectory doesn't exist
            console.log("ERROR: expected directory named 'mapData'. Exiting...");
            return
        },
        success: function() {
            //Directory does exist
            console.log("mapData exists..");
         ...

You have now resolved the issue of completing the web request, but you are faced with a problem that is mentioned in the first part. The server will return a 404 error because that is how github.io is configured to respond to empty (or non-existent) directory requests. You will need some type of server-side handler to process this request, or you will need to come up with something else creative such as putting an index.html in that folder so that your JavaScript can parse the result. For instance, you could drop an index.html in the folder and if the server returns 200, then you know the folder exists, but if it returns 404 then you can assume the folder does not exist.

In case it's not already known, web servers are designed to make it so that a browser is limited in reverse-engineering it's content. While servers can be configured to return directory contents, by default, most are going to protect folders so that remote users cannot browse the server without some type of elevated permissions/authentication. Essentially, the reason why this requires a a more customized server-side approach is not because there is something wrong with the front-end code, it's because the web server is designed to not allow this type of thing without the server being configured to allow it due to security.

This is extremely well explained. Thank you for the detailed response! — Jaitnium, Aug 27 '16 at 18:35

How do I check if a folder exists over https

1 Answers1