A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
I encountered a problem when I revised the company's original web applications a few days ago. At that time, I needed to extract some of the original applications and replace them with a more general one, the original application interfaces are retained. The original application belongs to the news.mycompany.com domain, and the new application will be deployed to upload.mycopany.com. When I tried to transfer data from a new domain to news.mycompany.com, I encountered an "Access Denied" error message returned by the browser at the front end, find the problem by referring to a large number of English documents found in Google, and specify docment for pages in two domains. the domain attribute partially solves the problem. Later, Google was launched to search for and document. domain-related Chinese documents, but most of the obtained articles are about network security. Few articles mention the document on the specified page. the domain attribute can realize data exchange between two domains, so I decided to write this article, hoping to implement it.
When developing a web application, you often encounter the need to transmit data between two frames. The frame here can be a frame in the frameset or an independent window. A common case is that one frame is the subject of the application, and the other frame provides some options for the user to choose. After the user selects the frame, this frame sends the user's choice to the server and transmits some information to the main frame. The information here may be the user's choice or the data returned by the server. It is easy to implement when the content in two frames belong to the same domain, but the problem becomes complicated and tricky when they belong to different domains, this involves the security of data access. If the problem is not solved, an error message "Access Denied" is returned by the browser.Possible solutions
The following describes how to transmit data between frames in different domains through several experiments.
We use an example to describe the following: If you need to provide a news input interface, you can use it to enter the original news content and embed an image in it. To implement this functional interface, we have designed two frames, or two windows:
For the sake of simplicity, we assume that the content in both windows is static and the file corresponding to the main window is newsedit.html, the file corresponding to the pop-up window is imgupload.html (in most cases, the content of both windows should be dynamically generated ).
Newsedit.html is located in the home directory of news.mycompany.com, and its source code is as follows:
| Edit your content here
Imgupload.html is located in the upload subdirectory of news.mycompany.com. Its source code is as follows:
| Image Upload
Here are two background applications:
The following is the page content returned by imgupload after processing the POST request. The content is displayed in the pop-up window occupied by imgupload.html:
File Uploaded successfully!
In addition to the success information, the returned page also uses scripts to pass the URL of the uploaded file to the main window. The specific process is as follows:
First, use "self. opener "obtains the handle of the main window (that is, the window where newsedit.html is located), and then assigns a value to the src attribute of the userimg element in the Main Window using the URL of the uploaded file, in this way, you can see the uploaded image in the main window.
|In fact, you can directly Save the content returned by imgupload in the experiment as a file and deploy it to img.mycompany.com. In newsedit.html, you can call the window. open () method to directly reference this file for testing.|
The error message "Access Denied" is displayed because:
Initially, for security reasons, browser developers and development groups are not allowed to exchange data and call methods between pages in different domains by default, in this case, the browser returns the "Access Denied" error.
"Why do I still encounter the" Access Denied "error even if my two pages belong to the same domain ?"
If this is the case, check whether the content in the pop-up window always belongs to the same domain. Check whether your imgupload.html calls applications in other domains, and the application re-writes the content in the window. If so, your pop-up window will deteriorate and it will last belong to another domain, of course, you will encounter an "Access Denied" error.
"In this case, if two pages belong to different domains, we cannot transmit data between the two windows ?"
This is basically the case-a frustrating message.
But the answer is not an absolute one-as if there is still hope.
Yes, some browser developers and development groups have made some adjustments to the original policy when developing high-version browsers. These adjustments have brought us a glimmer of vitality:
When two pages exchange data, the browser first compares the domain attributes of the two pages. If the domain attributes are the same, the Browser allows data exchange between them, otherwise, the error "Access Denied" is returned.
"How can we blind the browser and make it think that the domain attributes of the two pages are the same ?"
"What is the limit code for using this method ?"
There are still many restrictions on using this method to transfer data between different domains, mainly as follows:
Next, let's take a look at whether the dialog box provided by MSIE can solve the problem of data exchange between two domains.
First, let me briefly introduce the MSIE dialog box: the showmodaldialog and showmodelessdialog methods provided by MSIE can be used to display a modal or non-modal dialog box in a single frame, both methods use a URI parameter to specify the content in the dialog box frame. The optional parameter varguments is used to pass Parameters of any type (including array type) to the dialog box frame; in addition, an optional parameter sfeatures is used to define the Display Effect of the dialog box frame, such as the position and font;
|Note that the Netscape Navigator, Mozilla, and opera Browsers Do not have corresponding methods. That is to say, the showmodaldialog or showmodelessdialog display dialog boxes are not supported in other browsers except MSIE, if you are interested, here is an article to teach you how to simulate a modal dialog box in other ways. For details, see Simulating Modal Dialog windows.|
"Because a modal dialog box can include a URL to a resource in a different domain, do not pass information throughVargumentsParameter that the user might consider private.VargumentsParameter can be referenced within the modal dialog box usingDialogargumentsProperty ofWindowObject. "-- reference from msdn showmodaldialog
The above section describes how to use the Surl parameter to use the resources of another domain as the content of the dialog box. However, in this case, we can no longer pass any parameters to the dialog box, window can be used only when the referenced resource belongs to the same domain as the page that references it. dialogarguments obtains the parameters passed from the reference page.
"So I can not blind the browser by forcibly specifying the document. Domain attribute of two pages as in solution 1, so that the two pages belong to the same domain ?"
Some people have put forward this idea, and I have tried to do so, but it still ends in failure: forcibly specify document on two pages. after the domain attribute is configured, the dialog box does not recognize the parameters passed from the home page, no matter whether the two pages belong to the same domain or not.
In this experiment, I used three files
When main.html calls the showmodaldialog method, varguments passes the parameter "Can you hear me? ", You want the dialog box to receive this parameter. If the dialog box receives this parameter, it calls window. the Alert () method prints the message and returns a result to main.html: "Yes I do, I hear you from" + document. domain; If main.html receives the result returned by the dialog box, it also calls window. alert () prints the result.
The source code of main.html is as follows:
The source code of localdialog.html(remotedialog.html) is as follows:
Im here, Im a dialog
I will return something to the Main Window
Experiments show that:
Unfortunately, the results of the experiment tell us that this cross-domain data exchange cannot be achieved through the dialog box.
|If some vulnerabilities exist in my experiment or the parameters passed from main.html are read in the dialog box of your experiment, please email me. Thank you!|
It should be said that using server-side applications to implement cross-Origin data exchange is the most reliable method, because it is almost not restricted by the client, unlike the previous two methods: Some clients do not support document. domain attribute, some do not support the dialog box, and so on. So is it the best solution to solve data exchanges between different domains using server applications? The answer is no, because the server-side application also has its fatal impact: that is, the party receiving data cannot display the data transmitted from the other party in real time, it can display data only after the get or POST request is processed. If no special processing is performed in this process, the content edited by the user in this frame will be cleared, this is often what we don't want to see. We will not give an example about cross-domain data exchange using server applications. If you are interested, you can check related information on Google.Summary
Among the three solutions described above, except solution 2 cannot implement data exchange between frames in different domains, it has been proved that solution 1 and solution 3 are feasible, however, the two solutions have their own advantages and disadvantages:
For these two feasible solutions, you should choose flexibly when using the application. If you pay more attention to real-time data presentation, you can consider using the former; if the platform independence of the application is your measure of the application, you should consider using the latter.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service