geekandpirate
Welcome to my blog. GeekAndPirate is all about the web programming tricks,tools and techniques that I will be sharing with you. I will be also sharing all the tricks and techniques of hacking stuff(yeah that's true!!) I would be also interested in talking about the latest developments about the world of the WEB. So stick with me!
Best Practices for Speeding Up Your Web Site
Posted by on December 17, 2012
What makes a website good? Is that looks and presentation created by combination of some cool CSS and images? Or is it it’s pure functionality, what features it provides, it’s user friendliness, never mind the looks? Well, for some people, looks matters while other prefers it’s functionality. But in reality, a web developer really has to balance these things while creating web application, if he is expecting something out of it.
But having said that, many web developers ignores the speed which is a really crucial factor for judging the site’s popularity. They are too busy improving looks and functionality, that they simply overlook this important aspect. This aspect of speed is really crucial for the professional, business oriented site as the investors want to monetize their investments as much as possible, while a bad speed means potential loss of business. Many developers think that speed is not an important aspects nowadays due to faster network connections. This is however not true, coz as the bandwidth of the network is increasing, the site are more and more taking advantage of it and acting as a data hub. Ten years back, we were using dial up connections with the bandwidth of few bytes or kbs at the most, and the sites at that time were suitable to adopt that connection. We now have broadband/wireless connections having speeds in several Mbs. So now we have more data fetching site like youtube. So in short, one can not depend on the newtwork.
So what makes a site run ‘slower’? Or in other words, what one should do to make the site run ‘faster’? Well, it involves several factors. It involves both client and server side optimization.
Let’s see some of the best practices web developer must follow to improve the speed of the site.
HTTP Request –
According to report by some experts, 80% of the end user response time is spent on the front end, downloading components of web page like style sheets, javascript files, images, flash, frames etc. naturally, reducing the number of these components will make the page load fast. A developer can achieve this by avoiding loading unnecessary files. Many developers don’t take proper care while using these components. There several ways to achieve this-
Combine files – Combine all script files into single script where ever possible. This will result in fewer HTTP request.
CSS Sprites – Combine your background image into single image and use the CSS background-image and background-position properties to load the desired image
This is a very important factor in site’s speed. If you are able to reduce the number of HTTP request, you have almost won the battle.
Adding Cache Control header or Expiry –
If site is having some static elements which will eventually last forever, you can set far future Expires header. In this case, browser will cache that element and if the page is visited again, that element will be loaded from the browser cache rather than making a request to the server
If site contains some dynamic content, you can use appropriate Cache-Control header.
keep in mind that, if you decided to change the element, use different file name which will force the browser to make a http request for that rather than loading it from the cache. If same name is used, it will be loaded from cache and user will see old(and outdated) element.
Gzip –
Very few developer knows about Gzip. It is a compression method to reduct the size of the HTTP request. Client (browser) initiates request with following header –
Accept-Encoding: gzip, deflate
When server encounters this header, it compresses the response with gzip compression method. It reduces the size of the http response making it faster to travel across the network. it response with following –
Content-Encoding: gzip
Using CSS at the top –
Putting stylesheet at the top makes a page load progressively generating a good user experience. Html specification suggest that stylesheets are to be included in the <head> section. If it is placed at the bottom, user will see a white page for longer time, especially on the slower conenction, generating a bad user experience.
Load scripts Asynchronously –
According to specifications, a browser can’t download more than two elements of the page from the same domain. However, in case of scripts, it can download only one at a time. So a while a script is loading, it halts downloading of the remaining components of web page until it finishes, resulting in bad user experience. Loading scrips asynchronously make the parallel download possible, that is page does not waits for the script to get finish, but keeps on downloading the other components.
External javascript and CSS –
One should use the external javascript and css rather than using inline js and css. The benefit of using this is that browser caches js and css files, so subsequent loading of the page will improve the performance since those files come from cache rather than from server, while inline css and js does not posses this benefit.
Minify javascript and CSS –
Minification is a process of removing unnecessary code from the file. It also includes removing unneeded characters, spaces, new lines, tabs and comments. This significantly reduces the size of the file resulting in reduce load time for that file
Remove Duplicate Scripts –
If proper care is not taken, there is a chance of loading the same script twice. This will not only cause an extra HTTP request, but also takes additional time to evaluate the script. This happens mainly when developer has spited the document into multiple section, the file may be accidentally duplicated on multiple places
Split Components Across Domains –
Splitting components across domains allows you to maximize parallel download possible. We can have static contains of the site like banner image, css etc reside on different domains which results in faster downloads
No HTML Image scaling–
Don’t use width and height attribute of the html <img> tag. If you are having a div of size 200 * 200, then use image of that size rather than using a bigger version of that image, for eg. 500 * 500 and scaling down that to 200 * 200. It will make page load slower.
Avoid image tag with empty src attribute –
Avoid image tag with empty src attribute, since browser will anyway request the server for the image. It will not only slow down the page response time, but will also increase the server computation time to process that request.
Use CDN –
Use Content Delivery Network(CDN) to split your content across servers spread across various geographical locations. The location of a user from server affects the speed of the site. Proximity to a server means improved speed from user’s perspective.
Comet — http streaming
Posted by on December 17, 2012
I really like Gmail. In fact, I LOVE it, and I am pretty sure you too. It is simple, slick, elegant yet powerful and rich with functionality. Many of us rely on gmail for our daily business tasks.
So what’s special about gmail? It’s easy to use interface, slick design, and highly customizable options, with chat integrated right into your account…the list goes on. And the question for the geeks and tech savvy: what’s so special about gmail in web technology point of view? AJAX? JSON? Hammm…well, I won’t say you are wrong…but those are somewhat old terms now a days, and to be frank you don’t have to be an expert to know these, a high school graduate will tell you about what AJAX means, there states , response codes, how JSON is more powerful than ajax, blah blah…
So what’s the big deal? Ain’t Gmail using AJAX? Well yes….it is using ajax, but in somewhat different way. Let me give an example. You have opened your inbox, done with all your emails (read / reply/ delete/ marked as read or very less likely marked it as spam), so that you don’t have any unread mail in your inbox. You confirm this by hitting ‘refresh’ link in your inbox, which sends a request to the server to check whether there is any new mails waiting for you. This is AJAX request which client (that is your browser) initiates, which is then sent to the server, server will respond accordingly, client then will render the result by manipulating DOM, and you will see new messages in inbox if any.
But you may have also observed that sometimes the mail automatically gets pushed up in your account without you refreshing your inbox. So what’s the mechanism behind this? Did your client (browser) automatically sent the request in the background without your knowledge? Is there continues javascript running in the background with setTimeout function which executes the function periodically which makes an ajax call to the server? This is a classic behavior which can be observed in many web application. But this may cause a problem if your application window is kept open for long time with javascript execute in the background, your browser may get crashed.
Back to our question, if that was not client making periodic calls to the server in the background, then what was it?? Well, thats what HTTP STREAMING is all about, and you are using it being not aware of it! So what it is all about?
This HTTP Streaming is referred by many terms, Comet, Ajax Push, Reverse Ajax, Two Way Web, HTTP Serve Push…. So what is the basic difference with HTTP streaming and AJAX? I will just repeat briefly how AJAX works. In AJAX, client initiates a communication with server with XmlHttpRequest object to the server, server processes the request and sends the response in the format of XML, JSON or Simple HTML. Browser reads this response and manipulate the DOM, and then connection is closed. For getting the updated information, client has to re-initiate the request to the server.
But HTTP streaming (Comet) is somewhat different. It has following lifecycle-
1) Client initiates the connection with server. This can be achieve with many techniques like Hidden IFRAME, XmlHttpRequest object etc
2) Server processes the request and sends the data back to the server. But in this case, it does not closes the connection, but keeps it open and listens for any new event . If there is any new data available, it then ‘pushes’ the data back to the client. So the data is pushed back to the client as and when available, and this is called as ‘Long Polling’. This is in short a ‘Push’ technology where the publisher of the information (that is client) pushes the data, whereas, the traditional AJAX call is called as ‘Pull’ technology where client initiates the connection for getting specific data.
Comet like applications offer real time interaction by replying on a persistent HTTP connection, which acts like a stream of data between client and server, hence it is called as HTTP Streaming. This method is really useful for the modern web application where real time interaction is very vital, consider an example of share trading web application, where it is very crucial to display the share price in real time, so that a user of that application can decide to buy/sell that share accordingly.
Let’s take a simple server side example for implementing this technology. Consider the share trading app. When a request is made from the client to the server, it first process the request and then flushes the price for that share to the browser. But neither side closes the connection (client and server) and server listens for another event, in this case, change in share price. The server code will somewhat look like this:
<?
$share_price = get_share_price();
echo $share_price;while(true)
{
if($change_in_share_price)
{
$share_price = get_share_price();
?>
<script>document.getElementById(‘price’).innerHTML = ‘<?php echo $share_price?>’;</script>
<?
flush();
}
sleep(2);}
?>
The <script> tag will make the browser render the share price. It then listens for change in share price in a never ending loop, and the response will be sent to the browser as and when there is a change, creating a real time system where changes are immediately communicated to the browser.
Comet like functionality can also be observed in the social networking sites like facebook where user’s wall get updated as and when any new feed is published by the server.
As web is evolving, we may see many cool and real time web applications like Gmail using comet like technologies in near future!
Cross Site Request Forgery
Posted by on December 17, 2012
I have many people from various domain in my friend circle like doctors, architects, businessmen etc. Many of them rely heavily on the internet. Naturally, they are not much aware of the potential threats on the internet. Like them, many people don’t take basic precautions like, logging out after you finish, using latest and more secured browsers, etc. Sometimes, you have to face the consequences for this lack of knowledge. Sometimes, it is not the user’s fault at all, but the developers of the website make the site vulnerable by not following good programming practice and not implementing adequate security measures, and their users has to pay for this.
At one weekend when I was hanging out with my friends, one of them told me about the incident which took place while he was performing some online transactions. He said that while he was online and was doing some transactions with his bank account, someone got unauthorized access of his account and transferred the money from his account. Luckily for him, the amount was not much, but he is now reluctant to make any online transaction.
I decided to hunt down this incident. There was no question of him giving his account details knowingly or unknowingly as he said that he doesn’t kept the password anywhere but in his brain (:)) Neither did he got phished by clicking on any unknown link which displays the site similar to the bank’s site. I asked about him what else you were browsing while you were doing those online transactions. He said that he was exploring various demand and supply forums where you make a wish for any particular video/music/software which gets fulfilled by other members of that forum.
I decided to take a look at those sites and I quickly realized that those forums by not only occupied by music and video lovers, but also by many crackers. I specially had a look at the threads visited by my friend, and I found what I was suspecting. My friend was a victim of what is called as ‘Cross Site Request Forgery’ aka (CSRF OR XSRF).
CSRF is an attack which is initiated by some user against a website. A web site in this case ‘trust’ the user which is exploited by passing some unauthorized commands while in another type of attack Cross site scripting (XSS), a user trust the site. In CSRF attacks, unauthorized users exploits the site vulnerability to get access to authorized user’s data, by passing out some commands. In this case, the authorized user is already ‘authenticated’ by the site, and it may have stored authentication info in some session cookie. Unauthorized user use this cookie to fire some unauthorized commands. Let’s see what may have happened in my friend’s case.
I viewed the html code of the forum visited by my friend, I saw in one reply, posted by some Mr. XX one html iframe tag as <iframe src=”http://xyz.com/transfer.php” width=’1′ height=’1′>
I was able to track transfer.php, and saw following code
<form name=’frm1′ action=’https://bankdomain.com/transfer’ method=’post’>
<input type=’hidden’ name=’toname’ value=’andh12′>
<input type=’hidden’ name=’amt’ value=’100′>
</form><script>
document.frm1.submit();
</script>
So this was it! Lets see step by step what Mr.xx is upto here. First, he loaded an iframe with html iframe tag which is a page on his domain. On that page, he have used a form with hidden elements with exactly the same name as in the bank’s amount transfer form (like toname and amt). Next, he is submitting the form in javascript with action as transfer page on bank’s domain. Now since my friend was logged into his bank account, that site was keeping his authentication information in a cookie. Now since that cookie was not expired, the browser sent the cookie along with the post data to the action url. Bank treated it as legitimate requests since it has not implemented proper security to tackle this kind of intrusion. So Mr. xx got unauthorized access of user authentication cookie and hence was able to fire unauthorized commands. Imported thing here is to note that my friend’s browser had no way to know whether request it is making on behalf on my friend is legitimate or not. This attack is also called as ‘Confused deputy attack’ where browser acted as deputy.
CSRF attacks has following characteristics
– They are made against an authenticated users exploiting site’s trust on that user
– It tricks the web browser of a user and force them to send unauthorized HTTP request
– User and browser both are tricked by in proper implementation of security measures by web application which involves authentication and authorization of user
Prevention –
Normal user can do very little to prevent this kind of attacks. All they can do is to avoid visiting such malicious websites, forums, and avoiding clicking on links in spam mails. Web applications are more responsible to prevent such type of attacks which can be achieved by-
– Checking the HTTP referrer header. Web app can check whether the referrer is the one it should be.
– Limiting lifetime of authentication cookies.
– Generating a user specific secret token, which the client(browser) needs to be sent with each HTTP request.
– By logging user out automatically if inactive for specific time
There are certain conditions though which must be fulfilled by the attacker in order to carry out this attack
– The attacker must force the victim to a webpage containing the malicious code while the victim is logged in.
– Attacker must identify the form submission url, and pass the exact values to those forms.
– If the site is checking for the HTTP referrer, then attacker must spoof the http referrer header.
So moral of the story is that, as a normal user you should be careful while surfing on the internet. If you are accessing some sensitive sites like bank, use a septate browser for it, and use another browser for rest of the sites. Always log off when you are done. While, if you are a web developer, you should implement the security mechanisms to counter these attacks.
missing ) in parenthetical
Posted by on December 11, 2010
Today, while working on one of my project, I got this javascript error .
missing ) in parenthetical
This error comes due to incorrectly formatted json string.
I was trying out an ajax based image upload jquery based lib. I was using json as a response type from my server. I also noted that this error was coming while uploading only one specific image, the rest of images were working quite nicely.
I was quite confused about this error and was wondering what is wrong with this specific image. What I found out is that the image was corrupted, so my server (php) script was throwing some php errors. As I was using json as my response type, it was not properly formatting the json response, creating some invalid json string, which in return was causing error on client side (js) .
My solution was to remove any php error so that json will be formated properly. My solution was like
if($error_while_uploading){ob_clean();$data = array( “status” => “error”);echo json_encode($data);}
The php ob_clean() function cleans the output buffer. So any potential php error which might have occurred during file resizing will get clean out and the json format will remain valid and intact.
So remember. If you see this missing ) in parenthetical error in your firebug, this is due to you got some badly formatted json string!
Hello world!
Posted by on December 11, 2010
Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!
geekandpirate 