Ajax - Beginning JavaScript - page 454

security issues
Security is a hot topic in today's Internet, and as a web developer you must consider the security
restrictions placed on Ajax. Knowing the security issues surrounding Ajax can save you development
and debugging time.

the Same‐Origin policy
Since the early days of Netscape Navigator 2.0, JavaScript cannot access scripts or documents
from a different origin. This is a security measure that browser makers adhere to; otherwise,
malicious coders could execute code wherever they wanted. The same‐origin policy dictates that
two pages are of the same origin only if the protocol (HTTP), port (the default is 80), and host are
the same.

Consider the following two pages:

➤

Page 1 is located at http://www.site.com/folder/mypage1.htm.

➤

Page 2 is located at http://www.site.com/folder10/mypage2.htm.

According to the same‐origin policy, these two pages are of the same origin. They share the same
host ( www.site.com ), u se the same protocol (HTTP), and are accessed on the same port (none is
specified; therefore, they both use 80). Because they are of the same origin, JavaScript on one page
can access the other page.

Now consider the next two pages:

➤

Page 1 is located at http://www.site.com/folder/mypage1.htm.

➤

Page 2 is located at https://www.site.com/folder/mypage2.htm.

These two pages are not of the same origin. The host is the same, but their protocols and ports are
different. Page 1 uses HTTP (port 80), whereas Page 2 uses HTTPS (port 443). This difference, though
slight, is enough to give the two pages two separate origins. Therefore, JavaScript on one of these
pages cannot access the other page.

So what does this have to do with Ajax? Everything, because a large part of Ajax is JavaScript. For
example, because of this policy, an XMLHttpRequest object cannot retrieve any file or document
from a different origin by default. There is, however, a legitimate need for cross‐origin requests, and
the W3C responded with the Cross‐Origin Resource Sharing (CORS) specification.

COrS
The CORS specification defines how browsers and servers communicate with one another when
sending requests across origins. For CORS to work, the browser must send a custom HTTP header
called Origin that contains the protocol, domain name, and port of the page making the request.
For example, if the JavaScript on the page http://www.abc.com/xyz.html us ed XMLHttpRequest to
issue a request to http://beginningjs.com , the Origin header would look like this:

Origin: http://www.abc.com