This is the first day of my participation in Gwen Challenge

The same-origin policy

The same origin policy restricts how documents or scripts loaded from one source interact with resources from another. Is a key security mechanism for isolating potentially malicious files. For security, browsers can only interact with interfaces in the local domain. Users in different domains cannot read or write resources of each other without permission from the other domain.

This domain refers to the same protocol, same domain name, and same port.

Cross-domain approach

JSONP (JSON with Padding)

The

So the idea of JSONP is to contract a function name to the server, and when you ask the server, the server returns a piece of JavaScript that calls the convention function, passes its data as arguments to the convention function, so you need to have the convention function implemented on the browser side, Otherwise, the convention function undefined is reported.

Here’s an example:

The page from which the data is to be retrieved is index.html

<script>
  function getNews(data){
    console.log(data);
  }
</script>
<script src="http://aaa.com/news.js"></script>
Copy the code

The content of aaa.com/news.js is:

getNews({
    "newId":  "1001"."newsName": "Cross-domain approach"
})
Copy the code

So, after the browser defines getNews(data), the browser loads the contents of aaa.com/news.js directly into index.html, equivalent to:

<script>
  function getNews(data){
    console.log(data);
  }
</script>
<script>
  getNews({"newId":  "1001"."newsName": "Cross-domain approach"});
</script>
Copy the code

Obviously, in the above script, {“newId”: “1001”, “newsName”: “cross-domain method “} is passed as a parameter to the defined getNews(data) method, which can be executed.

If the browser requests the server side to invoke the interface, the specified function name needs to be passed to the server side using callback. The server side parses the function name obtained by the parameter callback and returns the returned data to the browser wrapped in the function name. The following operations are performed. Therefore, JSONP can be implemented only after the back-end coordination of corresponding interfaces.

Cross-origin Resource Sharing (CORS)

CORS is a kind of cross-domain access authentication mechanism introduced by W3C. This mechanism enables Web application servers to support cross-site access control, making cross-site data transfer more secure and reducing the risk of cross-domain HTTP requests.

At present, mainstream browsers have basically provided support for cross-domain resource sharing, IE supports version 10 or above, and almost all mobile browsers also support it.

When sending a request using XMLHTTPRequest, if the browser finds that the request does not comply with the same Origin policy, it adds a request header: Origin. The background processes the request. If the request is accepted, it adds a response header to the result: Access – Control – Allow – Origin; The browser determines whether the response header contains the Origin value. If it does, the browser processes the response and we get the response data. If it doesn’t, the browser rejects it and we can’t get the data.

The response header that can be set is access-Control-allow-origin

Access-Control-Allow-Origin: <origin> | *
Copy the code

Origin indicates the web sites that are allowed cross-domain access to this resource, with * representing all web sites. The browser checks this parameter and retrieves the resource if it meets the requirements.

Note: The above two cross-domain modes (JSON and CORS) require the cooperation of the server.

Domain (document.domain)

The default value for document.domain is the entire domain name, so even if two domains have the same secondary domain name, their document.domain is different.

Conditions for using the descending domain:

  1. Of another pagewindowobject
  2. Same secondary domain name
  3. The agreement is the same
  4. The same port

The way to use a descending domain is to set document.domain to the same secondary domain name on a page that meets the above criteria, so that you can use the Window object on other pages to do some operations.

Note:

  1. x.one.example.com 和 y.one.example.comYou can set document.domain toOne.example.com, can also be set to Example.com.
  2. document.domainThe value can only be one suffix of the current domain name and can contain a secondary domain name or higher.edu.cnThis whole is a top-level domain name.

postMessage

In HTML5, the window object adds the method postMessage. When the window.postMessage() method is called, a MessageEvent message is sent to the target window after all page scripts have been executed.

otherWindow.postMessage(message, targetOrigin, [transfer]);

  1. otherWindowmessage-receivingWindowObject.
  2. messageWill be sent to otherwindowThe new browser can pass objects.
  3. targetOriginwindow-passingoriginProperty to specify which Windows can receive message events, and the value can be a string*Or oneURI.
  4. transferOptional, it’s a bunch of sumsmessageSimultaneous transmissionTransferableObject. Ownership of these objects is transferred to the receiver of the message, and ownership is no longer retained by the sender.
  5. This method is very powerful, regardless of protocol, port, domain name differences.
var windowObj = window; // Can be references to other Window objects
var data = null;

addEventListener('message'.function(e){
    if(e.origin == 'http://jasonkid.github.io/fezone') {
        data = e.data;
        e.source.postMessage('Got it! '.The '*'); }});Copy the code

The above message event is used to receive requests sent by postMessage. Function parameters have the following attributes:

  • originmessage-sendingwindowThe source.
  • dataThe data.
  • sourcemessage-sendingWindowObject.

Note: reduced domain sumpostMessageOnly used between browsers, mostly between the current page and the pageiframeCommunicate, do some page nesting operations. Descending domain requires the same domain name, andpostMessageCan be used in anywindowObject case.

Bonus: Handwritten Ajax

let xhr = new XMLHttpRequest()
xhr.open('GET'.'/xxx')
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200) {console.log(xhr.responseText)
    }
}
xhr.send('a=1&b=2')
Copy the code

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.