Cross-domain - jsonp, cors, iframe, document.domain, postMessage()

Same Origin Policy

Concept: same origin: protocol, domain name, port number are exactly the same

The same-origin policy is a security policy of the browser; and the browser will not return the response information that violates the same-origin policy

http://127.0.0.1:3000/index.html         http://127.0.0.1:3000/hello.html

http://localhost:3000/hello.html          https://localhost:3000/hello.html 

eg: protocol name---http, https domain name---127.0.0.1, localhost                                                                                                            

different sources

Concept: The protocol name, domain name, and port have one difference, that is, different sources;

Cross-domain : js cross-domain refers to data transmission or communication between different domains through js. For example, using ajax to request data from a different domain, as long as the protocol, domain name, and port are different, they are regarded as different. domain. 

In short, different origin is cross domain,

1.JSONP

Full name: JSON with Padding;            

Role: use the cross-domain capabilities of some HTML tags to send cross-domain requests eg: img, script, link

Disadvantages: JSONP can only send get requests, not post requests, and JSONP is not an official cross-domain solution

principle:

Primitive js:

* Client

        Define functions in advance

        Dynamically create a script tag and set the requested address as the attribute value of src

        Send the name of the defined callback function as a request parameter to the background

        Add the created script tag to the html structure at the appropriate time

* Service-Terminal

        var callback = req.query.callback ----The returned value needs to be encapsulated into json

        res.send(callback+'('+json+')');

 jQuery

 * client url?callback=?

 * Service-Terminal

        var callback = req.query.callback ----The returned value needs to be encapsulated as jsonObj

        res.send(callback+'('+jsonObj+')');

The $.getJSON method will automatically determine whether it is cross-domain. If it is not cross-domain, it will call the ordinary ajax method; if it is cross-domain, it will call the jsonp callback function in the form of asynchronously loading the js file.

 2. CORS

Full name: Cross-Origin Resource Cross-Origin Resource Sharing

Advantages: CORS is the official cross-domain solution, and using CORS does not require any modification on the client side, just send AJAX requests directly

　　　CORS supports get/post requests; IE8 and below do not support

Method: Tell the browser to allow cross-domain requests by setting a response header from the server

res.sendHeader('Access-Control-Allow-Origin','Request address')

Allow all cross-domain requests with * ie res.sendHeader('Access-Control-Allow-Origin', '*' )

    Think about the difference between JSONP and CORS

1. In addition to the GET method, CORS also supports other HTTP request methods such as POST, PUT and so on.

2. CORS can use XmlHttpRequest for transmission, so its error handling is better than JSONP.

3. JSONP works on older browsers that do not support CORS.

4. JSONP : http; CORS : ordinary text strings returned by https

 3.iframe

window.name + iframe ==> http://www.tuicool.com/articles/viMFbqV , support cross main domain. POST is not supported

Get parent content in iframe

Similarly, under the same domain, the parent page can obtain the content of the child iframe, then the child iframe can also manipulate the content of the parent page

 4. document.domain to cross subdomains

For example, a.qq.com nests an iframe of b.qq.com, if a.qq.com sets document.domain to qq.com. b.qq.com sets document.domain to qq.com, then they can communicate with each other without cross-domain restrictions.

Note: only across subdomains)

5.postMessage()

window.postMessage(message,targetOrigin) This method is a newly introduced feature of html5.

Advantages: You can use it to send messages to other window objects, whether the window objects belong to the same origin or different origins (currently supported by browsers such as IE8+, FireFox, Chrome, Opera, etc.).

Disadvantages: The disadvantage is that IE6 and IE7 do not support it, so whether to use it or not has to be decided according to actual needs.

Specifically: the window object that calls the postMessage method refers to the window object that wants to receive the message. It obtains the passed message by listening to its own message event, and the message content is stored in the data property of the event object.

　　The first parameter message is the message to be sent, and the type can only be a string;

　　The second parameter targetOrigin is used to limit the domain of the window object that receives the message. If you do not want to limit the domain, you can use the wildcard *.

<script>    
function onLoad(){
     var iframe = document.getElementById('iframe');
    var  obj = iframe.contentWindow;
    obj.postMessage( 'I am a message from a', '* ')
}
</script>  
<iframe id="iframe" src='http://www.test.com/b.html' onload="onLoad()"></iframe>

<script>    
window.onmessage = function (e){
   event = event ||e 
    console.log(e.data) // Get the information from a through the data attribute 
}
 </script>