tag:blogger.com,1999:blog-17065718855166060292024-03-05T12:22:52.376-08:00coding 4 ajaxPankaj Dehariahttp://www.blogger.com/profile/11452457893239880269noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-1706571885516606029.post-36244997308622638332009-05-18T07:22:00.001-07:002009-05-18T07:22:45.455-07:00JQuery AjaxWhen it comes to lightweight client-side communication, I’ve noticed that many of you prefer ASP.NET AJAX’s page methods to full ASMX web services. In fact, page methods came up in the very first comment on my article about using jQuery to consume ASMX web services.<br /><br />Given their popularity, I’d like to give them their due attention. As a result of Justin’s question in those comments, I discovered that you can call page methods via jQuery. In fact, it turns out that you can even do it without involving the ScriptManager at all.<br /><br />In this post, I will clarify exactly what is and isn’t necessary in order to use page methods. Then, I’ll show you how to use jQuery to call a page method without using the ScriptManager.<br /><br /><span style="font-weight:bold;"><br />Creating a page method for testing purposes.</span><br /><br />Writing a page method is easy. They must be declared as static, and they must be decorated with the [WebMethod] attribute. Beyond that, ASP.NET AJAX takes care of the rest on the server side.<br /><br />This will be our page method for the example:<br /><br />public partial class _Default : Page <br />{<br /> [WebMethod]<br /> public static string GetDate()<br /> {<br /> return DateTime.Now.ToString();<br /> }<br />}<br /><br /><span style="font-weight:bold;">What about the ScriptManager and EnablePageMethods?</span><br /><br />Traditionally, one of your first steps when utilizing page methods is to set the ScriptManager’s EnablePageMethods property to true.<br /><br />Luckily, that property is a bit of a misnomer. It doesn’t enable page methods at all, but simply generates an inline JavaScript proxy for all of the appropriate methods in your page’s code-behind.<br /><br />For example, if a ScriptManager is added to the above example’s corresponding Default.aspx and its EnablePageMethods property is set to true, this JavaScript will be injected into the page:<br /><br />var PageMethods = function() {<br /> PageMethods.initializeBase(this);<br /> this._timeout = 0;<br /> this._userContext = null;<br /> this._succeeded = null;<br /> this._failed = null;<br />}<br /> <br />PageMethods.prototype = {<br />_get_path:function() {<br /> var p = this.get_path();<br /> if (p) return p;<br /> else return PageMethods._staticInstance.get_path();},<br />GetDate:function(succeededCallback, failedCallback, userContext) {<br />return this._invoke(this._get_path(), 'GetDate',false,{},<br /> succeededCallback,failedCallback,userContext); }}<br />PageMethods.registerClass('PageMethods',Sys.Net.WebServiceProxy);<br />PageMethods._staticInstance = new PageMethods();<br /> <br />// Generic initialization code omitted for brevity.<br /> <br />PageMethods.set_path("/jQuery-Page-Method/Default.aspx");<br />PageMethods.GetDate = function(onSuccess,onFailed,userContext) {<br /> PageMethods._staticInstance.GetDate(onSuccess,onFailed,userContext);<br />}<br /><br />Don’t worry if you don’t understand this code. You don’t need to understand how it works. Just understand that this JavaScript proxy is what allows you to call page methods via the PageMethods.MethodName syntax.<br /><br />The important takeaway here is that the PageMethods proxy object boils down to a fancy wrapper for a regular ASP.NET service call.<br />Calling the page method with jQuery instead.<br /><br />Knowing that a page method is consumed in the same way as a web service, consuming it with jQuery isn’t difficult. For more detailed information, see my previous article about making jQuery work with ASP.NET AJAX’s JSON serialized web services.<br /><br /><span style="font-weight:bold;">Using the jQuery.ajax method, this is all there is to it:</span><br /><br />$.ajax({<br /> type: "POST",<br /> url: "PageName.aspx/MethodName",<br /> data: "{}",<br /> contentType: "application/json; charset=utf-8",<br /> dataType: "json",<br /> success: function(msg) {<br /> // Do something interesting here.<br /> }<br />});<br /><br /><span style="font-weight:bold;">Putting it all together.<br /></span><br />Corresponding to the example page method above, here’s our Default.aspx:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzWIerBAPiSz6dXQI6rbXXH8bcyOTC-33x0tgm5-GXR7kTiedgC648T79KOk1jJCuVHe8mz2IV6EB_0zH4GjaXFNJ4yftjcBLvSi9W3BHkgHh5Hnv6FvuWt8k_aCJy3l9Lp51vTgQsZH0/s1600-h/jQuery.bmp"><img style="cursor:pointer; cursor:hand;width: 400px; height: 168px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzWIerBAPiSz6dXQI6rbXXH8bcyOTC-33x0tgm5-GXR7kTiedgC648T79KOk1jJCuVHe8mz2IV6EB_0zH4GjaXFNJ4yftjcBLvSi9W3BHkgHh5Hnv6FvuWt8k_aCJy3l9Lp51vTgQsZH0/s400/jQuery.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5337164788390257858" /></a><br /><br /><br />As you can see, there’s no ScriptManager required, much less EnablePageMethods.<br /><br />As referenced in Default.aspx, this is Default.js:<br /><br />$(document).ready(function() {<br /> // Add the page method call as an onclick handler for the div.<br /> $("#Result").click(function() {<br /> $.ajax({<br /> type: "POST",<br /> url: "Default.aspx/GetDate",<br /> data: "{}",<br /> contentType: "application/json; charset=utf-8",<br /> dataType: "json",<br /> success: function(msg) {<br /> // Replace the div's content with the page method's return.<br /> $("#Result").text(msg.d);<br /> }<br /> });<br /> });<br />});<br /><br />The end result is that when our result div is clicked, jQuery makes an AJAX call to the GetDate page method and replaces the div’s text with its result.<br /><br />If you’re wondering about the msg.d, be sure to see my post about what it is, why it’s there, and why you may not need it in your version of ASP.NET: A breaking change between versions of ASP.NET AJAX<br /><br /><span style="font-weight:bold;">Conclusion</span><br /><br />Page methods are much more openly accessible than it may seem at first. The relative unimportance of EnablePageMethods is a nice surprise.<br /><br />To demonstrate the mechanism with minimal complications, this example has purposely been a minimal one. If you’d like to see a real-world example, take a look at Moses’ great example of using this technique to implement a master-detail drill down in a GridView.<br /><br />If you’re already using the ScriptManager for other purposes, there’s no harm in using its JavaScript proxy to call your page methods. However, if you aren’t using a ScriptManager or have already included jQuery on your page, I think it makes sense to use the more efficient jQuery method.Pankaj Dehariahttp://www.blogger.com/profile/11452457893239880269noreply@blogger.com0tag:blogger.com,1999:blog-1706571885516606029.post-56481894406261482122009-05-18T07:21:00.001-07:002009-05-18T07:21:46.666-07:00API 1.3 AjaxAjax Requests:
<br />
<br />Name & Type
<br />jQuery.ajax( options ) : Returns: XMLHttpRequest
<br />Load a remote page using an HTTP request.
<br />
<br />load( url, data, callback ) : Returns: jQuery
<br />Load HTML from a remote file and inject it into the DOM.
<br />
<br />jQuery.get( url, data, callback, type ) : Returns: XMLHttpRequest
<br />Load a remote page using an HTTP GET request.
<br />
<br />jQuery.getJSON( url, data, callback ) : Returns: XMLHttpRequest
<br />Load JSON data using an HTTP GET request.
<br />
<br />jQuery.getScript( url, callback ) : Returns: XMLHttpRequest
<br />Loads, and executes, a local JavaScript file using an HTTP GET request.
<br />
<br />jQuery.post( url, data, callback, type ) : Returns: XMLHttpRequest
<br />Load a remote page using an HTTP POST request.
<br />
<br />Ajax Events:
<br />Name & Type
<br />ajaxComplete( callback ) Returns: jQuery
<br />Attach a function to be executed whenever an AJAX request completes. This is an Ajax Event.
<br />
<br />ajaxError( callback ) Returns: jQuery
<br />Attach a function to be executed whenever an AJAX request fails. This is an Ajax Event.
<br />
<br />ajaxSend( callback ) Returns: jQuery
<br />Attach a function to be executed before an AJAX request is sent. This is an Ajax Event.
<br />
<br />ajaxStart( callback ) Returns: jQuery
<br />Attach a function to be executed whenever an AJAX request begins and there is none already active. This is an Ajax Event.
<br />
<br />ajaxStop( callback ) Returns: jQuery
<br />Attach a function to be executed whenever all AJAX requests have ended. This is an Ajax Event.
<br />
<br />ajaxSuccess( callback ) Returns: jQuery
<br />Attach a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.
<br />
<br />
<br />Misc:
<br />
<br />Name & Type
<br />jQuery.ajaxSetup( options )
<br />Setup global settings for AJAX requests.
<br />
<br />serialize( ) Returns: String
<br />Serializes a set of input elements into a string of data.
<br />
<br />serializeArray( ) Returns: Array<Object>
<br />Serializes all forms and form elements (like the .serialize() method) but returns a JSON data structure for you to work with.Note: The JSON structure returned is not a string. You must use a plugin or third-party library to "stringify".
<br />
<br />Pankaj Dehariahttp://www.blogger.com/profile/11452457893239880269noreply@blogger.com0tag:blogger.com,1999:blog-1706571885516606029.post-43843339138908133362009-05-12T06:33:00.000-07:002009-05-13T01:23:01.057-07:00Ajax Overview<span style="font-weight:bold;">Web technological terms</span><br /><br />HTML<br />The World Wide Web is constructed from many millions of individual pages,<br />and those pages are written in a language called HTML. The purpose<br />of this language is to display the content in the browser.<br />Cascading Style Sheets<br />Normal files with HTML understandable style syntax that results colorful<br />display of the content in the browser.<br />JavaScript<br />Scripting code that is embedded in the HTML to make the normal HTML<br />pages more dynamic.<br />Server script<br />Script at the server side that provides results to the clients requests.<br />EX: PHP,ASP,JSP,ASP.NET<br /><br />Framework<br />A Framework in software development is defined as the support structure in<br />which other projects can be developed and organized.<br />Library<br />A library is defined as a collection of related functions and subroutines used<br />to develop software. They are not independent programs.<br />Toolkits<br />A toolkit is generally used in reference to graphical user interface (GUI)<br />toolkits. Basically, a library that is mainly focused on creating a GUI..<br />Object<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLWCSlAZhpVO1T1OoGDhOw30LCeiAPGZFHbUzTmMHxo7TSsJPBbe5HioKoBxAf_cEAK7v3PnIJMFPGyfEkmShfL5WkmxCdcE8aR3-z0eOMeja5-XjDyOMppTpm1aNxp8d50cZzajfdOHjo/s1600-h/need+for+ajax2.bmp"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 131px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLWCSlAZhpVO1T1OoGDhOw30LCeiAPGZFHbUzTmMHxo7TSsJPBbe5HioKoBxAf_cEAK7v3PnIJMFPGyfEkmShfL5WkmxCdcE8aR3-z0eOMeja5-XjDyOMppTpm1aNxp8d50cZzajfdOHjo/s400/need+for+ajax2.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5334930707603378050" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr4PbTXKwqjBnDCW-jTyD__Ea4mVmgTJjEPBG5jILHSJpSWD1w6RSmweqI-750G4Nm8F5mB8lEn0fi0Ejh2ANha0Vx0xCAhQ3SJdEPeJDzn5M7P0nHL1lqeyUb7gdWgA7kM9QTtqSl2fEh/s1600-h/need+for+ajax1.bmp"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 369px; height: 249px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr4PbTXKwqjBnDCW-jTyD__Ea4mVmgTJjEPBG5jILHSJpSWD1w6RSmweqI-750G4Nm8F5mB8lEn0fi0Ejh2ANha0Vx0xCAhQ3SJdEPeJDzn5M7P0nHL1lqeyUb7gdWgA7kM9QTtqSl2fEh/s400/need+for+ajax1.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5334930707581792866" /></a><br /><br />Ajax allows you to add to your web application interfaces some of this<br />functionality more commonly seen in desktop applications and often<br />referred to as a rich user experience.<br />To achieve this, Ajax builds an extra layer of processing between the<br />web page and the server. This layer is commonly referred as<br />AJAX Engine (or)<br />AJAX Framework<br />The updating of page elements to reflect the revised information received<br />from the server is also looked after by Ajax, happening dynamically<br />while the page continues to be used.<br /><br />An object can be thought of a single package contains set of properties,which<br />contains and classify the data,set of methods with which objects can perform<br />actions on the data.<br /><br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZif0JeFOZzeWnhRfo_Pl0HH7QMjhf-4VQmmzqXTBd9Axe-Qhdx0pbuC8el8jMt56Jh3k8lzfhTEnGIFJl6LAKLhWS8O_Ez9f9pNBEu7yzi20l9IQA-IYcRAktEX82Rilm86e2mfsPd07H/s1600-h/Introduction+ajax2.bmp"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 369px; height: 178px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZif0JeFOZzeWnhRfo_Pl0HH7QMjhf-4VQmmzqXTBd9Axe-Qhdx0pbuC8el8jMt56Jh3k8lzfhTEnGIFJl6LAKLhWS8O_Ez9f9pNBEu7yzi20l9IQA-IYcRAktEX82Rilm86e2mfsPd07H/s400/Introduction+ajax2.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5334930703142967202" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcr8gHpPddRKYCnrHFmNfbhOWLELqniHH6Jy-ubA4276gWyIdqGGNZM2dfM8Z0Fmtbl7CKzHXj4KTJW10aQh8ottveJhilErkcDk4IjKFK4PWLq2EUj_IPU5f6vV0UKVvjI7xGhljVVTVZ/s1600-h/Introduction+ajax1.bmp"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 342px; height: 239px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcr8gHpPddRKYCnrHFmNfbhOWLELqniHH6Jy-ubA4276gWyIdqGGNZM2dfM8Z0Fmtbl7CKzHXj4KTJW10aQh8ottveJhilErkcDk4IjKFK4PWLq2EUj_IPU5f6vV0UKVvjI7xGhljVVTVZ/s400/Introduction+ajax1.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5334930698878495314" /></a><br /><br /><br />Constituent stages in AJAX<br /><br />XMLHTTPRequest Object<br />Heart of the AJAX Engine and it is responsible to carry the HTTP request<br />to the server asynchronously.<br />Note The XMLHTTPRequest object can generally only make calls to URLs within the same domain as the<br />calling page and cannot directly call a remote server.<br />Talking with the Server<br />XMLHTTPRequest talks with the server with its appropriate methods and<br />properties asynchronously at the backside.<br />Server Response<br />As per the Server script is concerned the request from the<br />XMLHTTPRequest is just another HTTP request.<br />Dealing with the Server Response<br />Once after the AJAX Engine gets notified about the sucessful execution.<br />It modifies the data according to the functionality and keeps in place.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjr3pcaJKWk6VD4xEM6_LC3z4iBWMPMPUgmJS2BANfNdDNvIAZghKQ9rqqDhPAoGCkuDw7eu-b2DQDpZGwm5FMKF94yBp7tiT1_1UXYcVcCAhhx9z_HdHu71gAb1dBkU3Uwk9i_Rnowe0N/s1600-h/web+engine+ajax.bmp"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 311px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjr3pcaJKWk6VD4xEM6_LC3z4iBWMPMPUgmJS2BANfNdDNvIAZghKQ9rqqDhPAoGCkuDw7eu-b2DQDpZGwm5FMKF94yBp7tiT1_1UXYcVcCAhhx9z_HdHu71gAb1dBkU3Uwk9i_Rnowe0N/s400/web+engine+ajax.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5334930711523127938" /></a><br /><br /><br />AJAX Engine setup<br /><br />XMLHTTPRequest Object Properties and Methods<br />onreadystatechange Determines which event handler will be called when<br />the object's readyState property changes<br />readystate<br />Integer reporting the status of the request:<br />0 = uninitialized<br />1 = loading<br />2 = loaded<br />3 = interactive<br />4 = completed<br />responseText Data returned by the server in text string form<br />responseXML Data returned by the server expressed as the document<br />object<br />status HTTP status code returned by server<br />statusText HTTP reason phrase returned by server<br /><br />Methods Description<br /><br /><br />abort() : Stops the current request<br />GetAllResponseHeaders() : Returns all headers as a string<br />getresponseHeader(x) : Returns the value of header x as a string<br />open('method','URL','a') : specifies the HTTP method (for example, GET or POST),<br />the target URL, and whether the request should be<br />handled asynchronously (If yes, a='True'the default;<br />if no, a='false'.)<br />send(content) : HTTP status code returned by server<br />setRequestHeader('x','y') : HTTP reason phrase returned by server<br /><br /><br /><br />send() Method<br />Once the XMLHTTPRequest object is prepared with the open() method, it is<br />possible to send the request with the send() method.<br />If the request uses GET method ,then we can use send with a single<br />argument null<br />objectInstance.send(null);<br />If the request uses POST method ,we must feed the content type and the<br />values.<br />objectInstance.setRequestHeader('Content-Type',<br />'application/x-www-form-urlencoded');<br />objectInstance.send(var1=value1&var2=value2);<br /><br />Creating the XMLHTTPRequest Object with Cross Browser solution<br /><br />We can provide the solution for the Cross-Browsers using two ways<br /><br />1. Using Object Detection<br /><br />function getXMLHTTPRequest()<br />{<br />var request = false;<br />try<br />{<br />request = new XMLHttpRequest(); /* e.g. Firefox */<br />}<br />catch(err1)<br />{<br />try<br />{<br />vrequest = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */<br />}<br />catch(err2)<br />{<br />try<br />{<br />request = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */<br />}<br />catch(err3)<br />{<br />request = false;<br />}<br />}<br />}<br />return request;<br />}<br /><br />2. Using Browser Detection<br /><br />function getXMLHTTPRequest()<br />{<br />var request = false;<br />if(window.XMLHTTPRequest)<br />{<br />request = new XMLHTTPRequest();<br />} else {<br />if(window.ActiveXObject)<br />{<br />try<br />{<br />request = new ActiveXObject("Msml2.XMLHTTP");<br />}<br />catch(err1)<br />{<br />try<br />{<br />request = new ActiveXObject("Microsoft.XMLHTTP");<br />}<br />catch(err2)<br />{<br />request = false;<br />}<br />}<br />}<br />}<br />return request;<br />}Pankaj Dehariahttp://www.blogger.com/profile/11452457893239880269noreply@blogger.com0tag:blogger.com,1999:blog-1706571885516606029.post-21316566143580366082009-05-11T10:07:00.000-07:002009-05-11T10:18:16.664-07:00Black boxes vs. White boxes AjaxWhen most people use a microwave oven, they have no idea how it<br />actually works. They only know that if they put food in and turn the oven<br />on, the food will get hot in a few minutes. By contrast, a toaster is fairly<br />easy to understand. When you’re using a toaster, you can just look inside<br />the slots to see the elements getting hot and toasting the bread.<br />A traditional Web application is like a microwave oven. Most users<br />don’t know how Web applications work and don’t even care to know how<br />they work. Furthermore, most users have no way to find out how a given<br />application works even if they did care. Beyond the fundamentals, such<br />as use of HTTP as a request protocol, there is no guaranteed way to<br />determine the inner workings of a Web site. By contrast, an Ajax Web<br />application is more like a toaster. While the average user may not be<br />aware that the logic of the Ajax application is more exposed than that of<br />the standard Web page, it is a simple matter for an advanced user (or an<br />attacker) to “look inside the toaster slots” and gain knowledge about the<br />internal workings of the application.<br /><br />Black boxes vs. White boxes<br /><br />Web applications (and microwave ovens) are examples of “black box”<br />systems. From the user’s perspective, input goes into the system, and<br />then output comes out of the system. The application logic that processes<br />the input and returns the output is abstracted from the user and is<br />invisible to him.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJgdlbYHnwlDl7pqwr-gZPp4xH6kbymqR4IiA8RZQ1UgP1R3thnqGvT4IsHogZQ8PI-jJr4UhUEY4OczzbLe2RjG_XBHdYhc6_pPjFJo4uXuhzm9pGEBANl6bLq_wmxiSDGDnQLq1MmUrW/s1600-h/figure1.bmp"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 175px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJgdlbYHnwlDl7pqwr-gZPp4xH6kbymqR4IiA8RZQ1UgP1R3thnqGvT4IsHogZQ8PI-jJr4UhUEY4OczzbLe2RjG_XBHdYhc6_pPjFJo4uXuhzm9pGEBANl6bLq_wmxiSDGDnQLq1MmUrW/s400/figure1.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5334615273426519330" /></a><br />The inner workings of a black box system are unknown to the user<br />For example, consider a weather forecast Web site. A user enters his<br />ZIP code into the application, and the application then tells him if the<br />forecast calls for rain or sun. But how did the application gather that data?<br />It may be that the application performs real-time analysis of current<br />weather radar readings, or it may be that every morning a programmer<br />watches the local television forecast and copies that into the system.<br />Since the end user does not have access to the source code of the<br />application, there is really no way for him to know.<br />Security Note<br />There are in fact some situations in which an end user<br />may be able to obtain the application’s source code.<br />These situations mostly arise from improper<br />configuration of the Web server or insecure source code<br />control techniques, such as storing backup files on<br />production systems. Please review Chapter 3 for more<br />information on these types of vulnerabilities.<br />“White box” systems behave in the opposite manner. Input goes into<br />the system and output comes out of the system as before, but in this case<br />the internal mechanisms (in the form of source code) are visible to the<br />user.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYzvhDIA5h6uHlWVee6ovEb_dsMU9Ou2ZsLSKxB7C_Vz_Nver2YiVDFHMvcAYyTOhouY9V7Dp-J3YhvQYA4IEaUaPh_A28bHrOBEUuwePqsbatDqZgf3EkwbPaK4Vg4TzHF3YdqW1cBfbA/s1600-h/figure2.bmp"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 400px; height: 179px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYzvhDIA5h6uHlWVee6ovEb_dsMU9Ou2ZsLSKxB7C_Vz_Nver2YiVDFHMvcAYyTOhouY9V7Dp-J3YhvQYA4IEaUaPh_A28bHrOBEUuwePqsbatDqZgf3EkwbPaK4Vg4TzHF3YdqW1cBfbA/s400/figure2.bmp" border="0" alt=""id="BLOGGER_PHOTO_ID_5334615270987205362" /></a><br />The user can see the inner workings of a white box system<br />Any interpreted script-based application, such as a batch file, macro,<br />or (more to the point) a JavaScript application, can be considered a white<br />box system. As we discussed in the previous chapter, JavaScript must be<br />sent from the server to the client in its original, unencrypted source code<br />form. It is a simple matter for a user to open this source code and see<br />exactly what the application is doing.<br />It is true that Ajax applications are not completely white box systems since there is still a<br />large portion of the application that executes on the server. However, they are much<br />more transparent than traditional Web applications, and this transparency provides<br />opportunities for hackers, as we will demonstrate over the course of the chapter.<br />It is possible to obfuscate JavaScript, but this is different than<br />encryption. Encrypted code is impossible to read until the correct key is<br />used to decrypt it, at which point it is readable by anyone. Encrypted code<br />cannot be executed until it is decrypted. On the other hand, obfuscated<br />code is still executable as-is. All the obfuscation process accomplishes is<br />to make the code more difficult to read by a human. The key phrases<br />here are that obfuscation makes code “more difficult” for a human to read,<br />while encryption makes it “impossible”, or at least virtually impossible.<br />Someone with enough time and patience could still reverse-engineer the<br />obfuscated code. As we saw in Chapter 2, Eve created a program to deobfuscate<br />JavaScript. In actuality, the authors created this tool, and it only<br />took a few days. For this reason, obfuscation should be considered more<br />of a speed bump than a roadblock for a hacker: it may slow a determined<br />attacker down but it will not stop him.<br />In general, white box systems are easier to attack than black box<br />systems because their source code is more transparent. Remember that<br />attackers thrive on information. A large percentage of the time that a<br />hacker spends attacking a Web site is not actually spent sending<br />malicious requests, but rather analyzing it to determine how it works. If<br />the application freely provides details of its implementation, this task is<br />greatly simplified. Let’s continue the weather forecasting Web site<br />example and evaluate it from an application logic transparency point of<br />view.Pankaj Dehariahttp://www.blogger.com/profile/11452457893239880269noreply@blogger.com0tag:blogger.com,1999:blog-1706571885516606029.post-23424713540044557352009-04-13T11:44:00.000-07:002009-04-14T00:13:23.563-07:00AJAX ToolKit Confirm Button<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dyy5P6M_VmKK9INRe0PPcbBQAoCqBpdWB7Gf8sfrDVZcv8a7Eq6dQdvvjqbpaP2CcvtvDG_NdZr1M_FJjIHdw' class='b-hbp-video b-uploaded' frameborder='0'></iframe>Pankaj Dehariahttp://www.blogger.com/profile/11452457893239880269noreply@blogger.com0