How to prompt for password using AJAX and .htaccess?

Question

I am trying to protect an upload script with a password using AJAX + PHP + .htaccess.

My test website is at http://scrabble.stats.org.pl/test/gcg/. If you choose one option from the dropdown list, a table will appear. Then, in the rightmost column, you'll see "Dodaj" ("add") buttons. Their "change" event is handled with AJAX at line #25 (a minimal version below):

xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        $('.upload').on('change', function(event) {
            var file_data = $(event.target).prop('files')[0];
            //console.log(file_data);
            var form_data = new FormData();                  
            form_data.append('file', file_data);
            $.ajax({

                url: 'upload.php', // point to server-side PHP script 
                dataType: 'text',  // what to expect back from the PHP script, if anything
                cache: false,
                contentType: false,
                processData: false,
                data: form_data,
                type: 'post',
                success: function(php_script_response){
                    var response = $.parseJSON(php_script_response);
                    if ( response.status == 'error') {
                        alert( response.errormsg );
                    }
                    else {
                        $(event.target).closest('.fileUpload').hide();
                    }
                }
            });
        });
    }
};

upload.php can be found here. It just saves the contents of the uploaded file to a database. It returns a $response_array with success or error states.

Now, I know how to protect a folder on my server with a .htaccess file and it works fine (check out http://scrabble.stats.org.pl/test/gcg/upl):

AuthType Basic
AuthUserFile "/usr/auth.passwd"
require valid-user
AuthName "Protected site"

Is it possible to protect upload.php only, so that the website prompts for a password when a user clicks on that "Add" button?

I found this, this and this and tried those solutions, but they don't seem to work. Usually I am getting this error in Chrome console:

http://scrabble.stats.org.pl/test/gcg/upload/upload.php
Failed to load resource: the server responded with a status of 405 (Not
Allowed)

I am afraid I might not understand the above solutions. Firstly, I am not sure about the btoa(username + ":" + password) part. Are those special keywords or am I supposed to expose user:pass in those approaches?

score 0 · Answer 1 · edited May 23 '17 at 12:34

Your first link seems to do the right thing.

When clicking on the Add-Button, you need to display a popup or a form by yourself requesting the username and password for your upload.php

You can then submit these data to the server like seen in this post.

The btoa method encodes your data as base64.

Basically you just send a header for Basic-Auth ("Authorization", ...), and as the data you provide username and password.

I am afraid I might not understand the above solutions. Firstly, I am not sure about the btoa(username + ":" + password) part. Are those special keywords or am I supposed to expose user:pass in those approaches?

When you login to your server you ALWAYS have to send the username and the password. In btoa(username + ":" + password) username and password are variables you have to set (By reading data from the login form mentioned above).

How to prompt for password using AJAX and .htaccess?

1 Answers1