Reprinted from: http://blog.joycode.com/saucer/archives/2006/10/03/84572.joy
Cross Site Ajax was published in October 03, 2006 by saucerIn general, for security, the browser does not allow you to access other domains on the client through XMLHttpRequest (refer to connection 1, 2), even if it is a subdomain of the same domain.
No, for example, www.joycode.com
Blog.joycode.com. (You can use some settings to access the subdomain, but because this method is not very common, you will not consider it all, but if you are interested, refer to connection 2 .)
However, it is obvious that in many cases, it is very useful to access other websites and obtain information/services from other websites, especially in the Web 2.0 era.
There are three common cross-site access methods (refer to connection 3, 4 ):
ASP. NET Ajax extension (Atlas) provides a bridge mechanism for you to configure on the server side to access other websites, and supports both pox and soap protocols. For details, see building mash-ups with "Atlas" in the Atlas document. Of course, you can create a web service by yourself to access other websites and return information.
It is said that iframeexecutor in Atlas can implement cross-origin calls, I followed the steps in calling Web Services hosted outside of your application with "Atlas" in this post on the msdn blog federal developer weblog, however, the error message "access is denied" is displayed on Windows 2003 Server SP1. Then I downloaded the project in this article. The test result is still "access is denied ". Some browser settings may need to be modified to succeed, but this is not my purpose. I need an example that can be successful under normal settings.
The implementation of the On-Demand Javascript script is very simple. For example, if I have such a webpage (to test it, I need to change the website)
<HTML>
<Head>
<Script language = "JavaScript" type = "text/JavaScript">
Function loadcontent ()
{
VaR S = Document. createelement ('script ');
S. src = 'HTTP: // www.anotherdomain.com/testcrossjs.aspx? F = setdivcontent ';
Document. Body. appendchild (s );
}
Function setdivcontent (V)
{
VaR DV = Document. getelementbyid ("DV ");
DV. innerhtml = V;
}
</SCRIPT>
</Head>
<Body>
<Div id = "DV"> </div>
<input type="button" value="Click Me" onclick="loadContent()">
</body>
Here is www.anotherdomain.com/testcrossjs.aspx,
<script language="C#" runat="server">
void Page_Load(object sender, EventArgs e)
{
string f = Request.QueryString["f"];
Response.Clear();
Response.ContentType = "application/x-javascript";
Response.Write(String.Format(@"
{0}('{1}');",
f,
DateTime.Now));
Response.End();
}
</script>
Click the "Click me" button to generate a new script tag, download the corresponding Javascript script, and call back setdivcontent () to update the content of a div on the webpage.
IFRAME methods seem to be very popular. Apart from the support of the dojo toolkit, according to Microsoft's dare Obasanjo (refer to connection 9), Windows Live Contacts Gadget uses this method to obtain the address book of Hotmail. Recently, Joseph smarr, a developer of plaxo, made a cross-site Ajax: challenges and techniques for building rich Web 2.0 mashups [Source: Kevin yank -- oscon 2006: Cross-Site Ajax]. They made this method a platform, cooperation is allowed between partners. The developed scheme is called the Javascript wormhole, which is said to be intended to be promoted as a standard. The PPT of his lecture can be downloaded here. It is worth looking.
The IFRAME method is as follows:
1. http: // domain1/testcross.html:
<HTML>
<Head>
<Script language = "JavaScript" type = "text/JavaScript">
VaR url = "http: // domain2/testcross.html"
VaR oldhash = NULL;
VaR timer = NULL;
Function gethash ()
{
VaR hash = Window. Location. Hash;
If (hash. length> = 1) & (hash. charat (0) = '#'))
{
Hash = hash. substring (1 );
}
Return hash;
}
Function sendrequest ()
{
VaR d = document;
VaR T = D. getelementbyid ('request ');
VaR F = D. getelementbyid ('alienframework ');
F. src = URL + "#" + T. Value + "<br/>" + new date ();
}
Function setdivhtml (V)
{
VaR d = document;
VaR DV = D. getelementbyid ('response ');
DV. innerhtml = V;
}
Function idle ()
{
VaR newhash = gethash ();
If (newhash! = Oldhash)
{
Setdivhtml (newhash );
Oldhash = newhash;
}
Timer = Window. setTimeout (idle, 100 );
}
Function window. onload ()
{
Timer = Window. setTimeout (idle, 100 );
}
</SCRIPT>
</Head>
<Body>
Request: <input type = "text" id = "request"> <input type = "button" value = "send" onclick = "sendrequest ()"/> <br/>
Reply: <Div id = "response"> </div>
<IFRAME id = "alienframe" src = "http: // domain2/testcross.html"> </iframe>
</body>
2. http: // domain2/testcross.html:
<HTML>
<Head>
<Script language = "JavaScript" type = "text/JavaScript">
VaR url = "http: // domain1/testcross.html"
VaR oldhash = NULL;
VaR timer = NULL;
Function gethash ()
{
VaR hash = Window. Location. Hash;
If (hash. length> = 1) & (hash. charat (0) = '#'))
{
Hash = hash. substring (1 );
}
Return hash;
}
Function sendrequest ()
{
VaR d = document;
VaR T = D. getelementbyid ('request ');
VaR F = parent;
// Alert(f.doc ument); // try to remove this comment and you will get "access is denied"
F. Location. href = URL + "#" + T. Value + "<br/>" + new date ();
}
Function setdivhtml (V)
{
VaR d = document;
VaR DV = D. getelementbyid ('response ');
DV. innerhtml = V;
}
Function idle ()
{
VaR newhash = gethash ();
If (newhash! = Oldhash)
{
Setdivhtml (newhash );
Oldhash = newhash;
}
Timer = Window. setTimeout (idle, 100 );
}
Function window. onload ()
{
Timer = Window. setTimeout (idle, 100 );
}
</SCRIPT>
</Head>
<Body>
Request: <input type = "text" id = "request"> <input type = "button" value = "send" onclick = "sendrequest ()"/> <br/>
Reply: <Div id = "response"> </div>
</body>
The two web pages are basically the same. The first web page is embedded with an IFRAME. After you click "send", the content in the text box is hashed
Fragment is passed to IFRAME. After you click "send" in IFRAME, it uses the hash
Fragment is passed to the parent window. Because only hash is modified.
Fragment: the browser will not load the webpage content again. Here, a timer is used to detect URL changes. If it changes, it will update the content of a div.
Is this method a security vulnerability? Considering Microsoft's Windows Live is using this method, it is estimated that it is not ,. Is this method safe? Considering that this method can be successful only when two websites collaborate, the security issue does not seem to be very high, unless the websites involved have XSS problems.
[Reference connection]
1. Security considerations: Dynamic HTML
Http://msdn.microsoft.com/library/default.asp? Url =/Workshop/author/DHTML/sec_dhtml.asp
2. about cross-frame scripting and security
Http://msdn.microsoft.com/library/default.asp? Url =/Workshop/author/OM/xframe_scripting_security.asp
3. Cross-Domain proxy
Http://ajaxpatterns.org/Cross-Domain_Proxy
4. Cross Domain XMLHttpRequest using an IFRAME proxy
Http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book75
5. Back button support for Atlas updatepanels
Http://www.nikhilk.net/BackButtonSupport.aspx
6. Cross-document messaging hack
Http://blog.monstuff.com/archives/000304.html
7. Building mash-ups with "Atlas"
Http://atlas.asp.net/docs/Walkthroughs/DevScenarios/bridge.aspx
8. Calling Web Services hosted outside of your application with "Atlas"
Http://blogs.msdn.com/federaldev/archive/2006/07/31/684229.aspx
Http://www.federaldeveloper.com/Shared%20Documents/Presentations%20by%20Marc%20Schweigert/CallAtlasWebServiceInDifferentProject.zip
9. Ajax tip: passing messages between iframes
Http://www.25hoursaday.com/weblog/PermaLink.aspx? Guid = 3b03cf9d-b589-4838-806e-64efcc0a1a15
10. oscon cross-site Ajax slides
Http://blog.plaxo.com/archives/2006/07/oscon_crosssite.html
Http://www.plaxo.com/css/api/Joseph-Smarr-Plaxo-OSCON-2006.ppt
11. oscon 2006: Cross-Site Ajax
Http://www.sitepoint.com/blogs/2006/07/28/oscon-2006-cross-site-ajax/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
