Basic Authentication with special characters with Jquery Ajax Tomcat

Question

I am trying to send a DELETE request to a tomcat server using AJAX.

I want the request to use a basic auth. I can't really get there if the password contains special characters.

The configuration of the system is:

• jquery 1.10.2
• tomcat 7.0.47

Before asking I try to follow what I found in:

• How to use Basic Auth with jQuery and AJAX?
• How can you encode a string to Base64 in JavaScript?
• Javascript Ajax call using password with special characters

The Tomcat configuration is:

</tomcat-users>
  <role rolename="authUser"/>
  <user username="username" password="password" roles="authUser"/>
</tomcat-users>

I made an ajax request using jquery

$.ajax({
    type: "DELETE",
    url: "http://localhost:8080/TestAuthentication",
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",

    username: "username",
    password: "password",

    success: function(){
        alert("Data Deleted");
    }
});

With this configuration everything works.

If I put special characters in the configuration file of tomcat I'm no more able to make correct request.

</tomcat-users>
  <role rolename="authUser"/>
  <user username="username" password="AeHm#%%9Rt\'JzX^|A'N" roles="authUser"/>
</tomcat-users>

I try with two ajax settings

$.ajax({
    type: "DELETE",
    url: "http://localhost:8080/TestAuthentication",
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",

    username: "username",
    password: "AeHm#%%9Rt\'JzX^|A'N",

    success: function(){
        alert("Data Deleted");
    }
});

$.ajax({
    type: "DELETE",
    url: "http://localhost:8080/TestAuthentication",
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",

    username: encodeURIComponent("username"),
    password: encodeURIComponent("AeHm#%%9Rt\'JzX^|A'N"),

    success: function(){
        alert("Data Deleted");
    }
});

with this two configurations I see the same request.

So I try a more older approach

$.ajax({
    type: "DELETE",
    url: "http://localhost:8080/TestAuthentication",
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",

    beforeSend: function(xhr) {
        xhr.setRequestHeader("Authentication", "Basic " + btoa(unescape(encodeURIComponent("username" + ":" + "AeHm#%%9Rt\'JzX^|A'N")))); 
        xhr.setRequestHeader("Authorization", "Basic " + btoa(unescape(encodeURIComponent("username" + ":" + "AeHm#%%9Rt\'JzX^|A'N")))); 
    },

    success: function(){
        alert("Data Deleted");
    }
});

With this request I always get the error: 401 (Unauthorized)

But usign a c# client I'm able to authenticate the request:

HttpWebRequest httpWebRequest = (HttpWebRequest)WebRequest.Create(@"http://localhost:8080/TestAuthentication");
request.Credentials = new NetworkCredential("username", @"AeHm#%%9Rt\'JzX^|A'N");
....

And I'm also able to access to URL if I put "username" and "AeHm#%%9Rt\'JzX^|A'N" on alert show me from the browser.

So it seems to be a problem of the request I made.

Please, could someone help me?

Answer 1

Finally I have undestand the problem was: the escape

Writing:

• AeHm#%%9Rt\'JzX^|A'N
• wrong output: AeHm#%%9Rt'JzX^|A'N =>so I lost the "\" character

Writing the password escaping the "\" character

• AeHm#%%9Rt\\'JzX^|A'N
• correct output: AeHm#%%9Rt\'JzX^|A'N

Here the working code:

$.ajax({
    type: "DELETE",
    url: "http://localhost:8080/TestAuthentication",

    beforeSend: function(xhr) {
        //May need to use "Authorization" instead
        xhr.setRequestHeader("Authentication", "Basic " + btoa(unescape(encodeURIComponent("username" + ":" + "AeHm#%%9Rt\\'JzX^|A'N")))); 
        xhr.setRequestHeader("Authorization", "Basic " + btoa(unescape(encodeURIComponent("username" + ":" + "AeHm#%%9Rt\\'JzX^|A'N"))));
    },  

    success: function(){
        alert("Data Deleted");
    }
});