Javascript cross-origin Summary

What is cross-origin? When the two domains have the same protocol, the same port, and the same host, we can think that they are the same domain. For example: http://www.example.com/a.html And http://www.example.com/b/c.html It belongs to the same domain. Data Access is... What is SyntaxHigh? When the two domains have the same protocol, the same port, and the same host, we can think that they are the same domain. For example: http://www.example.com/a.html And http://www.example.com/b/c.html It belongs to the same domain, and data access can be solved through ajax. If none of the above three conditions is met, we call it a different domain. For example http://www.example.com/a.html And http://example.com /B .html. Due to the limitations of the javascript same-origin policy, the js language itself does not have cross-origin access capabilities. However, many business needs, coupled with the rich imagination of programmers, have emerged a variety of solutions to cross-origin problems. Here we will make a simple summary of the mainstream cross-origin solutions. Image Beacon is a simple cross-origin solution that uses the properties of images that can be read across domains. The Code is as follows: var img = new Image (); img. src =" http://example.com /Data? Value = 123 "; execute the above two lines of code in js, you can http://example.com /Data transfers data, so you don't have to worry about whether it is different from the address in src. The data part is embedded in the URL, that is, the "value = 123" part. This solution has the advantage of being very simple and does not cause many code management problems. The disadvantage is that it can only send data to the service in one way. Because the data is embedded in the URL, and the character length of the URL is restricted by the browser, the data size is also limited. Image Beacon is very useful for third-party statistical websites. Baidu statistics and CNZZ are all used. JSONPJSONP cross-domain is used a lot. After studying the QQ space, we will find that many of them use the JSONP technology. JSONP uses the ability of the script tag to request js files across domains. Implementation Method: 1) first create a dynamic script tag var script = document. createElement ('script'); src =' http://example.com /Data? Callback = fn '; document. body. appendChild (script); 2) Pay attention to the src section above. The final side includes the parameter callback = fn. Fn must be a global function and should be declared before the script tag is appended to the body. Function fn (data) {// process data} 3) after Step 1 is completed, the script tag is dynamically generated in the body tag. The browser parses the script tag to the server ( http://example.com . After the server receives the request, the data to be sent to the client is packaged in the fn function in json format and transmitted as parameters, as shown below: fn ({value: 123 }); // js Code sent from the server to the client. 4) the browser receives the js Code sent from the server and executes the code. It finds that the fn function has been declared globally (step 2 ), the data is successfully transmitted to the js Code. The advantage of this method is that data can be transmitted on the client and server without the length limit. The disadvantage is that the security is uncontrollable because of the value sent from a third-party server. In the above example, the fn function must verify data before operating data to ensure no malicious code injection. Iframe communication has primary page A and is embedded with an iframe B (the name attribute is set to "B"). Communication between A and B can be divided into two situations, one is in the same domain as A and B, A different domain of A and B. 1) Because A and B are in the same domain, the Browser allows them to access each other. The access method is as follows: A accesses B: winB = window. frames ["B"]. window; // winB points to window object B in B to access A: winA = parent. window; // when winA points to window object 2 in A and B in different domains, the above access will fail. Due to security issues, the browser restricts the js access permissions between different domains. Since direct access to js fails, is there any other way to implement communication between the home page and iframe of different domains? At this time, we need to give full play to the programmer's hack spirit. The following content is the cross-origin situation, which is discussed in two cases. A) on the home page, A transmits data to iframe B. Set the src attribute of B in the form of the following: data is the value that A wants to pass to B. In this case, B can use location. href to obtain the data value. Note that there is a "#" sign before data. The advantage is that when the value of data is modified through js (the URL is changed), the entire iframe refresh will not be caused. In this case, if you need A to continuously pass the value to B, you can constantly modify the value of data after the url, and B can monitor whether the URL is changed by setting setInterval, to obtain the changed data value. B) If iframe B transmits data to homepage A in iframe B, then embed A hidden iframe C, and set iframe C and homepage A to the same domain but different URLs. Assume that the url of A is http://a.com Then, iframe C is set as follows: Similarly, the data after "#" is the value that iframe B needs to pass to. Because A and C are in the same domain relationship, they can be directly accessed through js. Therefore, you only need to get the data part of the URL in C through JS in C, and then pass it to A. The implementation code is as follows: parent. parent. fn (location. href. split ('#') [1]); note that the global function fn, parent must be declared in A before executing the above line of code. parent points to the window object in page. Cross-Domain Communication between the home page and iframe can also be achieved by the special nature of window. name. If you are interested, you can search for it on the Internet. There are many cross-origin methods. The key is to choose one that can meet your own business needs without affecting the maintainability and scalability of the Code. This article is a summary. The front-end is a big pitfall and it is easy to go in. It will take some effort to make it clear.