Running Multiple OpenERP Server on proxy on different port.

Create two proxy configuration as follow in user defined file like here i have created web-client61

<VirtualHost *:80>
    ServerName webclient6
    ServerAdmin webmaster@localhost
    LimitRequestLine 16384

    <Proxy *>
        Order deny,allow
        Allow from all
    </Proxy>

    ProxyRequests Off
    ProxyPass / http://127.0.0.1:8069/
    ProxyPassReverse / http://127.0.0.1:8069/
    SetEnv proxy-nokeepalive 1
    ErrorLog /var/log/apache2/webclient-error.log
    CustomLog /var/log/apache2/webclient-access.log combined
</VirtualHost>

<VirtualHost *:80>
    ServerName webclient67
    ServerAdmin webmaster@localhost
    LimitRequestLine 16384

    <Proxy *>
        Order deny,allow
        Allow from all
    </Proxy>

    ProxyRequests Off
    ProxyPass / http://127.0.0.1:8000/
    ProxyPassReverse / http://127.0.0.1:8000/
    SetEnv proxy-nokeepalive 1
    ErrorLog /var/log/apache2/webclient-error.log
    CustomLog /var/log/apache2/webclient-access.log combined
</VirtualHost>

Now add this two server name as a domain in /etc/hosts
Your IP domain(webclient1)

Now enable this webclient61 file for apache using following command.

sudo a2ensite webclient61

The above command will enable the file webclient61, hence the configuration will be available to apache.

Now restart the apache with init.d and run your two servers on different port, and run the URL web-client1 and web-client2, this way you can access two different OpenERP server in same browser's two different tab.

Purpose of doing this.

If you run two server on different port and login with your webclient localhost:8069 so automatically you will be loggedin to localhost:8000 because the session id for domain localhost is already set in cookies, so when your just type localhost:8000 in which you still not logged, so you will be redirected to home page because when you send a request for localhost:8000 so browser will look up in cookies for domain localhost browser never take port into account, so it will find session_id in cookies for the domain localhost and will show you logged in.

Yes we can set cookies for specific patch using set_cookies path, but  in web-client when we send a request from localhost:8000 so it's request path will be "/" so the cookies are set for the path "/"

So I did't found any other way to fix this but using proxy we can have an alternative way to use two server on different port with different domain name, so for two different domain two different cookies are set.

For further information about cookies see the post 

http://mishekha.blogspot.in/2012/07/cookies.html

And for Apache reverse proxy for OpenERP see the post http://mishekha.blogspot.in/2011/11/connect-openerp-using-reverseproxy.html

Thanks & Regards,

Mohammed Shekha.

Cookies

History

The term "cookie" was derived from "magic cookie", which is the packet of data a program receives and sends again unchanged. Magic cookies were already used in computing when computer programmer Lou Montulli had the idea of using them in Web communications in June 1994.^[6] At the time, he was an employee of Netscape Communications, which was developing an e-commerce application for a customer. The customer was MCI and the application was the "MCI Mall". Vint Cerf and John Klensin represented MCI in technical discussions with Netscape Communications. Not wanting the MCI Mall servers to have to retain partial transaction states led to our request to Netscape to find a way to store that state in each user's computer. Cookies provided a solution to the problem of reliably implementing a virtual shopping cart.^[7][8]
Together with John Giannandrea, Montulli wrote the initial Netscape cookie specification the same year. Version 0.9beta of Mosaic Netscape, released on October 13, 1994,^[9][10] supported cookies. The first use of cookies (out of the labs) was checking whether visitors to the Netscape website had already visited the site. Montulli applied for a patent for the cookie technology in 1995, and US 5774670 was granted in 1998. Support for cookies was integrated in Internet Explorer in version 2, released in October 1995.^[11]
The introduction of cookies was not widely known to the public at the time. In particular, cookies were accepted by default, and users were not notified of the presence of cookies. The general public learned about them after the Financial Times published an article about them on February 12, 1996^{[citation needed]}. In the same year, cookies received a lot of media attention, especially because of potential privacy implications. Cookies were discussed in two U.S. Federal Trade Commission hearings in 1996 and 1997.
The development of the formal cookie specifications was already ongoing. In particular, the first discussions about a formal specification started in April 1995 on the www-talk mailing list. A special working group within the IETF was formed. Two alternative proposals for introducing state in HTTP transactions had been proposed by Brian Behlendorf and David Kristol respectively, but the group, headed by Kristol himself and Aron Afatsuom, soon decided to use the Netscape specification as a starting point. In February 1996, the working group identified third-party cookies as a considerable privacy threat. The specification produced by the group was eventually published as RFC 2109 in February 1997. It specifies that third-party cookies were either not allowed at all, or at least not enabled by default.
At this time, advertising companies were already using third-party cookies. The recommendation about third-party cookies of RFC 2109 was not followed by Netscape and Internet Explorer. RFC 2109 was superseded by RFC 2965 in October 2000.
A definitive specification for cookies as used in the real world was published as RFC 6265 in April 2011.

Terminologies

Session cookie

A session cookie^[12] only lasts for the duration of users using the website. A web browser normally deletes session cookies when it quits. A session cookie is created when no Expires directive is provided at cookie creation time.

Persistent cookie

A persistent cookie^[12] will outlast user sessions. If a persistent cookie has its Max-Age set to 1 year, then, within the year, the initial value set in that cookie would be sent back to the server every time the user visited the server. This could be used to record a vital piece of information such as how the user initially came to this website. For this reason persistent cookies are also called tracking cookies.

Secure cookie

A secure cookie has the secure attribute enabled and is only used via HTTPS, ensuring that the cookie is always encrypted when transmitting from client to server. This makes the cookie less likely to be exposed to cookie theft via eavesdropping.

HttpOnly cookie

The HttpOnly cookie is supported by most modern browsers.^[13][14] On a supported browser, an HttpOnly session cookie will be used only when transmitting HTTP (or HTTPS) requests, thus restricting access from other, non-HTTP APIs (such as JavaScript). This restriction mitigates but does not eliminate the threat of session cookie theft via cross-site scripting (XSS).^[15] This feature applies only to session-management cookies, and not other browser cookies.

Third-party cookie

First-party cookies are cookies set with the same domain (or its subdomain) in your browser's address bar. Third-party cookies are cookies being set with different domains from the one shown on the address bar (i.e. the web pages on that domain may feature content from a third-party domain - e.g. an advertisement run by www.advexample.com showing advert banners). (Privacy setting options in most modern browsers allow you to block third-party tracking cookies).
For example: Suppose a user visits www.example1.com, which sets a cookie with the domain ad.foxytracking.com. When the user later visits www.example2.com, another cookie is set with the domain ad.foxytracking.com. Eventually, both of these cookies will be sent to the advertiser when loading their ads or visiting their website. The advertiser can then use these cookies to build up a browsing history of the user across all the websites this advertiser has footprints on.

Supercookie

A "supercookie" is a cookie with a public suffix domain, like .com, .co.uk or k12.ca.us.^[16]
Most browsers, by default, allow first-party cookies—a cookie with domain to be the same or sub-domain of the requesting host. For example, a user visiting www.example.com can have a cookie set with domain www.example.com or .example.com, but not .com.^[17] A supercookie with domain .com would be blocked by browsers; otherwise, a malicious website, like attacker.com, could set a supercookie with domain .com and potentially disrupt or impersonate legitimate user requests to example.com. The Public Suffix List is a cross-vendor initiative to provide an accurate list of domain name suffixes changing.^[18] Older versions of browsers may not have the most up-to-date list, and will therefore be vulnerable to certain supercookies.
The term "supercookies" is sometimes used for tracking technologies that do not rely on HTTP cookies. Two such "supercookie" mechanisms were found on Microsoft websites: cookie syncing that respawned MUID cookies, and ETag cookies.^[19] Due to media attention, Microsoft later disabled this code:

In response to recent attention on "supercookies" in the media, we wanted to share more detail on the immediate action we took to address this issue, as well as affirm our commitment to the privacy of our customers. According to researchers, including Jonathan Mayer at Stanford University, "supercookies" are capable of re-creating users' cookies or other identifiers after people deleted regular cookies. Mr. Mayer identified Microsoft as one among others that had this code, and when he brought his findings to our attention we promptly investigated. We determined that the cookie behavior he observed was occurring under certain circumstances as a result of older code that was used only on our own sites, and was already scheduled to be discontinued. We accelerated this process and quickly disabled this code. At no time did this functionality cause Microsoft cookie identifiers or data associated with those identifiers to be shared outside of Microsoft.

—Mike Hintze^[20]

Zombie cookie

Main article: Zombie cookie

A zombie cookie is any cookie that is automatically recreated after a user has deleted it. This is accomplished by a script storing the content of the cookie in some other locations, such as the local storage available to Flash content, HTML5 storages and other client side mechanisms, and then recreating the cookie from backup stores when the cookie's absence is detected.

Uses

Session management

Cookies may be used to maintain data related to the user during navigation, possibly across multiple visits. Cookies were introduced to provide a way to implement a "shopping cart" (or "shopping basket"),^[7][8] a virtual device into which users can store items they want to purchase as they navigate throughout the site.
Shopping basket applications today usually store the list of basket contents in a database on the server side, rather than storing basket items in the cookie itself. A web server typically sends a cookie containing a unique session identifier. The web browser will send back that session identifier with each subsequent request and shopping basket items are stored associated with a unique session identifier.
Allowing users to log in to a website is a frequent use of cookies. Typically the web server will first send a cookie containing a unique session identifier. Users then submit their credentials and the web application authenticates the session and allows the user access to services.

Personalization

Cookies may be used to remember the information about the user who has visited a website in order to show relevant content in the future. For example a web server may send a cookie containing the username last used to log in to a website so that it may be filled in for future visits.
Many websites use cookies for personalization based on users' preferences. Users select their preferences by entering them in a web form and submitting the form to the server. The server encodes the preferences in a cookie and sends the cookie back to the browser. This way, every time the user accesses a page, the server is also sent the cookie where the preferences are stored, and can personalize the page according to the user preferences. For example, the Wikipedia website allows authenticated users to choose the webpage skin they like best; the Google search engine once allowed users (even non-registered ones) to decide how many search results per page they want to see.

Tracking

Tracking cookies may be used to track internet users' web browsing. This can also be done in part by using the IP address of the computer requesting the page or the referrer field of the HTTP request header, but cookies allow for greater precision. This can be demonstrated as follows:

1. If the user requests a page of the site, but the request contains no cookie, the server presumes that this is the first page visited by the user; the server creates a random string and sends it as a cookie back to the browser together with the requested page;
2. From this point on, the cookie will be automatically sent by the browser to the server every time a new page from the site is requested; the server sends the page as usual, but also stores the URL of the requested page, the date/time of the request, and the cookie in a log file.

By analyzing the log file collected in the process, it is then possible to find out which pages the user has visited, and in what sequence.

Implementation

Cookies are arbitrary pieces of data chosen by the Web server and sent to the browser. The browser returns them unchanged to the server, introducing a state (memory of previous events) into otherwise stateless HTTP transactions. Without cookies, each retrieval of a Web page or component of a Web page is an isolated event, mostly unrelated to all other views of the pages of the same site. Other than being set by a web server, cookies can also be set by a script in a language such as JavaScript, if supported and enabled by the Web browser.
Cookie specifications^[14][21][22] suggest that browsers should be able to save and send back a minimal number of cookies. In particular, a web browser is expected to be able to store at least 300 cookies of four kilobytes each, and at least 20 cookies per server or domain.

Setting a cookie

Transfer of Web pages follows the HyperText Transfer Protocol (HTTP). Regardless of cookies, browsers request a page from web servers by sending them a usually short text called HTTP request. For example, to access the page http://www.example.org/index.html, browsers connect to the server www.example.org sending it a request that looks like the following one:

 The server replies by sending the requested page preceded by a similar packet of text, called 'HTTP response'. This packet may contain lines requesting the browser to store cookies:

 The server sends lines of Set-Cookie only if the server wishes the browser to store cookies. Set-Cookie is a directive for the browser to store the cookie and send it back in future requests to the server (subject to expiration time or other cookie attributes), if the browser supports cookies and cookies are enabled. For example, the browser requests the page http://www.example.org/spec.html by sending the server www.example.org a request like the following:

This is a request for another page from the same server, and differs from the first one above because it contains the string that the server has previously sent to the browser. This way, the server knows that this request is related to the previous one. The server answers by sending the requested page, possibly adding other cookies as well.
The value of a cookie can be modified by the server by sending a new Set-Cookie: name=newvalue line in response of a page request. The browser then replaces the old value with the new one.
The term "cookie crumb" is sometimes used to refer to the name-value pair.^[23] This is not the same as breadcrumb web navigation, which is the technique of showing in each page the list of pages the user has previously visited; this technique, however, may be implemented using cookies.
Cookies can also be set by JavaScript or similar scripts running within the browser. In JavaScript, the object document.cookie is used for this purpose. For example, the instruction document.cookie = "temperature=20" creates a cookie of name temperature and value 20.^[24]

Cookie attributes

Besides the name–value pair, servers can also set these cookie attributes: a cookie domain, a path, expiration time or maximum age, Secure flag and HttpOnly flag. Browsers will not send cookie attributes back to the server. They will only send the cookie’s name-value pair. Cookie attributes are used by browsers to determine when to delete a cookie, block a cookie or whether to send a cookie (name-value pair) to the servers.

Domain and Path

The cookie domain and path define the scope of the cookie—they tell the browser that cookies should only be sent back to the server for the given domain and path. If not specified, they default to the domain and path of the object that was requested. An example of Set-Cookie directives from a website after a user logged in:

The first cookie LSID has default domain docs.foo.com and Path /accounts, which tells the browser to use the cookie only when requesting pages contained in docs.foo.com/accounts. The other 2 cookies HSID and SSID would be sent back by the browser while requesting any subdomain in .foo.com on any path, for example www.foo.com/.
Cookies can only be set on the top domain and its sub domains. Setting cookies on www.foo.com from www.bar.com will not work for security reasons.^[25]

Expires and Max-Age

The Expires directive tells the browser when to delete the cookie. It is specified in the form of “Wdy, DD Mon YYYY HH:MM:SS GMT”^[26], indicating the exact date/time this cookie will expire. As an alternative to setting cookie expiration as an absolute date/time, RFC 6265 allows the use of the Max-Age attribute to set the cookie’s expiration as an interval of seconds in the future, relative to the time the browser received the cookie. An example of Set-Cookie directives from a website after a user logged in:

The first cookie lu is set to expire sometime in 15-Jan-2013; it will be used by the client browser until that time. The second cookie made_write_conn does not have an expiration date, making it a session cookie. It will be deleted after the user closes his/her browser. The third cookie reg_fb_gate has its value changed to deleted, with an expiration time in the past. The browser will delete this cookie right away – note that cookie will only be deleted when the domain and path attributes in the Set-Cookie field match the values used when the cookie was created.

Secure and HttpOnly

The Secure and HttpOnly attributes do not have associated values. Rather, the presence of the attribute names indicates that the Secure and HttpOnly behaviors are specified.
The Secure attribute is meant to keep cookie communication limited to encrypted transmission, directing browsers to use cookies only via secure/encrypted connections. Naturally, web servers should set Secure cookies via secure/encrypted connections, lest the cookie information be transmitted in a way that allows eavesdropping when first sent to the web browser.
The HttpOnly attribute directs browsers to use cookies via the HTTP protocol only. (This includes HTTPS; HttpOnly is not the opposite of Secure.) An HttpOnly cookie is not accessible via non-HTTP methods, such as calls via JavaScript (e.g., referencing "document.cookie"), and therefore cannot be stolen easily via cross-site scripting (a pervasive attack technique^[27]). As shown in previous examples, both Facebook and Google use the HttpOnly attribute extensively.

Browser settings

Most modern browsers support cookies and allow the user to disable them. The following are common options:^[28]

1. To enable or disable cookies completely, so that they are always accepted or always blocked.
2. Some browsers incorporate a cookie manager for the user to see and selectively delete the cookies currently stored in the browser.
3. By default, Internet Explorer allows only third-party cookies that are accompanied by a P3P "CP" (Compact Policy) field.^[29]

Most browsers also allow a full wipe of private data including cookies. Add-on tools for managing cookie permissions also exist.

Privacy and third-party cookies

Cookies have some important implications on the privacy and anonymity of Web users. While cookies are sent only to the server setting them or the server in the same Internet domain, a Web page may contain images or other components stored on servers in other domains. Cookies that are set during retrieval of these components are called third-party cookies. The standards for cookies, RFC 2109 and RFC 2965, specify that browsers should protect user privacy and not allow third-party cookies by default. But most browsers, such as Mozilla Firefox, Internet Explorer, Opera and Google Chrome do allow third-party cookies by default, as long as the third-party website has Compact Privacy Policy published.

In this fictional example, an advertising company has placed banners in two websites. Hosting the banner images on its servers and using third-party cookies, the advertising company is able to track the browsing of users across these two sites.

Advertising companies use third-party cookies to track a user across multiple sites. In particular, an advertising company can track a user across all pages where it has placed advertising images or web bugs. Knowledge of the pages visited by a user allows the advertising company to target advertisements to the user's presumed preferences.
Website operators who do not disclose third-party cookie use to consumers run the risk of harming consumer trust if cookie use is discovered. Having clear disclosure (such as in a privacy policy) tends to eliminate any negative effects of such cookie discovery.^[34]
The possibility of building a profile of users is considered by some a potential privacy threat, especially when tracking is done across multiple domains using third-party cookies. For this reason, some countries have legislation about cookies.
The United States government has set strict rules on setting cookies in 2000 after it was disclosed that the White House drug policy office used cookies to track computer users viewing its online anti-drug advertising. In 2002, privacy activist Daniel Brandt found that the CIA had been leaving persistent cookies on computers which had visited its website. When notified it was violating policy, CIA stated that these cookies were not intentionally set and stopped setting them.^[35] On December 25, 2005, Brandt discovered that the National Security Agency (NSA) had been leaving two persistent cookies on visitors' computers due to a software upgrade. After being informed, the National Security Agency immediately disabled the cookies.^[36]
The 2002 European Union telecommunication privacy Directive contains rules about the use of cookies.^[37] In particular, Article 5, Paragraph 3 of this directive mandates that storing data (like cookies) in a user's computer can only be done if:

1. the user is provided information about how this data is used;
2. the user is given the possibility of denying this storing operation. However, this article also states that storing data that is necessary for technical reasons is exempted from this rule. This directive was expected to have been applied since October 2003, but a December 2004 report says (page 38) that this provision was not applied in practice, and that some member countries (Slovakia, Latvia, Greece, Belgium, and Luxembourg) did not even implement the provision in national law. The same report suggests a thorough analysis of the situation in the Member States.

The P3P specification includes the possibility for a server to state a privacy policy, which specifies which kind of information it collects and for which purpose. These policies include (but are not limited to) the use of information gathered using cookies. According to the P3P specification, a browser can accept or reject cookies by comparing the privacy policy with the stored user preferences or ask the user, presenting them the privacy policy as declared by the server.
Many web browsers including Apple's Safari and Microsoft Internet Explorer versions 6 and 7 support P3P which allows the web browser to determine whether to allow third-party cookies to be stored. The Opera web browser allows users to refuse third-party cookies and to create global and specific security profiles for Internet domains.^[38] Firefox 2.x dropped this option from its menu system but it restored it with the release of version 3.x.^[39]
Third-party cookies can be blocked by most browsers to increase privacy and reduce tracking by advertising and tracking companies without negatively affecting the user's Web experience.^[40] Many advertising operators have an opt-out option to behavioural advertising, with a generic cookie in the browser stopping behavioural advertising.

Cookie theft and session hijacking

Most websites use cookies as the only identifiers for user sessions, because other methods of identifying web users have limitations and vulnerabilities. If a website uses cookies as session identifiers, attackers can impersonate users’ requests by stealing a full set of victims’ cookies. From the web server's point of view, a request from an attacker has the same authentication as the victim’s requests; thus the request is performed on behalf of the victim’s session.
Listed here are various scenarios of cookie theft and user session hijacking (even without stealing user cookies) which work with websites which rely solely on HTTP cookies for user identification.

Network eavesdropping

A cookie can be stolen by another computer that is allowed reading from the network

Traffic on a network can be intercepted and read by computers on the network other than the sender and receiver (particularly over unencrypted open Wi-Fi). This traffic includes cookies sent on ordinary unencrypted HTTP sessions. Where network traffic is not encrypted, attackers can therefore read the communications of other users on the network, including HTTP cookies as well as the entire contents of the conversations.
An attacker could use intercepted cookies to impersonate a user and perform a malicious task, such as transferring money out of the victim’s bank account.
This issue can be resolved by securing the communication between the user's computer and the server by employing Transport Layer Security (HTTPS protocol) to encrypt the connection. A server can specify the Secure flag while setting a cookie, which will cause the browser to send the cookie only over an encrypted channel, such as an SSL connection.^[14]

Publishing false sub-domain – DNS cache poisoning

Via DNS cache poisoning, an attacker might be able to cause a DNS server to cache a fabricated DNS entry, say f12345.www.example.com with the attacker’s server IP address. The attacker can then post an image URL from his own server (for example, http://f12345.www.example.com/img_4_cookie.jpg). Victims reading the attacker’s message would download this image from f12345.www.example.com. Since f12345.www.example.com is a sub-domain of www.example.com, victims’ browsers would submit all example.com-related cookies to the attacker’s server; the compromised cookies would also include HttpOnly cookies.^{[clarification needed]}
This vulnerability is usually for Internet Service Providers to fix, by securing their DNS servers. But it can also be mitigated if www.example.com is using Secure cookies. Victims’ browsers will not submit Secure cookies if the attacker’s image is not using encrypted connections. If the attacker chose to use HTTPS for his img_4_cookie.jpg download, he would have the challenge^[42] of obtaining an SSL certificate for f12345.www.example.com from a Certificate Authority. Without a proper SSL certificate, victims’ browsers would display (usually very visible) warning messages about the invalid certificate, thus alerting victims as well as security officials from www.example.com.

Cross-site scripting – cookie theft

Scripting languages such as JavaScript and JScript are usually allowed to access cookie values and have some means to send arbitrary values to arbitrary servers on the Internet. These facts are used in combination with sites allowing users to post HTML content that other users can see.
As an example, an attacker may post a message on www.example.com with the following link:

When another user clicks on this link, the browser executes the piece of code within the onclick attribute, thus replacing the string document.cookie with the list of cookies of the user that are active for the page. As a result, this list of cookies is sent to the attacker.com server. If the attacker’s posting is on https://www.example.com/somewhere, secure cookies will also be sent to attacker.com in plain text.
Cross-site scripting is a constant threat, as there are always some crackers trying to find a way of slipping in script tags to websites. It is the responsibility of the website developers to filter out such malicious code.
In the meantime, such attacks can be mitigated by using HttpOnly cookies. These cookies will not be accessible by client side script, and therefore the attacker will not be able to gather these cookies.

Cross-site scripting

If an attacker was able to insert a piece of script to a page on www.example.com, and a victim’s browser was able to execute the script, the script could simply carry out the attack. This attack would use the victim’s browser to send HTTP requests to servers directly; therefore, the victim’s browser would submit all relevant cookies, including HttpOnly cookies, as well as Secure cookies if the script request is on HTTPS.
For example, on MySpace, Samy posted a short message “Samy is my hero” on his profile, with a hidden script to send Samy a “friend request” and then post the same message on the victim’s profile. A user reading Samy’s profile would send Samy a “friend request” and post the same message on this person’s profile. Then, the third person reading the second person’s profile would do the same. Pretty soon, this Samy worm became one of the fastest spreading worms of all time.
This type of attack (with automated scripts) would not work if a website had CAPTCHA to challenge client requests.

Cross-site scripting – proxy request

In older versions of browsers, there were security holes allowing attackers to script a proxy request by using XMLHttpRequest. For example, a victim is reading an attacker’s posting on www.example.com, and the attacker’s script is executed in the victim’s browser. The script generates a request to www.example.com with the proxy server attacker.com. Since the request is for www.example.com, all example.com cookies will be sent along with the request, but routed through the attacker’s proxy server, hence, the attacker can harvest the victim’s cookies.
This attack would not work for Secure cookie, since Secure cookies go with HTTPS connections, and its protocol dictates end-to-end encryption, i.e., the information is encrypted on the user’s browser and decrypted on the destination server www.example.com, so the proxy servers would only see encrypted bits and bytes.

Cross-site request forgery

Main article: Cross-site request forgery

For example, Bob might be browsing a chat forum where another user, Mallory, has posted a message. Suppose that Mallory has crafted an HTML image element that references an action on Bob's bank's website (rather than an image file), e.g.,

If Bob's bank keeps his authentication information in a cookie, and if the cookie hasn't expired, then the attempt by Bob's browser to load the image will submit the withdrawal form with his cookie, thus authorizing a transaction without Bob's approval.

Drawbacks of cookies

Besides privacy concerns, cookies also have some technical drawbacks. In particular, they do not always accurately identify users, they can be used for security attacks, and they are often at odds with the Representational State Transfer (REST) software architectural style.^[43][44]

Inaccurate identification

If more than one browser is used on a computer, each usually has a separate storage area for cookies. Hence cookies do not identify a person, but a combination of a user account, a computer, and a Web browser. Thus, anyone who uses multiple accounts, computers, or browsers has multiple sets of cookies.
Likewise, cookies do not differentiate between multiple users who share the same user account, computer, and browser.

Inconsistent state on client and server

The use of cookies may generate an inconsistency between the state of the client and the state as stored in the cookie. If the user acquires a cookie and then clicks the "Back" button of the browser, the state on the browser is generally not the same as before that acquisition. As an example, if the shopping cart of an online shop is built using cookies, the content of the cart may not change when the user goes back in the browser's history: if the user presses a button to add an item in the shopping cart and then clicks on the "Back" button, the item remains in the shopping cart. This might not be the intention of the user, who possibly wanted to undo the addition of the item. This can lead to unreliability, confusion, and bugs. Web developers should therefore be aware of this issue and implement measures to handle such situations.

Alternatives to cookies

Some of the operations that can be done using cookies can also be done using other mechanisms.

IP address

Some users may be tracked based on the IP address of the computer requesting the page. The server knows the IP address of the computer running the browser or the proxy, if any is used, and could theoretically link a user's session to this IP address.
IP addresses are, generally, not a reliable way to track a session or identify a user. Many computers designed to be used by a single user, such as office PCs or home PCs, are behind a network address translator (NAT). This means that several PCs will share a public IP address. Furthermore, some systems, such as Tor, are designed to retain Internet anonymity, rendering tracking by IP address impractical, impossible, or a security risk.

URL (query string)

A more precise technique is based on embedding information into URLs. The query string part of the URL is the one that is typically used for this purpose, but other parts can be used as well. The Java Servlet and PHP session mechanisms both use this method if cookies are not enabled.
This method consists of the Web server appending query strings to the links of a Web page it holds when sending it to a browser. When the user follows a link, the browser returns the attached query string to the server.
Query strings used in this way and cookies are very similar, both being arbitrary pieces of information chosen by the server and sent back by the browser. However, there are some differences: since a query string is part of a URL, if that URL is later reused, the same attached piece of information is sent to the server. For example, if the preferences of a user are encoded in the query string of a URL and the user sends this URL to another user by e-mail, those preferences will be used for that other user as well.
Moreover, even if the same user accesses the same page two times, there is no guarantee that the same query string is used in both views. For example, if the same user arrives to the same page but coming from a page internal to the site the first time and from an external search engine the second time, the relative query strings are typically different while the cookies would be the same. For more details, see query string.
Other drawbacks of query strings are related to security: storing data that identifies a session in a query string enables or simplifies session fixation attacks, referrer logging attacks and other security exploits. Transferring session identifiers as HTTP cookies is more secure.

Hidden form fields

Another form of session tracking is to use web forms with hidden fields. This technique is very similar to using URL query strings to hold the information and has many of the same advantages and drawbacks; and if the form is handled with the HTTP GET method, the fields actually become part of the URL the browser will send upon form submission. But most forms are handled with HTTP POST, which causes the form information, including the hidden fields, to be appended as extra input that is neither part of the URL, nor of a cookie.
This approach presents two advantages from the point of view of the tracker: first, having the tracking information placed in the HTML source and POST input rather than in the URL means it will not be noticed by the average user; second, the session information is not copied when the user copies the URL (to save the page on disk or send it via email, for example).
This method can be easily used with any framework that supports web forms.

window.name

All current web browsers can store a fairly large amount of data (2–32 MB) via JavaScript using the DOM property window.name. This data can be used instead of session cookies and is also cross-domain. The technique can be coupled with JSON/JavaScript objects to store complex sets of session variables^[45] on the client side.
The downside is that every separate window or tab will initially have an empty window.name; in times of tabbed browsing this means that individually opened tabs (initiation by user) will not have a window name. Furthermore window.name can be used for tracking visitors across different websites, making it of concern for Internet privacy.
In some respects this can be more secure than cookies due to not involving the server, so it is not vulnerable to network cookie sniffing attacks. However if special measures are not taken to protect the data, it is vulnerable to other attacks because the data is available across different websites opened in the same window or tab.

HTTP authentication

The HTTP protocol includes the basic access authentication and the digest access authentication protocols, which allow access to a Web page only when the user has provided the correct username and password. If the server requires such credentials for granting access to a web page, the browser requests them from the user and, once obtained, the browser stores and sends them in every subsequent page request. This information can be used to track the user.

Common Css

Learn CSS Positioning.

1. position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.
Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

#div-1 {
 position:static;
} 

2. position:relative

Relative positioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we could use relative positioning to move it a bit to the right and down a couple of pixels.

 

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
Let's move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That's because div-1 still occupies that original space in the document, even though we have moved it.
It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.

Remember, relative positioning moves stuff from where it would normally be. So if you had a paragraph in the middle of a page and you made both the top and left values negative 50, then the paragraph would move up and to the left 50 pixels from its normal location.

3. position:absolute

With absolute positioning, you define the exact pixel value where the specified HTML element will appear. The point of origin is the top-left of the parent element (that's the HTML element that it is inside of), so be sure you are measuring from that point. For example, if you had a bold tag inside of a paragraph tag, the parent of the bold tag would be the paragraph
Since the paragraph tag is our parent element, we need to decide where want our bold tag to appear in regards to the top left of the paragraph. Let's have it appear 10 pixels down and 30 pixels to the right.

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.
Let's move div-1a to the top right of the page:

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.
Also notice that div-1a was positioned in the top right corner of the page. It's nice to be able to position things directly the page, but it's of limited value.
What I really want is to position div-1a relative to div-1. And that's where relative position comes back into play.

Footnotes

• There is a bug in the Windows IE browser: if you specify a relative width (like "width:50%") then the width will be based on the parent element instead of on the positioning element.

4. position:relative + position:absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. two column absolute

Now we can make a two-column layout using relative and absolute positioning!

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
} 

6. two column absolute height

One solution is to set a fixed height on the elements.
But that is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
} 

7. float

For variable height columns, absolute positioning does not work, so let's come up with another solution.
We can "float" an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it's the only tool we have).

#div-1a {
 float:left;
 width:200px;
} 

8. float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
} 

9. float columns with clear

Then after the floating elements we can "clear" the floats to push down the rest of the content.

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
} 

Event handling and Event delegation

Event delegation in JavaScript

Traditional event handling

Event delegation is, quite simply, using a single event handler to manage a particular type of event for the entire page. This isn’t a new idea, but it is an important one to grasp for performance. Most of the time, you’ll see code like this in web applications:

This traditional way of coding assigns an event handler to each element that is actionable. For web sites with only a small amount of interaction, this may be okay. Large web applications, however, can grind to a halt when there are too many event handlers. The problem here isn’t necessarily a speed issue but rather a memory issue. If there are hundreds of possible interactions, there will end up being hundreds of ties between DOM elements and your JavaScript code. The more memory required of your web application, the slower it will run in general. Event delegation helps by minimizing this issue.

Event bubbling and capturing

Event delegation would be possible if not for the flowing nature of events. Early on in web development, browser vendors had to answer a philosophical question: when you click an area on a web page, what element are you actually interacting with? The problem came with the definition of interaction. Clicking within the bounds of an element is somewhat ambiguous. After all, a click on any element is also within the bounds of other elements. Consider clicking on a button. You’re actually clicking within the bounds of the button element, within the bounds of the <body> element, and within the bounds of the <html> element (see figure below).

At the time of this problem, there were two dominant browsers: Netscape Navigator and Internet Explorer. Each decided to solve this problem in a different way. Netscape defined an approach called event capturing, where events first occur on the highest object in the DOM tree (document) and then work down to the deepest element affected by the event. So in this example, event capturing has the click event first handled by document, then the <html> element, then <body>, and finally the <button> element.

Internet Explorer approached the problem in the exact opposite way. The IE team defined an approach called event bubbling. Event bubbling said that the deepest element affected by the event should receive the event first, then its parent should receive the event, and then it’s parent, etc., until the document object finally receives the event. Even though the document doesn’t have a distinct visual representation separate from <html>, it is still deemed to be its parent and thus bubbling continues up the DOM structure. The previous example would then see the <button> element receiving the event first, then <body>, <html>, and finally, document.

When defining the DOM, the W3C apparently found merit in both approaches and so the DOM Level 2 Events specification defines both event capturing and event bubbling as being present. First, the document receives the event, then the capturing phase commences to the most specific element affected by the event. Once the event is handled by that element, it bubbles back up to the document. The DOM addEventListener() method accepts three arguments: the name of the event to handle, a function to execute as the handler, and a Boolean set to true to handle the event during the capturing phase or false to handle during the bubbling phase. Most web developers have always been told to provide false as this argument so that it behaves the same way as attachEvent() in IE. Example:

Attaching an event handler via a property (element.onclick = function(){}), automatically assumes you want to use the bubbling phase to handle the event (this is done for backwards compatibility). Pretty much every browser except Internet Explorer (even through version 8.0) supports the DOM Level 2 events specification and therefore supports both capturing and bubbling. Internet Explorer still has its own proprietary event system that supports just bubbling.

Event delegation using bubbling

The key to event delegation is to use the bubbling aspect of events to handle them at the highest level (usually document). Not all events bubble, but mouse and keyboard events do, and fortunately, those are the ones you’re in which you’re interested. Revisiting the earlier example, you can handle all of the click events by assigning an event handler to the document and then checking the event’s target to determine the course of action.

Using event delegation, the number of functions necessary to manage events has been cut back to one. All click events are now handled by a single function which then delegates to the appropriate function depending on the target of the event. The same can be down for mousedown, mouseup, mousemove, mouseover, mouseout, dblclick, keyup, keydown, and keypress. A word of caution, though, mouseover and mouseout are difficult to handle via event delegation due to their nature (the mouse is considered “out” when it moves from a container to its child).
Note: You can also accomplish event delegation via event capturing, but it only works in browsers that support capturing and therefore not in Internet Explorer.

Benefits

Event delegation has several benefits to the performance of a web application:

1. Fewer functions to manage.
2. Takes up less memory.
3. Fewer ties between your code and the DOM.
4. Don’t need to worry about removing event handlers when changing the DOM via innerHTML.

Moving from traditional event handling to event delegation has improved the overall performance of large-scale web applications around the world. It’s become so important that JavaScript libraries such as YUI and jQuery have started to bake it into their core interfaces. It really takes very little effort to implement event delegation, but the performance gains can be quite noticeable through the user interface. This is especially apparent when you move from dozens of event handlers to just one. Give event delegation a try and you may just never do traditional event handling again.

Event delegation using jQuery.

.delegate()

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

• .delegate( selector, eventType, handler(eventObject) )

  selectorA selector to filter the elements that trigger the event.
  eventTypeA string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.
  handler(eventObject)A function to execute at the time the event is triggered.

• version added: 1.4.2.delegate( selector, eventType, eventData, handler(eventObject) )

  selectorA selector to filter the elements that trigger the event.
  eventTypeA string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.
  eventDataA map of data that will be passed to the event handler.
  handler(eventObject)A function to execute at the time the event is triggered.

• version added: 1.4.3.delegate( selector, events )

  selectorA selector to filter the elements that trigger the event.
  eventsA map of one or more event types and functions to execute for them.
  
  
  As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:
  
  

  $(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
  $(elements).on(events, selector, data, handler);        // jQuery 1.7+

  For example, the following .delegate() code:
  
  $("table").delegate("td", "click", function() { $(this).toggleClass("chosen"); }); 
•  is equivalent to the following code written using .on():
  $("table").on("click", "td", function() { $(this).toggleClass("chosen"); });
  
  To remove events attached with delegate(), see the .undelegate() method.
  Passing and handling event data works the same way as it does for .on().
  
  
  
  
  

Event Delegation using jQuery

.delegate()

Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.

• version added: 1.4.2.delegate( selector, eventType, handler(eventObject) )

  selectorA selector to filter the elements that trigger the event.
  eventTypeA string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.
  handler(eventObject)A function to execute at the time the event is triggered.

• version added: 1.4.2.delegate( selector, eventType, eventData, handler(eventObject) )

  selectorA selector to filter the elements that trigger the event.
  eventTypeA string containing one or more space-separated JavaScript event types, such as "click" or "keydown," or custom event names.
  eventDataA map of data that will be passed to the event handler.
  handler(eventObject)A function to execute at the time the event is triggered.

• version added: 1.4.3.delegate( selector, events )

  selectorA selector to filter the elements that trigger the event.
  eventsA map of one or more event types and functions to execute for them.

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:

$(elements).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        // jQuery 1.7+
 

For example, the following .delegate() code:

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
});

is equivalent to the following code written using .on():

$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});

To remove events attached with delegate(), see the .undelegate() method.
Passing and handling event data works the same way as it does for .on().

Additional Notes:

• Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

Examples:

Example: Click a paragraph to add another. Note that .delegate() attaches a click event handler to all paragraphs - even new ones.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Click me!</p>

  <span></span>
<script>
    $("body").delegate("p", "click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });
</script>
</body>
</html>

jQuery Event Delegation

22 June 2011
09:19

A lot of words have been published about the various methods jQuery provides to bind event handling code to specific elements in the DOM. In the very beginning there was only bind() and its plentiful shortcuts. Starting with the 1.3 release, native support for delegation-based event handling was added. The difference is that traditionally you attach event listeners to individual DOM elements, whereas with delegation you register handlers with a central event listener higher up the DOM hierarchy.
The benefits of the event delegation approach have been described in abundance, so I'll keep it brief: First, your handlers also get called for elements added dynamically after you've set up the event handler. Second, if you have many elements on a page that handle the same events in the same way, not having to attach the handler to each element individually is more efficient.
At first glance, the difference between using live() versus using the newer delegate() function seems rather subtle: the former registers the event handler at the document level (at least by default), while the latter can be used to register with an event listener on any element in the DOM.
So you may think that you should really use live() if you want to handle those events at the document level. However, as I found out the hard way a while ago, that can become a performance bottleneck, especially on browsers with lackluster selector and traversal performance (that is, basically, Internet Explorer). I will try to explain why that is by looking into the mechanics triggered by those innocently looking few-liners.

$.fn.live()

Let's start with a simple example to demonstrate the usage of the live() function. We'd like to open all links with the class “external” in a new window. Should be rather trivial:

$("a.external").live("click", function() {
  return !window.open(this.href);
});

What this does is that it creates a jQuery object with the selector “a.external”, and invokes its live() method to register a handler for “click” events. On the surface this invocation style seems to be consistent with the rest of the jQuery API. Under the covers however, there's some strange magic going on to actually implement event delegation: The live() method doesn't actually look at the jQuery object in terms of the elements that match the selector, it just looks at the selector itself. So while the jQuery team tried to make this method look like a variation of the traditional bind() method, it doesn't actually work in a comparable way at all (plus it doesn't play well with method chaining).
Okay, but what does that have to do with performance? Note that the first thing we did in the code snippet above was to create a jQuery object. While the live() function only really looks at the selector, this still has the side effect of starting up Sizzle to find all elements in the document that match the given selector. For large documents combined with browsers that do not support document.querySelectorAll(), that's a whole lot of DOM traversal. The result of this is discarded, so it's basically a lot of work done for nothing. And you're probably doing this on page load or at some other point where you really don't want to add any unnecessary delays.
And whenever the event is propagated up to the event listener at the document level, the selector engine is run again anyway to find whether the target element of the event matches the selector. This time the selector check is a lot more efficient though, as it doesn't collect all matching elements in the context, but just checks whether the the selector matches some element node in the tree between the context element and the event target. Internally, jQuery does the following to dispatch events to live handlers:

$(event.target).closest(selectors, event.currentTarget);

Starting at the clicked element, this walks up the tree up to the context element and evaluates the selectors of all live event handlers registered with that context.

live() with Context

If you know the jQuery API well, you may point out that the scope of the selector matching can be reduced to a specific “context” by passing an additional argument to the jQuery constructor.

var ctxt = $("#content")[0];
$("a.external", ctxt).live("click", function() {
  return !window.open(this.href);
});

With this change, the DOM traversal is restricted to the given context (in this case an element with the ID “content”), and the event listener is attached to that context element instead of to the document.
However, this does not change that the selector engine kicks in and wastes precious cycles.

$.fn.delegate()

jQuery 1.4.2 introduced the delegate() and undelegate() methods, which address this problem. With delegate() you do not create a jQuery object just to specify the selector for the event handler. Instead the selector is just a string argument to the method, and the context is specified by the jQuery object that the method is invoked upon:

$(document).delegate("a.external", "click", function() {
  return !window.open(this.href);
});

This is the event delegation API that should have been there in the first place. It only evaluates the selector when events are fired, doesn't involve strange magic, and doesn't break method chaining.

Let Live Die

I am probably not the only jQuery user who has naïvely used live() just because it looked a bit simpler, and because the disadvantages are not fully described in the documentation. I hope that method will be explicitly deprecated in favor of delegate() and phased out in some future version.