beforeSend jquery ajax

Question

I am making a simple login for my website and I am using ajax to interact with database. I wanted to make it a bit safe so I search for security for ajax so I search for AJAX authentication and read a question in SO regarding this. Found this and links to this. Unfortunately I dont really understand what it does or how it works. I am hoping someone would clarify this for me. In layman's term.

$(document).on('click', '#login', function() {
    var UserName = $('#username').val();
    var PassWord = $('#password').val();
    console.log(UserName);
    if (UserName) {
        if (PassWord) {
            $.ajax({
                type: 'POST',
                url: 'ajax/Login.php',
                dataType: "json",
                data: {
                    username: UserName,
                    password: PassWord
                },
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Authorization", "Basic " + btoa(UserName + ":" + PassWord));
                },
                success: function(data) {
                    if (data.error == true) {
                        $("#dialog").html(data.message);
                        $("#dialog").dialog({
                            title: "Login"
                        });
                        $("#dialog").dialog("open");
                    } else {
                        window.location = 'pages/dashboard.php';
                    }
                    //window.location = 'pages/dashboard.php';
                },
                error: function(data) {
                    alert('Login Error');
                    //window.location='../login.php';
                }
            });
        } else {
            $("#dialog").html("Password is empty!");
            $("#dialog").dialog({
                title: "Owner Information"
            });
            $("#dialog").dialog("open");
        }
    } else {
        $("#dialog").html("Username is empty!");
        $("#dialog").dialog({
            title: "Login"
        });
        $("#dialog").dialog("open");
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="un" id="username" />
<input type="password" name="pw" id="password" />
<input type="button" id="login" value="Login " name="login1" style="background-color:#feaa38;width: 100px" />

This code above is my code plus the additional code I got from the link. This below is the additional code.

beforeSend: function(xhr) {
    xhr.setRequestHeader("Authorization", "Basic " + btoa(UserName + ":" + PassWord));
},

I want to know.

What does ajax authentication do.
Do I really need it.
How do i know it is working.
What does it really do.

score 1 · Accepted Answer · answered Dec 03 '15 at 04:30

1

Don't get too caught up on the Ajax here. This is simply taking advantage of the "Basic" Authentication that Apache Provides. The user/pass needs to match against those in the .htpasswd file that is referenced. Apache will intercept the request and then after verifying will reroute the request to the original destination and has stored the authorized session for you now.
This seems like overkill. You're sending the username and password to authenticate to all future server requests (presumably) and not just to login to your software. It seems a bit much to control the user in 2 places as opposed to one.
If you have protected your pages in such a way that having a password and username is required to view the site, then this will ensure that every request made must follow this. However, once they're logged in it's redundant to perform this action.
This is explained through 1-3.

This does seem like overkill, and I don't think it adds anymore security. Once someone knows one password, they know both. Ditch it.

answered Dec 03 '15 at 04:30

Ohgodwhy

49,779
11
80
110

I see. I really didn't understand how the beforeSend work just by reading those links because they didn't explain much. I have 1 more question for instance i have more ajax request in my site(in dash i have ajax request) how do i make sure to make them safe?i mean more secure.`I could ask another question but I would probably be duplicated on this current question if i post`.also i would like to thank you for explaining *I am understanding little bit on how it works*. ***Hopefully you can suggest a better way to make the ajax request more secure*** – Martin Dec 03 '15 at 04:35
On number 1 answer you said `The user/pass needs to match against those in the .htpasswd file that is referenced` if this will clarify something i save my password in database. Do i need to save it in that file if ever i wanted to do this kind of security? – Martin Dec 03 '15 at 04:38
@Martin You would. because this is addressing specifically the "Basic Authorization" that Apache uses. which requires usernames to be in the `.htpasswd` file that is referenced in your virtualhost declaration. – Ohgodwhy Dec 03 '15 at 07:31

beforeSend jquery ajax

1 Answers1