How to maintain security when using JQuery for inline page editing (edit-in-place)

Question

I want to allow users to edit items on their profile page after they have logged in (like on facebook). Lets call this page profile.cfm .

I am confused how to allow inline editing of a page (that is, replacing page elements with form inputs so the user can edit the content in place) only if the user is logged in and their credentials match those of the page they want to edit.

Traditionally, I would have a separate page for editing a profile like profile-edit.cfm . On this page I would check that the ID of the profile they want to edit is the same as the ID stored in their Session variable. If everything matches up then the page will display. If not it will fail.

However with JS inline editing, there is no separate edit page to take care of security checks. So how can I enable the JS editing capability only when the correct user is logged-in? I don't want users modifying other people's profile of course. Simply disabling/enabling the inline editing Javascript code based on log-in credentials isn't enough because that can easily be turned back on using Firebug etc.

Of course even though they can enable the javascript doesn't mean the server will accept the edit because it does its own validation. Its just that I'd rather users didn't have the option to even visually edit the page if they don't have the correct login credentials.

Is this just the expected trade-off for having javascript based controls that they may be visible to a user (who is of course maliciously amending the page) will not work correctly depending on other variables?

I'm stuck on this from a logic/conceptual point.

Answer 1

If I were you. I use ASP.NET C# for developing the web applications. And if I ever wish to have everything done on the client side using JQuery, Javascript I would do the following:

• Decide which things identifies my client login and I have those available with me at the client side also. Such as his ID, Session ID, Cookie, etc.
• Create an encryption technique.
• Write that to a hidden field.
• Compute the same at the client side and then match the result.
• If that is equal to the hidden field's value you have a authentic user. Else not. And this can be done over and over again after small intervals.

Example: Consider you have with you like profile id, username and session id. So you may create a pattern like say Username+Profile ID+Session ID and create a hash of that string. And then create the same at client side. And validate it then. Hope that helps.

Answer 2

For Inline edit there has to be some initialization or some script which makes the form fields editable. So include these script based on condition. Form Example

If(session[ID] == Profile ID){
   <script type="text">
       Add all your scripts which will allow inline editing.
   </script>
}

If the condition does not meet then the scripts will not be included and hence the form fields will not be editable. Hope this helps.