Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to achieve cross-domain sharing in JavaScript". The content is detailed, the steps are clear, and the details are handled properly. I hope this "how to achieve cross-domain sharing in JavaScript" article can help you solve your doubts.

Homologous strategy

In client programming languages, such as javascript and ActionScript, homology policy is a very important security concept, which is of great significance in ensuring the security of data. The homology policy stipulates that scripts across domains are isolated, and scripts in one domain cannot access and manipulate most of the properties and methods of another domain. So what is the same domain and what is the different domain? When two domains have the same protocol (such as http), the same port (such as 80), and the same host (such as www.example.org), then we can think of them as the same domain. For example, http://www.example.org/index.html and http://www.example.org/sub/index.html are in the same domain, while any two of http://www.example.org,https://www.example.org,http://www.example.org:8080,http://sub.example.org will constitute a cross-domain. The same origin policy should also deal with some special cases, such as restricting access to scripts under the file protocol. The local HTML file is opened in the browser through the file protocol. If the script can access any other files on the hard disk through the file protocol, there will be security risks. At present, there are such hidden dangers in IE8.

Affected by the same origin policy, cross-domain resource sharing will be restricted. However, with the practice of people and the progress of browsers, there are a lot of valuable experience precipitation and accumulation in cross-domain request skills. Here I divide cross-domain resource sharing into two types, one is one-way data request, and the other is two-way message communication. Next, I'll list some common cross-domain approaches, where the source code for the following cross-domain examples can be obtained.

Unidirectional cross-domain

JSONP (JSONwithPadding) is a simple and efficient way to cross-domain. Script tags in HTML can load and execute javascript of other domains, so we can use script tags to dynamically load resources from other domains. For example, if I want to load the data of domain B from the page pageA of domain A, then I declare the data needed by pageA as JavaScript in the page pageB of domain B, and then load the pageB in pageA with the script tag, then the script in pageB will be executed. JSONP adds a callback function on this basis. After the pageB is loaded, the function defined in pageA is executed, and the required data is passed to the function in the form of parameters. JSONP is easy to implement, but it also has some security risks. If a third-party script is executed at will, it can tamper with the content of the page and intercept sensitive data. But JSONP is a very appropriate choice for passing data between trusted parties.

Flash has its own set of security policies. The server can declare which domain SWF files can be accessed through crossdomain.xml files, and SWF can also use API to determine which domain SWF can load itself. When accessing resources across domains, such as requesting data on the domain www.b.com from the domain www.a.com, we can send HTTP requests with the help of flash. First, modify the crossdomain.xml on the domain www.b.com (usually stored in the root directory, if you don't need to create it manually), and add www.a.com to the whitelist. Second, send the HTTP request through FlashURLLoader, * *, and pass the response result to JavaScript through FlashAPI. FlashURLLoader is a common cross-domain solution, but this solution is powerless if you need to support iOS.

The name property of the window object is a very special property, and when the location of the window changes and then reloads, its name property can remain the same. Then we can load page B of other domains with iframe in page A, and after page B uses JavaScript to assign the data to window.name,iframe to load, page A changes the address of iframe to an address in the same domain, and then you can read the value of window.name. This method is very suitable for one-way data requests, and the protocol is simple and secure. External scripts are not executed without restrictions, as JSONP does.

When the data provider does not provide support for JSONP or window.name protocol, and does not have open access to other domains, we can grab data through serverproxy. For example, when a page under the www.a.com domain needs to request the resource file asset.txt under www.b.com, sending an Ajax request directly to www.b.com/asset.txt must be blocked by the browser. At this time, we configure a proxy under www.a.com, and then bind the Ajax request to this proxy path, such as www.a.com/proxy/, and then the proxy sends a HTTP request to access the asset.txt under www.b.com. The cross-domain HTTP request is made on the server side, and the client does not generate cross-domain Ajax request. This cross-domain approach does not need to sign an agreement with the target resource and is aggressive. In addition, it should be noted that the agent should be protected to a certain extent in practice, such as restricting the use or frequency of others.

Two-way cross-domain

By modifying the domain property of document, we can communicate between domains and subdomains or between different subdomains. The same domain policy assumes that domains and subdomains belong to different domains, for example, www.a.com and sub.a.com are different domains. In this case, we cannot call the JavaScript method defined in sub.a.com in the page under www.a.com. But when we change the domain property of their document to a.com, the browser will assume that they are in the same domain, so we can call each other's method to communicate.

JavaScript can only do limited access and operation between different domains. In fact, we can use these limited access rights to achieve the purpose of cross-domain communication. It is under this premise that FIM (FragmentIdentitierMessaging) was invented. The parent window can URL read and write to the iframe, and the iframe can also read and write the URL,URL part of the parent window, which is called frag, that is, the # sign and its following characters. It is generally used to locate the browser anchor, and the server side does not care about this part. It should be said that the HTTP request process will not carry frag, so the modification of this part will not generate HTTP requests, but will generate browser history. The principle of FIM is to change the frag part of URL to carry out two-way communication. Each window sends messages by changing the location of other window and receives messages by listening for changes in its own URL. Communication in this way will result in unnecessary browser history, and some browsers do not support onhashchange events and need to be polled to know the changes in URL. * URL has a length limit under the browser, which restricts the amount of data transferred each time.

Two-way communication on the page can also be solved through Flash. There is a class called LocalConnection in FlashAPI, which allows two SWF to communicate through processes. In this case, SWF can be played in a separate FlashPlayer or AIR, or embedded in a HTML page or PDF. Following this communication principle, we can nest a SWF in different domain HTML pages to achieve the purpose of transferring data to each other. It is fast for SWF to exchange data through LocalConnection, but the amount of data at a time is limited by the size of 40kb. Cross-domain communication in this way is too complex and requires two SWF files, which is not practical.

Window.postMessage is a very new method defined by HTML5, which makes it easy to communicate across window. Because it is a very new method, it cannot be used in both very old and older browsers.

After reading this, the article "how to achieve cross-domain sharing in JavaScript" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.