Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2021
  • Last Modified:

Best Practice for jQuery AJAX call with user credentials

I have a list of summary records with a "more info" link on each one.  I'd like to fetch and display the detail for a given summary record through a jQuery ajax call when the more info link is clicked. Typically, I'd make a call to a webmethod to get these results.  However, this particular data is sensitive so I don't want to expose it through a web method unless a username and password are required parameters for the web method.  If I require username and password parms on the web method though, I have to provide this info from within the jQuery ajax call, which means I'd have to write this info to the client browser in the javascript code.  This seems bad.  What am I missing?  How do you do this sort of thing?
0
NTGuru705
Asked:
NTGuru705
  • 7
  • 5
  • 4
1 Solution
 
cenocreCommented:
If you are willing and able to send all the data to begin with, a very easy method would be to have the detail in a hidden div that only gets displayed when "more info" is clicked on. That way you only have to communicate with the server one time.

JQuery can easily toggle visibility although I find it easier and faster with my own js by toggling the css display with this portion of code:


{document.getElementById(v_element).style.display="block"}
			else
			{document.getElementById(v_element).style.display="none"}

Open in new window

0
 
NTGuru705Author Commented:
Yes but in large datasets this is not a good option... I am talking more conceptually here than in this specific instance.
How does one go about initiating ajax calls to services that really need to be protected by authentication?

Thanks
0
 
cenocreCommented:
This may be very simple.

If the log in is via the server software, tt would seem that if the user has not already logged in to get to the summary page, then the log in dialog would appear with the first AJAX request and then not be required again. This would be easy to test by just creating a protected realm and doing a simple Get of a page in the realm via JQuery.

If the log in is via another method such as validation in your DB, you could simply append the user name and password to the submitted string in the javascript that is doing the submission. This could be done with JQuery or in another script before being passed to JQuery.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
amit_gCommented:
If your whole application is open only to authenticated users this doesn't need any extra implementation. The unauthenticated call would be rejected by the web application (similar to redirect to Login page in the browser). Once the user is authenticated all the cookie information is passed and so the call would succeed.
0
 
NTGuru705Author Commented:
I dont think you are following me...

Lets not get hung up on the specific illustration I gave...
Lets say I have a webservice... this webservice provides information about something that you would need authentication to work with. Lets say you want this webservice to be accessible from any platform that supports webservices... so it could be an AJAX call or it could be a full featured app on a mobile device or even a windows app.

Now embedding username and password information in an app is one thing but when you get to making the AJAX calls this is a different story because the javascript is in the page and thus the cache.  I understand about authenticating in the web app and thus the user has authority to see the method but if the method is a webservice this web service will need some sort of auth... so if I embed this auth into the Javascript then the credentials will be in the cache of the machine... and this is not a good idea I dont think.

Another way would be to render the javascript in code behind and hash the username and password in some way but then the key has to be known and thus the hash is really no good.

The only way I can think to do this is like this..

1. Any application that will interface with the webservice will have to have a developer code which will be passed as a parameter.
2. The developer will be assigned a secret key
3. The developer will hash the username and password using their key
4. The application will pass the hashed information and the webservice will be able to use the credentials
5. AJAX requests will be handled by javascript code that is rendered at runtime in code behind so the credentials can be passed and secured

This still has holes in it though because the developer code will have to be passed as a parameter and if you have that the information that is in the cache is still reusable unless you have some way of expiring it.

There must be a better way to do this...
How does twitter handle this... ?

If you log into Twitter and stay logged in there is an AJAX request that populates something that says "1 new tweet" - they have to know who I am do get that information... I will try to look through their js - I was just curious best practice on this.
0
 
amit_gCommented:
Your Twitter example is within the same app. In that case the AJAX carries the same information as the regular postback. In any regular web app, the authentication information is not passed in each GET or POST. Once the user is logged in, the cookie is written and that cookie keeps passing in each GET or POST and that is how the server knows if and who is logged in. The same applies to the AJAX calls.

Now when the applications are different and require authentication, you probably have to go through the your own authenticated application so that no username and password are needed on the client side. The authenticated web application then can call the webservice with username and password that stays completely on the server. The problem with this approach is that a webservice proxy is to be created for all webservices that need to be called.
0
 
cenocreCommented:
I followed you fine.

What you state is basically correct. If you really are concerned about access to your data stream simply use HTTPS. That should provide good protection. Or use cookies with encrypted contents.

As for the expiring, it is very easy. I just have the database on the server set to have sessions expire after a certain period of inactivity. Or use cookies for this purpose.
0
 
amit_gCommented:
If the provider of the web service implements, these can be used also. Generally these are useful when the logged in user's credentials are to be used though.

http://en.wikipedia.org/wiki/OpenID
http://en.wikipedia.org/wiki/OAuth
0
 
NTGuru705Author Commented:
The javascript on the client is clear text... I am not worried about transport level intercept.

cenocre - Have you worked with AJAX? You comments lead me to believe you do not understand what I am asking here.
The problem here is how to make use of the webservice that requires auth in a secure manner.

amit_g - These are auth providers.. I am not talking about a provider here.

Regardless of the provider there is still sensitive information that needs to reside in the Javascript on the client if you want to make use of the AJAX call that needs to be secured.

If you have a webservice that is called getInvoiceDetails(username, password, invoicenumber)...

You have to make a call to this webservice using SOMETHING to secure the call... but if the caller is Javascript JSON it would look like the attached....

Now the problem here is I need to pass the username and password to get this information and this is going to be injected into the HTML at render and that is not a good thing... there must be something better here.


function GetEmployeeName(uid, pwd, invnum) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "AccountingServices.aspx/getInvoiceDetails",
        data: "{username: '" + empID + "', password: '" + pwd+ "', invoicenumber: '" + invnum+ "'}",
        dataType: "json",
        success: function(response) {
            if (response.d != "") {
                //DO SOMETHING
            }
            else {
                //DO SOMETHING ELSE
            }
        },
        error: function(xhr, ajaxOptions, thrownError) { alert(xhr.statusText); alert(xhr.responseText); }
    });

Open in new window

0
 
NTGuru705Author Commented:
Crud... the code there is wrong.. sorry. The function should be showInvDetails() not GetEmployeeName()
0
 
NTGuru705Author Commented:
In this case the webservice is on the same webserver so there could be some cookie use but in other cases this is not possible... say for example if you were calling a webservice from another web site (twitter, facebook, etc).

I think I will just go have a look at those APIs to see how they implement it.

Thanks for your help.
0
 
cenocreCommented:
"cenocre - Have you worked with AJAX? You comments lead me to believe you do not understand what I am asking here.
The problem here is how to make use of the webservice that requires auth in a secure manner."

Yes, I work with AJAX almost daily and I own and maintain the web servers and program the databases that are running on the servers. Guess we just have a communication gap, as what your are asking seems clear and has several possible solutions.

Good luck.
0
 
amit_gCommented:
So far, what I understood is that we were talking about the authenticated web services. For methods like

getInvoiceDetails(username, password, invoicenumber)

where the method itself needs the username and password, I don't know of any secure way of calling these without exposing the username and password. These methods would require to be rewritten or a proxy created so that the password is not needed from the client.
0
 
NTGuru705Author Commented:
Ok lets roll with twitter for a moment...

There must be a webservice that lets you pull tweets for your account... if this is a public API you would have to auth to get the tweets.
How would this be done if you wanted to use AJAX to get these details?

0
 
amit_gCommented:
I believe they allow multiple ways. For public URLs one can use JSON

http://search.twitter.com/search.json?&q=TwitterID&rpp=8&callback=?

or direct GET

http://twitter.com/TwitterID

They also to allow oAuth to get both public and private feeds. In that case only token is to be passed, no password is needed. I am not familiar with details though.

Also one can always do it from server side.

It is mostly on the provider side. If you have to call a web service that expects password to be passed in a method, you can't call it from javascript without exposing the password or creating a server side proxy.
0
 
NTGuru705Author Commented:
This is essentially the answer we came up with. There are a few ways to do this and as brought up earlier - if you are calling a method that is on the same site you could use logic to check if the user is authenticated and since the session is shared you could secure that well using the same logic as you would in a postback... this makes sense.

Where we ended up was that for calls to a webservice that was on a different site the best method would be to wrap the call to the remote webservice inside an exposed method on your site... so create a sort of proxy to the call that happens on the back side.. this way I can enforce as brought up earlier the password in my app and also call the remote service without exposing the credentials - all the while this can be done in AJAX.

Thank you for your help!
0

Featured Post

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

  • 7
  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now